Objective: Comply with the [Disability Discrimination Act (DDA)](http://www .shaw-trust.org.uk/about-us/facts-about-disability/disability-discrimination- act-your-obligations-as-an-employer/) and promote a culture of accessibility and inclusion.
See also the Web Content Accessibility Guidelines 2.0 Checklist which serves as an appendix to Web Content Accessibility Guidelines 2.0 [WCAG20]
The W3C offers three different levels of compliance.
-
Priority 1 guidelines, (which must be satisfied according to the W3C) will almost certainly have to be adhered to.
-
Priority 2 guidelines (which should be satisfied and are the EU recommended level of compliance), or some part of, will probably need to be adhered to too (http://www.webcredible.co.uk/user-friendly-resources/web-accessibility/uk-website-legal-requirements.shtml).
-
Priority 3 guidelines, A Web content developer may address this checkpoint. Otherwise, one or more groups will find it somewhat difficult to access information in the document. Satisfying this checkpoint will improve access to Web documents.
A Web content developer must satisfy this checkpoint. Otherwise, one or more groups will find it impossible to access information in the document. Satisfying this checkpoint is a basic requirement for some groups to be able to use Web documents.
- Provide a meaningful (
<img src="cows.jpg" alt="Cows grazing in a field on a sunny day.">) text equivalent for every non-text element (e.g., via "alt", "longdesc", or in element content).
Includes:images, graphical representations of text (including symbols), image map regions, animations (e.g., animated GIFs), applets and programmatic objects, ascii art, frames, scripts, images used as list bullets, spacers, graphical buttons, sounds (played with or without user interaction), stand- alone audio files, audio tracks of video, and video.
Captions must be provided for prerecorded multimedia
Audio descriptions of video, or a full multimedia text alternative including any interaction, are provided for prerecorded multimedia.
- Ensure that all information conveyed with color is also available without color, for example from context or markup.
- Clearly identify changes in the natural language of a document's text and any text equivalents (e.g., captions)
- Organize documents so they may be read without style sheets. For example, when an HTML document is rendered without associated style sheets, it must still be possible to read the document.
[WC3 6.1](http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-order-style- sheets)
- Ensure that equivalents for dynamic content are updated when the dynamic content changes.
- Until user agents allow users to control flickering, avoid causing the screen to flicker
- Use the clearest and simplest language appropriate for a site's content.
[WC3 14.1](http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-simple-and- straightforward)
- IMAGES: Provide redundant text links for each active region of a server-side image map.
[WC3 1.2](http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-redundant-server- links)
- Provide client-side image maps instead of server-side image maps except where the regions cannot be defined with an available geometric shape
- TABLES: For data tables, identify row and column headers.
- For data tables that have two or more logical levels of row or column headers, use markup to associate data cells and header cells.
- FRAMES: Title each frame to facilitate frame identification and navigation.
- APPLETS/SCRIPTS: Ensure that pages are usable when scripts, applets, or other programmatic objects are turned off or not supported. If this is not possible, provide equivalent information on an alternative accessible page.
- MULTIMEDIA: Until user agents can automatically read aloud the text equivalent of a visual track, provide an auditory description of the important information of the visual track of a multimedia presentation.
[WC3 1.3](http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-auditory- descriptions)
- For any time-based multimedia presentation (e.g., a movie or animation), synchronize equivalent alternatives (e.g., captions or auditory descriptions of the visual track) with the presentation.
[WC3 1.4](http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-synchronize- equivalents)
- If, after best efforts, you cannot create an accessible page, provide a link to an alternative page that uses W3C technologies, is accessible, has equivalent information (or functionality), and is updated as often as the inaccessible (original) page.
A Web content developer should satisfy this checkpoint. Otherwise, one or more groups will find it difficult to access information in the document. Satisfying this checkpoint will remove significant barriers to accessing Web documents
- Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen
- When an appropriate markup language exists, use markup rather than images to convey information. http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-use-
- Create documents that validate to published formal grammars. For example, include a document type declaration at the beginning of a document that refers to a published DTD (e.g., the strict HTML 4.0 DTD).
- Use style sheets to control layout and presentation.
- Use relative rather than absolute units in markup language attribute values and style sheet property values.
- Use header elements to convey document structure and use them according to specification.
- Mark up lists and list items properly.
- Mark up quotations. Do not use quotation markup for formatting effects such as indentation.
- Ensure that dynamic content is accessible or provide an alternative presentation or page.
- Until user agents allow users to control blinking, avoid causing content to blink (i.e., change presentation at a regular rate, such as turning on and off).
- Until user agents provide the ability to stop the refresh, do not create periodically auto-refreshing pages.
[WC3 7.4](http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-no-periodic- refresh)
- Until user agents provide the ability to stop auto-redirect, do not use markup to redirect pages automatically. Instead, configure the server to perform redirects.
- Until user agents allow users to turn off spawned windows, do not cause pop-ups or other windows to appear and do not change the current window without informing the user.
- Use W3C technologies when they are available and appropriate for a task and use the latest versions when supported
[WC3 11.1](http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-latest-w3c- specs)
- Avoid deprecated features of W3C technologies
[WC3 11.2](http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-avoid- deprecated)
- Divide large blocks of information into more manageable groups where natural and appropriate
[WC3 12.3](http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-group- information)
- Clearly identify the target of each link
[WC3 13.1](http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-meaningful- links)
- Provide metadata to add semantic information to pages and sites.
- Provide information about the general layout of a site (e.g., a site map or table of contents).
[WC3 13.3](http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-site- description)
- Use navigation mechanisms in a consistent manner.
[WC3 13.4](http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-clear-nav- mechanism)
- TABLES: Do not use tables for layout unless the table makes sense when linearized. Otherwise, if the table does not make sense, provide an alternative equivalent (which may be a linearized version).
[WC3 5.3](http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-avoid-table-for- layout)
- If a table is used for layout, do not use any structural markup for the purpose of visual formatting
- FRAMES: Describe the purpose of frames and how frames relate to each other if it is not obvious by frame titles alone.
- FORMS: Until user agents support explicit associations between labels and form controls, for all form controls with implicitly associated labels, ensure that the label is properly positioned.
[WC3 10.2](http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-unassociated- labels)
- Associate labels explicitly with their controls.
[WC3 12.4](http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-associate- labels)
- APPLETS/SCRIPTS: For scripts and applets, ensure that event handlers are input device-independent
[WC3 6.4](http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-keyboard- operable-scripts)
- Until user agents allow users to freeze moving content, avoid movement in pages.
- Make programmatic elements such as scripts and applets directly accessible or compatible with assistive technologies (Priority 1 if functionality is important and not presented elsewhere, otherwise Priority 2).
[WC3 8.1](http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-directly- accessible)
- Ensure that any element that has its own interface can be operated in a device-independent manner
[WC3 9.2](http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-keyboard- operable)
- For scripts, specify logical event handlers rather than device-dependent event handlers.
[WC3 9.3](http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-device- independent-events)
Where possible use semantic HTML elements such as
, , and to help computers identify key areas of the content on the page.If use of the new semantic elements is not possible, greater meaning can be given to elements through WAI-ARIA (Accessible Rich Web Applications). It essentially defines a number of roles that a page element can have such as
The tabindex attribute gives you a way of specifying the order in which inputs should be focused when the tab key is being used to navigate through a web form.
<label for="name">Name:
<input type="text" name="name" id="name" tabindex="1">
<label for="email">Email:
<input type="email" name="email" id="email" tabindex="3">
<label for="phone">Phone:
<input type="tel" name="phone" id="phone" tabindex="2">In the example above the focus order will move from the name input to the phone input and then finally to the email input.
There are two accessibility considerations to make when creating links. The first is to think about the anchor text that will become the clickable link. This text should make sense if it was taken out of the context of the page. 'Click here' is a really bad example of anchor text.
The second consideration is the use of a title attribute. This can be used to add a description of the page that you are linking to. This description will then be displayed in a tool-tip when the user hovers their mouse over the link and may also be read aloud by a screen reader.
<a href="http://website.com" title="Learn how to build websites at website.com">Learn how to build websites</a>The <caption> element can be used to add a description of the data in the
table. This should be placed directly after the opening tag of the
<table>
<caption>
Table 1.1 shows the exam scores of 120 pupils in the Physics exam.
</caption>
...
</table>
Captions will be displayed on the page so you think about how to style them using CSS.