A Complete Guide to Links and Buttons An excellent resource by CSS-Tricks. I learned that the download attribute on links instructs the browser to download the resource; that links can have a rel attribute that define the relationship to the target (e.g. rel=”author”); that you can chain link styles (a:focus:hover {}); and that if you… [Read More]
Enhancing ARIA landmarks with aria-labelledby Article by Léonie Watson describing how to use aria-labelledby to distinguish between multiple navigational elements. Example: <nav role=”navigation” aria-labelledby=”firstLabel”><p>Choose an <span id=”firstLabel”>aisle</span> to browse</p><ul><li><a href=”fresh.html”>Fresh foods</a></li>…</ul>. How Does HTML Microdata Help With Accessibility? Scott Vinkle explains how pages marked up with microdata helps the ‘Reader Mode’ in browsers to find… [Read More]
An app for everything, but can everyone use it? Anne Spencer Ross tested almost 9000 apps and found that a quarter were missing labels for >90% of their icons. ‘Floating action buttons’, representing the most important action on the screen, lacked labels in 92% of cases. The tools used to build apps can greatly affect… [Read More]
The Latest Barbie Dreamhouse Now Includes A Wheelchair-Accessible Elevator Mattel, the manufacturer behind the Barbie brand, started producing Barbies with wheelchairs in February 2019. They’ve now released a ‘Dreamhouse’ dollhouse that has a button-operated lift, big enough to accommodate the wheelchair. It’s a great step forward in seeing a full range of diversity from a… [Read More]
#accessiBe Will Get You Sued Adrian Roselli writes about accessiBe, a company (whose article I’ve shared before) that offers an add-on for sites to automatically make them ‘accessible’. Adrian presents a scathing review of their practices, including that they incorrectly interpret WCAG, are cited in accessibility lawsuits and attempt to spoof automated checkers.
How Does HTML Microdata Help With Accessibility? Scott Vinkle explains how pages marked up with microdata helps the ‘Reader Mode’ in browsers to find and arrange content. For example, <img src=”source.jpg” alt=”” itemprop=”image” /> determines the image that will be displayed in Reader Mode. Reader Mode is a useful feature for many, especially for people… [Read More]
Enhancing ARIA landmarks with aria-labelledby Article by Léonie Watson describing how to use aria-labelledby to distinguish between multiple navigational elements. Example: <nav role=”navigation” aria-labelledby=”firstLabel”><p>Choose an <span id=”firstLabel”>aisle</span> to browse</p><ul><li><a href=”fresh.html”>Fresh foods</a></li>…</ul>.
Sa11y – accessibility quality assurance assistant An accessibility quality assurance tool geared towards content authors: Sa11y visually highlights common errors, with contextual information. Try out the demo. Text link Accessibilty: aria-label and title Deque article testing <a> links with various combinations of title and aria-label. The conclusion is that aria-label is the best supported attribute,… [Read More]
Legacy Applications and Accessibility A deque.com blog post describing approaches to finding accessibility issues in legacy code; for example, scanning the codebase for positive tab index values (tabindex=”1″ etc). An interesting idea is an ‘accessibility JavaScript file’ that you can include on pages to help fix a11y issues without having to modify the legacy code…. [Read More]
Quick Tips for High Contrast Mode Sarah Higley shares some tips for supporting Windows High Contrast Mode (WHCM). WHCM ignores ARIA roles/states/properties, so <a role=”button”> will be styled as a link. Use svg { fill: currentColor } to have it match the color of the surrounding text. Beware that the -ms-high-contrast media query is being… [Read More]
Loading...