Designing for touch | Feature | .net magazine
Designing for touch |
John Cox
Blogs · @wyome
Tagged accessibility · everything
Bulletproof HTML5 <details> fallback using jQuery · Mathias Bynens
The HTML5 `<details>` and `<summary>` elements create collapsible disclosure widgets that hide content by default, but browser support was incomplete at the time of writing. The author provides a robust feature detection method to identify native support and explains how to implement a cross-browser polyfill using CSS and jQuery that adds click and keyboard accessibility while gracefully degrading in older browsers and when JavaScript is disabled.
nested figures
When marking up groups of related images with individual captions, use nested figure elements with figcaption tags for each image rather than relying on the title attribute, which hides content from keyboard and touch users and prevents semantic markup of caption text. The recommended approach places a group caption at the top of a containing figure element, then nests separate figure elements for each image, each with its own figcaption below—this structure can be enhanced with CSS to show or hide captions on hover if needed, and allows for language specification via the lang attribute within caption text. The anti-pattern to avoid is placing multiple images in a single figure and using only the title attribute for individual captions, which creates accessibility barriers and offers no way to add emphasis or language markup to caption content.
Contrast Rebellion - to hell with low-contrast fonts!
This manifesto argues that websites should prioritize text readability by maintaining sufficient contrast between text and background colors, rather than sacrificing legibility for aesthetic minimalism. The author supports this position with evidence from W3C accessibility guidelines, readability research showing faster reading times and better comprehension with high contrast, and expert testimony on why gray-on-light designs harm users—particularly elderly visitors and those with vision impairments. The piece challenges designers to recognize that while aesthetics matter, the primary function of web content is to be read, and that high contrast can be achieved without compromising visual appeal.
Black, Brown, and Beige - Readability
I don't see a complete article to summarize here—just a list of article titles and metadata from what appears to be a content directory or archive page. To provide the summary you've requested, I would need the actual text or content of the specific article you saved. Could you provide the full article text or clarify which piece from this list you'd like me to summarize?
Adactio: Journal—Sea change
This piece argues that responsive web design—sites that adapt fluidly to different screen sizes and devices—should become the standard approach for web design rather than creating separate desktop and mobile versions. The author contends that fixed-width, device-specific design is fundamentally anti-web and that the diversity of devices makes it impractical to optimize for each one separately; instead, designers should embrace the web's inherent fluidity by using techniques like fluid grids and media queries. The argument draws a parallel to the earlier shift from table-based layouts to CSS and semantic markup, positioning responsive design as an inevitable evolution that will transform the industry once major brands begin adopting it.
Keyboard Enabling Web Applications – techPortal
A technical guide on making web applications accessible and functional for keyboard-only users.
Hiding Content for Accessibility - Snook.ca
This article evaluates different CSS techniques for hiding content visually while keeping it accessible to screen readers, examining the specific failures of each approach: text-indent fails with right-to-left languages, collapsed positioning doesn't work with Apple's Voice Over, absolute positioning causes unwanted page scrolling when focused, and the clip method triggers unexpected scrollbars in Webkit and Opera browsers. The author proposes a hybrid solution combining absolute positioning, clipping, and minimal dimensions to avoid these pitfalls while maintaining both screen reader accessibility and proper focus behavior.
Using the HTML title attribute | The Paciello Group Blog
The Paciello Group Blog » Using the HTML title attribute -
HTML5 accessibility
This resource provides detailed accessibility testing data for HTML5 features across major browsers (Chrome, Edge, Firefox, IE, and Safari), showing whether each element is keyboard accessible, properly mapped to platform accessibility APIs, and usable by people relying on assistive technology without requiring ARIA workarounds. Internet Explorer 11 and older versions of other browsers show significantly weaker support, particularly for semantic elements like `main`, `time`, and `dialog`, as well as newer input types like date/time controls. The site includes test methodologies, accessibility evaluation tools, and performance metrics for each feature, making it a comprehensive reference for developers determining which HTML5 features can be safely implemented with full accessibility support.
HTML5Rocks - Home
This is a hub page from Google's Chrome team that organizes learning resources for web developers across multiple topic areas including performance, accessibility, payment processing, and progressive web apps, with links to courses, blog posts, and guides designed to help developers build fast, secure, and inclusive websites.
Showing Hyperlink Cues with CSS (Ask the CSS Guy)
This tutorial demonstrates how to use CSS attribute selectors to automatically display contextual icons next to hyperlinks based on their destination—such as PDF files, external sites, or mailto links—without requiring additional HTML classes or markup. The technique uses selectors like `a[href$='.pdf']` (ends with), `a[href^='mailto:']` (starts with), and `a[class~='popup']` (contains word) to target links and add background images with padding, and was supported in IE7, Firefox, and Safari at the time of writing.
Tips For Creating Great Web Forms - CSS-Tricks
This piece outlines best practices for building accessible and functional web forms, covering semantic HTML (using proper label tags), CSS styling techniques (like floating labels for table-like layouts), and JavaScript enhancements (such as clearing placeholder text on focus). It also recommends considering existing form-building tools like Wufoo or Web Form Factory rather than building forms from scratch, while warning against common pitfalls like CSS resets that can break default button styling across browsers.
Disabling Deprecated HTML Using CSS | David’s kitchen
Den här guiden förklarar de ofta förbisedda nyanserna i HTML-attribut bortom de vanligaste som class och id — bland annat hur booleska attribut som `disabled` bara aktiveras genom sin närvaro (inte sitt värde), varför `disabled="false"` faktiskt fortfarande inaktiverar ett fält, och hur ARIA-attribut kompletterar HTML för tillgänglighet. Texten täcker också moderna prestandaattribut som `loading="lazy"`, `async`/`defer` för scripttaggar och det relativt nya `fetchpriority="high"` för att påverka Core Web Vitals, samt hur `data-*`-attribut låter dig lagra data direkt på element för JavaScript-läsning utan att skriva inline-logik. Guiden avslutar med varningar om deprecated attribut som `align` och `bgcolor` som hör hemma i CSS istället.
A List Apart: Articles: Prettier Accessible Forms
This article presents a reusable CSS and JavaScript technique for styling accessible HTML forms with labels and inputs arranged horizontally side-by-side, using semantic markup (fieldset, legend, label elements) and an ordered list structure rather than tables. The solution relies on the CSS `display: inline-block` property for labels, supplemented by a JavaScript workaround for Mozilla browsers that don't natively support inline-block, while also addressing specific rendering quirks in Internet Explorer versions. The approach is designed to be portable across projects—authors can simply apply the "cmxform" class to any properly marked-up form to achieve basic structural styling that can be further customized without modifying the core reusable stylesheet.
Juicy Studio: Example Luminosity Contrast Ratios
This reference page presents luminosity contrast ratios for all web-safe colors displayed against a black (#000) background, helping designers verify whether color combinations meet WCAG accessibility standards for readability. The table includes not only the contrast ratio for each foreground color but also brightness and hue differences, with icons indicating whether each combination passes AA or AAA accessibility levels for regular or large text. The highest contrast ratios occur with bright colors like white, cyan, and yellow (reaching 21.00 for white text on black), while dark colors like #003 produce minimal contrast and fail accessibility requirements.