This document contains guidance on accessibility in the form of Frequently Asked Questions regarding practical aspects of web content creation.
Each question provides comments and clarifications about typical accessibility issue that webmasters and internet editors face in their daily work.
What Tools can I use to evaluate accessibility?
Should pages look the same in all browsers?
Which browsers should I design for?
How can I optimise my pages for use on mobile devices?
What other assistive technology do people use?
Why do web pages have to be keyboard accessible?
What is a text equivalent? How do I add it to an image?
Is the text equivalent always a description of the image?
What other content requires a text equivalent?
When should I provide captioning?
Can I use tables for layout?
How can I tell if contrast is sufficient?
What does “increase text size” mean?
What is the problem with flickering?
What is the problem with moving and blinking content?
What does “keyboard accessible” mean?
What is a keyboard trap?
What does logical tab order mean?
What are embedded objects? How do I make them accessible?
What is AJAX? How do I make it accessible?
What does it mean that a technology has support for accessibility?
What current technologies have accessibility support?
How do I make accessible PDF documents?
How should I warn the user when there are links to PDF documents?
What can I do if my website has many inaccessible PDF documents?
How can I create accessible Flash content?
What is the correct method to embed an object into a webpage?
1 - What Tools can I use to evaluate accessibility?
2 - What are the most useful manual checks?
3 - Should pages look the same in all browsers?
There is no reason why web pages should look the same in all browsers. What is important is that all the information and functionality should be equivalent, and accessible to everyone.
4 - Which browsers should I design for?
Design for Web standards, such as HTML, CSS and DOM. Modern browsers conform to these standards and so designing for the standard will help ensure an optimum experience on all browsers. It is a mistake to design for a specific browser.
For testing, the priority should be the most popular browsers on the most commonly-used platforms, but not forgetting to take into account different types of browser (for example, there are mobile-specific, text-only, desktop, voice).
5 - How can I optimise my pages for use on mobile devices?
W3C has published the Mobile Web Best Practices recommendation which helps designers ensure that all web content is compatible with mobile devices without adaptation. It also provides guidance on how to adapt content to exploit the capabilities of devices when these can be identified at the server.
6 - What is Assistive Technology (AT)?
In the context of the Web, assistive technology is a user agent or other software or hardware device that extends the functionality of a user agent and enables a user to perform a task that would otherwise be difficult or impossible. AT for computers provides alternative means of interaction, input or output.
7 - What is a screen reader?
People who can not see the screen, or have difficulty reading, but can hear, are able to use computers with this kind of assistive technology that produces speech (or Braille, which is read with the fingertips). Screen magnification devices (see below) also often incorporate a screen reader. Screen readers typically have numerous options, so that the user experience of a given web page will be different for each person.
8 - What is a screen magnifier?
People who have difficulty seeing the screen can use a magnifier. It is like reading a paper document with a magnifying glass. They can use the keyboard or mouse to move the magnifier around the screen. As with a traditional magnifying glass, the person can only see a limited area of the screen at any time. As people who need screen magnification often also have difficulty with colour contrast, these systems normally also allow the user to change the colours (for example, inverting the colours or enhancing contrast).
9 - How does voice recognition software work?
People who can not use their hands can operate the computer with systems that recognise speech commands. They can “point to” specific items on a web page by speaking the text. Otherwise it is like using keyboard commands. They can also dictate speech to be transformed into text.
For example, when using text like “more information” or “buy this product”, the user has to take additional steps to find the required information, as the voice recognition system can not identify, unambiguously, which of the links the user wants to activate.
10 - What other assistive technology do people use?
The range of assistive technologies is as diverse as the needs of people with disabilities. They may be hardware or software. Some common hardware devices include switches, perhaps operated with a head-mounted stick, or sip-and-puff devices operated with the mouse. Apart from screen reading, magnification and voice recognition, software devices include on-screen scanners that sweep across the screen and up or down until the user stops it at the required point with a switch, and on-screen keyboards for people who use the mouse but not the keyboard.
11 - Why do web pages have to be keyboard accessible?
Many people can not use a pointing device like a mouse. They may have a motor disability like hand tremor, or may not be able to see the pointer on the screen, or often their device simply doesn’t have one (a mobile phone for example). So it is important to make all information and content operable with the keyboard.
For example, a blind user can not use a mouse, so all options must be keyboard-accessible.
12 - What is a text equivalent? How do I add it to an image?
A text equivalent is a text that describes anything that is not itself text, such as pictures, video, sound, form controls, scripts, and colours. This is important because a browser or assistive technology can transform text to suit the user’s needs, as speech, as text in different font styles, sizes, and colours, or in other languages. It is especially important for people who can’t see images, either because they have a sight disability or because they haven’t downloaded them. In HTML the text equivalent is provided with the alt attribute. Other technologies can use different methods to provide the alternatives, such as accessibility panels or properties.
13 - Do all images need a text equivalent?
Any image that conveys information should have a text alternative. However, images that don’t convey any information (decoration) should have an empty equivalent (in HTML, simply alt=""), so that people and assistive technologies know that they can be ignored.
14 - Is the text equivalent always a description of the image?
The text equivalent should convey the same information and functionality as the element itself. If an image is scripted to work as a button, then tell the user what it does. With some images, the designer has to decide whether it is relevant or not. Too much information can be as bad as too little.
15 - What is a CAPTCHA? How do I make it accessible?
A CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) is a security mechanism to prevent automated robot systems submitting web forms. There is normally an image of a short random text, often distorted to make it hard to read by a computer program. The idea is that only a human user can read it and then type it into the adjacent text field. The problem is that often even a human reader can not read the text.
Logically, no text equivalent can be provided, as that would be also accessible to the robots, but to make it accessible, some alternative is needed for humans. One solution is to use synthesised speech; but even can this exclude people who can’t hear (deaf, or with no sound device, for example). A better way is to ask the user (in text) to perform some simple mathematical operation or write the nth letter of a word. The most accessible solution is not to use the CAPTCHA at all, and use filtering and security mechanisms on the web server.
16 - What other content requires a text equivalent?
Anything that is not text must have a text equivalent: pictures, image maps, video, sound, form controls, scripts, and colours.
17 - What are captions?
Captions are a text equivalent synchronized with a multimedia track, which convey the speech and any other relevant sound content such as alarms, doorbells, breaking glass, shouting. If the user can turn them on or off, they are called closed captions. Open captions are included in the image.
18 - What is audio description?
19 - When should I provide captioning?
All multimedia that conveys information through the audio track requires captions, unless the multimedia itself is provided as an accessible alternative for some other content (for example, audio description).
20 - Can I use tables for layout?
The Web Content Accessibility Guidelines (WCAG) 2.0 allow the use of layout tables, but it strongly recommended to use CSS position whenever possible.
21 - How can I tell if contrast is sufficient?
The Web Content Accessibility Guidelines (WCAG) 2.0 give a minimum contrast ratio for text, images and other visual content. The WCAG 2.0 Techniques also provide a list of tools for checking the contrast of different areas on the screen.
If text and background colours are specified separately (for example in CSS) and the browser or other user agent allows the user to change then the content complies with this requirement.
The more information an image conveys, and the smaller the size of any text, the more important the contrast and colour difference.
Tools are available (search for “colour blindness simulation”) to view the page as a person would with different types of colour blindness or in grey scale.
22 - What does “increase text size” mean?
Most graphical browsers allow the user to zoom the image of the page, but this can result in blurring. To avoid this problem, most also provide a way to increase text size, which is clearer. But in some browsers this will only work if the size is defined using relative units of measure (such as em, or %). So always use relative units for text size and other aspects that the user needs to enlarge (like boxes of text).
23 - What is the problem with flickering?
Some content may cause a sudden alternating change in the brightness of part of the screen, or flicker. This is often defined as anything faster than 3 flashes per second.
For people who have photosensitive epilepsy, flickering on the screen can cause seizures, perhaps even before they have time to stop it (by closing the browser window). So avoid causing flicker on the screen.
24 - What is the problem with moving and blinking content?
When content moves around or blinks on and off, some people with cognitive disabilities may become distracted and unable to understand it. These people and people with assistive technology such as screen readers or magnification tools may be slower and not have enough time to read the content before it changes. So if you must use these visual effects, always provide some way to stop them.
25 - What does “keyboard accessible” mean?
In practice, this means ensuring that content can be operated using any input device. Normally input devices are the keyboard and the mouse, or devices that emulate them.
Some users navigate through links and other interactive elements of a page using the tab or some other key. But scripting can alter this behaviour, and if it is not done carefully, can prevent the user interacting with the content.
26 - What is a keyboard trap?
Normally a user navigates onto a link and then off again and on to the next with no difficulty. However, a script activated by a link or some other interactive element can prevent the keyboard moving onto the next item, leaving the user trapped. So if you use scripting, always check that you can navigate through the whole page using the keyboard.
27 - What does logical tab order mean?
As a user navigates through the page using the tab key, jumping from one link to another, it can be difficult to see the position of the current link (the focus) even if it is highlighted. This “tab order” usually follows the order of the links in the markup. However, if content is positioned differently using CSS, the focus may jump from top to bottom, or around the screen unpredictably, leaving the user confused. This can also be caused by scripts. If you use scripts or CSS positioning, always try navigating through the page with the keyboard to check this tab order, or use a tool to display it (as a series of numbers on the links).
If the tab order is confusing, HTML provides the tabindex attribute to define where each link should appear in the sequence. Note that if you use tabindex on one link, you must use it on all of them, so only use it if really necessary. Incorrect use of tabindex may be another cause of confusing tab order.
28 - What is consistent navigation?
As the user navigates through the pages of a site, if the navigation links and their position, change from page to page, it can be confusing. For example, if the link to the home page or the main page of the current section is in a different place on each page, the user won’t know where to find it. Consistent navigation means that the navigation links are consistently placed in the same position.
29 - What are embedded objects? How do I make them accessible?
A web page includes information about separate content, usually in a different format. The browser retrieves the content separately but presents it to the user as part of the page, embedded. The embedded content normally uses a different technology, such as AVI for video, Flash or Java. Typical uses are video, animated images and interactive content. WCAG 2.0 does not consider this content to be external but rather as part of the web page.
To make this content accessible it is necessary to provide an alternative for users that do not have the necessary plug-in. Being non-text content it is necessary to provide a text alternative.
Embedded content has its own interface and so it is important to ensure that it is device independent (accessible using the keyboard). The image have sufficient contrast.
It is the combination of three principles: separating functionality (the behaviour layer) from page structure/content, and presentation; programming the DOM to avoid browser incompatibilities; above all adding progressive enhancement to basic functionality provided by the underlying technology.
This means loading the information content (HTML with structure) first, and once the page is loaded, using scripts to modify the DOM to add functionality to the page. This new functionality must not be essential for understanding the content, rather it is an additional enhancement to provide better user experience.
31 - What is AJAX? How do I make it accessible?
While this technology makes web pages much more dynamic and interactive, it can cause major problems for users with assistive technology and should be used with care.
If the page is updated dynamically, the screen reader user, who can not see the whole screen, or the user who can only see a small part of it, may not be aware of the change or may not be able to find what has been updated. Alternatively the screen reader user may be unable to read the page if it keeps rereading the same content every time some small item of content is updated.
With Ajax, HTML elements can be made to behave in new ways. For example, a text field may behave as a slider control. This may be evident visually, but is not apparent to the screen reader user.
To help overcome these problems (and many others), W3C has produced a language for describing interface elements and their behaviour, WAI-ARIA. When choosing an Ajax toolkit, ensure that it supports WAI-ARIA. More importantly, reflect on whether the use of Ajax is really necessary for a given effect.
32 - What does it mean that a technology has support for accessibility?
It means that anyone can access and use the technology, including assistive technology and Basic accessibility tools.
33 - What current technologies have accessibility support?
Although there are no additional requirements, any web content in these technologies must be developed in an accessible way.
34 - How do I make accessible PDF documents?
To be accessible, PDF content must have a semantic structure. This takes the form of a tag tree that in an editor looks reminiscent of the DOM tree of an HTML document. It has section headings, lists, paragraphs, tables, etc. The easiest way to create a tagged PDF document is using Microsoft Word, and exporting it to PDF using the Acrobat PDF Maker add-in.
As in any document, images and multimedia must have text alternatives. You need to check metadata (including language), reading order (in HTML it is intrinsic but in other technologies it is not).
35 - How should I warn the user when there are links to PDF documents?
Indicate in the link text the size and the format of the document. This can also be done in the title attribute, but in this case ensure that the title also contains the whole link text, not only the file information. Another way is to include an icon with alternative text can be included in the link.
36 - What can I do if my website has many inaccessible PDF documents?
Go back to the Microsoft Word source documents if they are available; correct the accessibility and convert again.
If there are too many documents to correct them all, provide a channel for people to request accessible versions of the documents on demand.
On the accessibility information page, state what the situation is and what your strategy will be to accommodate users’ needs.
37 - How can I create accessible Flash content?
Flash is not well supported by currently-used assistive technology, although it does support provision of accessibility information using the Adobe Flash CS4 Professional accessibility panel or ActionScript. It can define tab order, object descriptions, keyboard shortcuts.
38 - What is the correct method to embed an object into a webpage?
It is necessary to include in the code a reference to allow assistive technologies to identify the object. At a minimum, you need to provide an alternative text for the content as a whole. This description is nested as the content of the object tag.