Accessibility
Hiding inline SVG icons from screen readers
How to hide inline SVG used for decorative icons from screen readers.
Hiding visible content from screen readers with aria-hidden
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.
Skip links and other in page links in WebKit browsers
In page links do not work as expected (or as in other browsers) when activated by keyboard in WebKit browsers like Safari and Chrome.
Screen readers and CSS
Some CSS intended for visual media types only has unexpected and semantic effects on screen readers.
An accessible, keyboard friendly custom select menu
A way of styling the closed state of select elements without sacrificing accessibility.
Using display:table has semantic effects in some screen readers
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.
Screen readers, list items and list-style:none
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.
Block level links and accessibility
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.
Do not use display:none to visually hide content intended for 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.
Accessibility in Mac OS X 10.7 Lion
A quick walkthrough of the accessibility improvements in Mac OS X 10.7 Lion that stood out most to me.
The iOS Zoom setting disables maximum-scale=1 and user-scalable=no
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.
Do unobtrusive, accessible social media sharing widgets exist?
No social media sharing widgets that I know of are keyboard friendly, and most use obtrusive markup. Anyone know of an accessible, unobtrusive option?
Accessibility checklists can be helpful if used right
Some people argue that checklists should not be used when evaluating accessibility. I think they work fine when used right.
Keyboard accessibility (again)
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.
Why do drive-through ATMs have Braille keypads?
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.
Is hiding text with CSS to improve accessibility bad for SEO?
Does using CSS to hide text—any text, for whatever reason—result in an automatic search engine penalty?
Accessibility improvements in Apple iOS 4 for iPhone/iPod Touch
iOS 4 for Apple’s mobile products have improved accessibility features, including support for navigating by WAI-ARIA landmark roles.
No longdesc attribute in HTML5
The longdesc attribute, which can be used to provide a longer description of an image, is currently not included in the HTML5 specification.
Accessibility does not prevent you from using JavaScript or Flash
Many people mistakenly believe that in order to make a website accessible you have to completely abstain from using technologies like JavaScript or Flash.
If you use the accesskey attribute, specify unique values
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.
Built-in or bolt-on accessibility in HTML5? How about a bit of both?
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.
Using the lang attribute makes a difference
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 VoiceOver keyboard commands
A selection of keyboard shortcuts used to control the VoiceOver screen reader in Mac OS X 10.6 (Snow Leopard).
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.
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.
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.
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.
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.
Gesture-based VoiceOver on the iPhone and iPod touch
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.
Opera adds support for the longdesc attribute
Very few visual browsers support the longdesc attribute, but now there are at least two: iCab and Opera.
HTML 5 and the summary attribute
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.
Accessibility improvements in Mac OS X Snow Leopard
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.
Using the Web with a refreshable Braille display
Roger Hudson has posted a video of Bruce Maguire using a refreshable Braille display to browse the Web.
Building accessible forms with WCAG 2.0
Examples, with references to relevant WCAG 2.0 Success Criteria, of how screen reader users can successfully interact with forms that use JavaScript.
Making accessibility more real
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.
Accessibility is more than “possible to access”
Making web sites and web applications accessible is more than making them possible to access - it also means making them usable.
NVDA – a free, open source screen reader
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.
WCAG 2.0 Checklist by WebAIM
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.
Screen reader testing
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.
Check your design with text size increased to 200 percent
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.
IE 8 still does not resize text sized in pixels
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.
WCAG 2.0 recommends using luminosity contrast ratio to check colour contrast
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.
Results from the WebAIM screen reader survey
WebAIM’s screen reader survey provides some interesting results. Most are expected, but there are some surprises.
Headings, heading hierarchy, and document outlines
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?
WCAG 2.0 finally a W3C Recommendation
Today the W3C announced that Web Content Accessibility Guidelines 2.0 (WCAG) has finally been declared a W3C Recommendation.
Making Google Maps more accessible
You can make the Google Maps you put on your site more accessible by providing a static image fallback for users without JavaScript and hacking in keyboard accessibility.
Writing good alt text
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.
Going from WCAG 1.0 to WCAG 2.0
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.
Reading up on WAI-ARIA
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.
Multiple form labels and screen readers
If screen readers reliably supported multiple labels for the same form control, it would be easier to make error messages and instructions fully accessible.
Turn Firefox into a screen reader with Fire Vox
Fire Vox is a free, open source, cross platform screen reader extension for Firefox. If you create websites you need it.
Helping others understand web accessibility
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.
Manual for Apple VoiceOver in Mac OS X 10.5 Leopard
A Getting Started guide for VoiceOver is available for download in a number of formats, including audio, PDF, and Braille.
Videos of people using assistive technology
A set of fantastic videos that show how people with various disabilities use computers with the help of assistive technology.
Scrap text resize widgets and teach people how to resize text
Instead of wasting time and resources on building JavaScript widgets that resize the text on your site, teach people how to resize text in their browser.
10 colour contrast checking tools to improve the accessibility of your design
A list of tools that help make your design readable to all users by checking if text has sufficient contrast against its background.
Can the alt attribute be omitted without hurting accessibility?
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.
Provide an accessible alternative if you must use a CAPTCHA
Visual verification of distorted characters displayed in an image is a major accessibility barrier to people who are visually impaired, blind, or dyslexic.
Introduction to screen readers and screen magnifiers
See how people who are experienced screen reader or screen magnifier users interact with their computer desktop and the Web.
London 2012 Olympics branding film causes epileptic seizures
A segment of a film that promotes the London 2012 Olympic Games brand has triggered epileptic seizures in at least thirty people.
Adding vs. not removing accessibility
Only sites that are badly constructed to begin with or have had too many accessibility-removing additions grafted on need to be made accessible.
International RSI Awareness Day 2007
In honour of the RSI Awareness Day, here is a nice tip for reducing the risk of getting wrist, arm, and neck pain from using a mouse.
Seven accessibility mistakes you don’t want to make
Seven accessibility mistakes that even well-intentioned developers make, and some advice on how to avoid them.
Apple iPhone is cool, but where is my keypad?
Apple’s new iPhone looks like a fantastic PDA/mobile Web browser, but what about its lack of keys with tactile feedback?
Click here and other meaningless link phrases
Many sites use link phrases that are anonymous and meaningless. Help improve the Web by making yourself and your clients think before you link.
Accessibility statements or Site help pages?
Perhaps it is time to replace accessibility statements with site help pages that are less technical.
Inline quotations: use q elements or not?
Should Web designers and Web authors use q elements to mark up inline quotations or not? Opinions differ.
Light text on dark background vs. readability
The recent design trend of light text on dark backgrounds is reducing the readability and usability of many sites for certain people.
Web accessibility to become mandatory in Europe
On 12 June 2006, ministers of 34 European countries signed the Riga Ministerial Declaration, which requires that all public websites are accessible by 2010.
AJAX, JavaScript support and screen reader accessibility
Making websites and web based applications that use a lot of JavaScript accessible isn’t as easy as just making sure that there is a non-JavaScript fallback.
Alt text is an alternative, not a tooltip
Alternative text should never be displayed at the same time as the image it provides an alternative for.
Luminosity contrast ratio
WCAG 2.0 suggests calculating the luminosity contrast ratio between foreground and background colours to ensure readability.
How to write a useful accessibility statement
If you don’t have an accessibility statement on your site, this article explains how to write one. If you already have one, here’s how to make it better.
Accessible DHTML: two different approaches
Examples of different approaches to making dynamic web content more accessible: WAI’s dynamic web content accessibility and Web Forms 2.
CAPTCHA is bad for accessibility
Using a bitmap image containing distorted text to verify that the user is human prevents several groups of disabled people from using web based services.
Accessibility and usability for interactive television
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.
Colour blindness simulator for Mac OS X
A very handy little application that provides a real-time simulation of various types of colour blindness.
VoiceOver and Safari: Screen reading on the Mac
Examining VoiceOver, the built-in screen reader in Mac OS X 10.4.
The alt and title attributes
When browser vendors bend the standards and implement something in a different way than what the specification states, they may cause prob…
Bring on the tables
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.
Accessibility vs Branding
The other day I came a cross a pretty strange discussion, at least from my point of view, in a web related forum. Some people were arguing…
Municipal Web Accessibility
Alt Tags have tested 408 Californian city websites for accessibility and usability, with disappointing results. 89 % of the websites did n…
A List Apart
Issue 163 of A List Apart contains two articles. How to Save Web Accessibility from Itself is a long article in which Joe Clark asks the w…
Accessible != Boring
For some reason a common belief is that an accessible web site has to be “boring” and that it has to contain mostly text and very few imag…
Skipping links
For accessibility reasons it is considered good practice to put a “skip navigation” link at the top of each page (In this case, “top” mean…
Building Accessible Websites
Accessibility expert Joe Clark has now made his entire book Building Accessible Websites available online. For your own good, read this bo…
WCAG 2.0
W3C just published the Web Content Accessibility Guidelines 2.0 Working Draft. I haven’t had the time to read it yet, but out of both inte…
Access this
I just noticed that Joe Clark has made chapter 6 of his great book Building Accessible Websites available online. Read it online or buy it…