How to hide inline SVG used for decorative icons from screen readers.
If you want to hide visible content only from screen readers in order to give users a better experience, aria-hidden may be an option.
In page links do not work as expected (or as in other browsers) when activated by keyboard in WebKit browsers like Safari and Chrome.
Some CSS intended for visual media types only has unexpected and semantic effects on screen readers.
A way of styling the closed state of select elements without sacrificing accessibility.
When you use the table-related display properties of CSS to get the display properties of a table, some screen readers will treat the non-table markup as a real table.
Many developers expect screen readers to ignore visual styling of semantic HTML elements. They mostly do, but with list items their behaviour is hit-or-miss.
HTML5 allows links to contain block level elements instead of just inline elements. This can be useful but there are currently potential usability issues with screen readers.
Hiding content with display:none hides it from all users, including those who use screen readers. Be aware of this when deciding how to hide content visually.
A quick walkthrough of the accessibility improvements in Mac OS X 10.7 Lion that stood out most to me.
Enabling the Zoom setting (in Settings > General > Accessibility) on iOS makes it possible to zoom normally on web pages that use a meta viewport element to prevent zooming.
No social media sharing widgets that I know of are keyboard friendly, and most use obtrusive markup. Anyone know of an accessible, unobtrusive option?
Some people argue that checklists should not be used when evaluating accessibility. I think they work fine when used right.
Keyboard accessibility really is not that hard to get right, but many, many web developers do not seem to think about it. Here are some simple guidelines that may help.
DanKam is an augmented reality app that uses the phone's camera to filter images in real time, changing their colours to make them easier to see for colourblind people.
It may not seem obvious why drive-through ATMs would have Braille keypads to enable blind persons to use them. But once you know the answer it's quite simple.
Highlighting some persistent myths about web accessibility.
Does using CSS to hide text - any text, for whatever reason - result in an automatic search engine penalty?
iOS 4 for Apple's mobile products have improved accessibility features, including support for navigating by WAI-ARIA landmark roles.
The longdesc attribute, which can be used to provide a longer description of an image, is currently not included in the HTML5 specification.
If you use the accesskey attribute and specify the same value more than once, browser behaviour is unspecified and varies a lot. Make sure values are unique if you use accesskey.
Having built-in semantics and accessibility in HTML5 is great, but I think we also need specifications like WAI-ARIA that let us add accessibility to less than ideal markup.
Specifying the natural language of complete and partial HTML documents really does make a difference to users of screen readers that support language switching.
A selection of keyboard shortcuts used to control the VoiceOver screen reader in Mac OS X 10.6 (Snow Leopard).
Joe Clark takes a look at the accessibility (or rather the lack of it) of the Vancouver 2010 Winter Olympics websites.
ATAG addresses software that is used to create websites or manage the content of websites, but is unfortunately ignored by many creators of such software.
If you use the CSS that comes with sIFR, Apple's VoiceOver screen reader will not read the replaced text. But there is a simple fix.
By contacting organisations with inaccessible websites about the problems you encounter, you increase the chances of them fixing their sites. W3C's WAI has created a document intended to help you do this.
The W3C HTML Accessibility Task Force will help ensure that HTML 5 provides features to enable Web content to be accessible to people with disabilities.
Many dropdown/flyout/DHTML menus are not keyboard friendly. Next time you implement a dropdown menu, make sure it can be used without a mouse.
The heuristics used by the JAWS screen reader to determine whether a table is used for layout or data are quite strange.
Looking for input from screen reader users with regards to the usefulness of the summary attribute for data tables and the information provided in it.
There appears to be no single solution to heading structure in HTML that fits all situations, but as I see it there are two choices.
The new W3C website has a new and very good summary of the why, what, and how of Web accessibility.
The results from WebAIM's October 2009 screen reader user survey have been posted. Some results are expected while others can be a bit surprising.
We are Colorblind contains good and bad examples of designing for people who are colourblind along with design patterns, tips and tricks, and colour checking tools.
All Lightbox clones that I have tested have issues with keyboard accessibility, making it unnecessarily difficult or confusing to use them without a mouse.
Completely removing the outline from links makes it very difficult for people who do not use a mouse to see where the keyboard focus is. But there is a better way.
Many web designers and developers forget about or ignore keyboard-only users when building web sites. Here is some advice on what to avoid and what to do.
Apple has made the iPhone and iPod touch accessible to visually impaired people by shipping them with the new, gesture-based version of the VoiceOver screen reader.
The Readable bookmarklet, especially in combination with the Better Web Readability CSS framework, makes websites easier to scan and read.
Very few visual browsers support the longdesc attribute, but now there are at least two: iCab and Opera.
The current HTML 5 Working Draft lists the summary attribute as an obsolete but conforming feature and tells authors to provide table information to all users.
Like the content on a site but have a hard time reading it? Try the Readability bookmarklet.
Mac OS X 10.6 has plenty of accessibility improvements, several of which will be useful not only to people with disabilities. No mention of WAI-ARIA, though.
If you think a technique or other document related to WCAG 2.0 could be improved, you can let the WCAG Working Group know about it.
Roger Hudson has posted a video of Bruce Maguire using a refreshable Braille display to browse the Web.
Cufón is a potential replacement for static images or sIFR when you must use a specific typeface that is not widely available. However, it has some usability and accessibility issues.
Even if you do not have a disability, there are some things you can do to gain a better understanding of the obstacles some people with disabilities run into on the web.
Making web sites and web applications accessible is more than making them possible to access - it also means making them usable.
Testing your web sites and web applications with a screen reader is good. Screen readers can be expensive, but NVDA is a completely free alternative that has WAI-ARIA support.
WebAIM's WCAG 2.0 Checklist condenses the guidelines into an easy-to-use and understandable checklist that will help you get started with WCAG 2.0.
While it is important for all web developers to have access to a screen reader for testing, setting one up may prove a little tricky. Fortunately there are instructions that will help.
To make sure that people who need larger text can use your size, increase text size to 200 percent and check that the content is still readable and functional.
The Accessible Rich Internet Applications (WAI-ARIA) specification has reached Last Call Working Draft status, and the W3C wants your feedback.
Internet Explorer's text resizing behaviour is different from that of other browsers since IE does not allow the end user to (easily) resize text whose size has been specified in pixels.
With WCAG 2.0 now being a W3C recommendation it is time to check that the tool you use to check colour contrast supports the luminosity contrast ratio algorithm recommended by WCAG 2.0.
WebAIM's screen reader survey provides some interesting results. Most are expected, but there are some surprises.
What do you do when an HTML document's main heading is not the first text that should be marked up as a heading - insert a dummy heading or give up on having a perfect document outline?
Today the W3C announced that Web Content Accessibility Guidelines 2.0 (WCAG) has finally been declared a W3C Recommendation.
The problems dyslexics have when using the web are often overlooked, even by people who make an effort to create accessible websites.
It is quite common to come across images with missing alternative text or alternative text that does not properly describe the image's content or function.
It is time to start reading up on WCAG 2.0. It may be a lot to digest, but there are documents available that compare the checkpoints in WCAG 1.0 to WCAG 2.0.
WAI-ARIA, the Accessible Rich Internet Applications Suite, helps developers make their web applications more accessible to people who rely on assistive technology. Start reading up on it.
If screen readers reliably supported multiple labels for the same form control, it would be easier to make error messages and instructions fully accessible.
Fire Vox is a free, open source, cross platform screen reader extension for Firefox. If you create websites you need it.
When creating layouts with an em-based width, specify a maximum width to avoid horizontal scrolling for users who increase text size.
The WCAG Samurai have released version 1 of their list of corrections for and updates to the Web Content Accessibility Guidelines 1.0.
Accessibility is sometimes harder to get into than it should be. The documentation is hard to read and we can all do a little bit more to help each other.
Some accessibility features are commonly misused or overused by well-meaning developers, in some cases leading to decreased accessibility.
James Edwards notes that as Web professionals we owe it to ourselves and our clients to do our jobs properly, which means taking accessibility seriously.
A Getting Started guide for VoiceOver is available for download in a number of formats, including audio, PDF, and Braille.
A set of fantastic videos that show how people with various disabilities use computers with the help of assistive technology.
The US-based retailer Target has been sued for refusing to make their website accessible. The lawsuit has now been given class-action status.
A list of tools that help make your design readable to all users by checking if text has sufficient contrast against its background.
In the current editor's draft of the HTML 5 specification, the alt attribute for images is no longer required. I am not convinced that this is a good idea.
Visual verification of distorted characters displayed in an image is a major accessibility barrier to people who are visually impaired, blind, or dyslexic.
See how people who are experienced screen reader or screen magnifier users interact with their computer desktop and the Web.
A segment of a film that promotes the London 2012 Olympic Games brand has triggered epileptic seizures in at least thirty people.
The WCAG Samurai have published the first draft of their errata for and extensions to WCAG 1.0.
The HTML Working Group is required to cooperate with the Web Accessibility Initiative to ensure that HTML 5 enables accessibility.
Jack Pickard has taken a good look at the latest Working Draft of the Web Content Accessibility Guidelines 2.0, and likes what he sees.
The new Dutch accessibility law goes way beyond the WCAG and embraces the spirit of modern, Web standards-based Web development.
Seven accessibility mistakes that even well-intentioned developers make, and some advice on how to avoid them.
A rant about some of the trends that I find really annoying about the Web in 2006.
Much of the advice intended to provide a better user experience for users of handheld devices will also improve accessibility in other contexts.
An attempt to explain why we believe that including everybody does not risk excluding people with disabilities.
Far too often, public sector websites falsely claim that they are accessible after paying tax money to web agencies that do not know what accessibility is.
The recent design trend of light text on dark backgrounds is reducing the readability and usability of many sites for certain people.
Google Accessible Search is designed to prioritise search results that are more usable to blind and visually impaired people.
Web Content Accessibility Guidelines 2.0 is confusing, difficult to understand, hard to implement, and disregards web standards.
An introduction to a series of articles that explain techniques for evaluating the accessibility of a website. Useful to both developers and website owners.
Alternative text should never be displayed at the same time as the image it provides an alternative for.
The third and final article in a three-part series that explains how to evaluate the basic accessibility of a website.
The second article in a three-part series that explains how to evaluate the basic accessibility of a website.
The first article in a three-part series that explains how to evaluate the basic accessibility of a website.
Accessibility and usability for ITV have a lot in common with accessibility and usability for the web. There are also many differences, some of which are highlighted in this article.
A discussion on whether it is acceptable for a website to be accessible to people with disabilities but inaccessible to people that use alternative browsing devices or operating systems.
Some things I would like the Web Standards Project Accessibility Task Force to take a closer look at.
Web accessibility is not just for screen readers or blind people.
A few common accessibility myths and misconceptions explained.
Examining VoiceOver, the built-in screen reader in Mac OS X 10.4.
Claims of adhering to accessibility standards are often false and nothing more than marketing.
Avoid using tables for layout, but make sure to use them, and use them properly, for tabular data. This article explains how to make HTML data tables accessible.