Accessibility
The Web should be made accessible to as many people as possible, regardless of any disabilities they might have.
Accessibility issues on Vancouver Olympics websites
Joe Clark takes a look at the accessibility (or rather the lack of it) of the Vancouver 2010 Winter Olympics websites.
Remember the Authoring Tool Accessibility Guidelines (ATAG)
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.
Specify a text colour for img elements
Make sure the alt text most browsers display when an image cannot be rendered is readable. If necessary, specify a text colour for images.
sIFR default CSS hides content from at least one screen reader
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.
Unobtrusive JavaScript is not necessarily accessible JavaScript
There is no guarantee that a JavaScript that is unobtrusively implemented is also keyboard and screen reader accessible.
A call for consistent display of alt text across browsers
How browsers display alt text for missing images varies, so it would be nice to see this standardised by specifying the recommended behaviour in HTML 5.
Telling organisations that their websites are inaccessible
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.
W3C HTML Accessibility Task Force
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.
If you must use a dropdown menu, make sure it’s keyboard friendly
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.
JAWS has a weird way of recognising data tables
The heuristics used by the JAWS screen reader to determine whether a table is used for layout or data are quite strange.
Use a background image in your CSS? Remember to specify a backup colour.
Whenever you place text on top of a background image, check if the text is readable if the image is missing and specify a background colour if necessary.
Do you find table summaries helpful?
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.
Headings and document structure conclusions
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.
New accessibility overview on the W3C website
The new W3C website has a new and very good summary of the why, what, and how of Web accessibility.
Results from WebAIM’s screen October 2009 screen reader user survey
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.
Use the th element to specify row and column headers in data tables
When creating data tables in HTML, make sure to mark up the table structure properly, using the relevant elements and attributes available in HTML.
Design patterns and examples for colour blindness
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.
Lightboxes and keyboard accessibility
All Lightbox clones that I have tested have issues with keyboard accessibility, making it unnecessarily difficult or confusing to use them without a mouse.
Remove the outline from links on :active only
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.
Improve your keyboard accessibility
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.
Page navigation
Page 1 | Page 2 | Page 3 | Page 4 | Page 5 | Page 6 | Page 7 | Page 8 | Page 9 | Page 10 | Page 11 | Page 12 | Page 13 | Page 14 | Page 15 | Page 16 | Page 17 | Page 18 | Page 19 | Page 20 | Page 21 | Page 22 | Page 23Subscribe / follow
Sponsors
Authentic Jobs
- Full-Stack Developer at Svensk Lånemarknad (Stockholm, Sweden, SE)
- Web Developer PHP/MySQL at eMeals (Atlanta, Ga, Acworth, GA, or Birmingham, AL, Ge, US)
- UI Designer at charity: water (New York City, Ne, US)
- Project/Product Manager – H+K Digital at Hill+Knowlton Strategies (Dallas, TX, US)
DreamHost web hosting
Use the promo code 456BEREASTREET3 to save USD 20 when you sign up for DreamHost

