ARCHIVED - Designing Web content for persons with disabilities

Warning This information has been archived because it is outdated and no longer relevant.

Archived Content

Information identified as archived on the Web is for reference, research or recordkeeping purposes. It has not been altered or updated after the date of archiving. Web pages that are archived on the Web are not subject to the Government of Canada Web Standards. As per the Communications Policy of the Government of Canada, you can request alternate formats by contacting us.

1.0 Introduction

The Government of Canada delivers hundreds of programs and services through more than 10,000 locations. With advanced technologies, the Government has been able to broaden its reach and meet the needs of Canadians by providing information and services on demand. The Treasury Board Common Look and Feel (CLF) Standards were created to make it easier for Canadians to identify and access federal programs and services.

2.0 What is an accessible design?

An accessible design starts with an accessibility-aware designer. Many Web page designers see other clients as being much like themselves. If they are not in regular contact with persons who have visual impairments, are deaf, or have mobility impairments, it is easy to forget that not everyone has the same physical capabilities. A good designer remembers that, among other things, Web accessibility is designed to promote access to information by individuals who are in different kinds of environments. Here are some things to keep in mind about potential clients, from the World Wide Web Consortium (W3C) Web Content Accessibility Guidelines:

Clients may not be able to understand, see, hear, or move easily or at all.
Clients may be in a situation where their eyes, ears, or hands are busy or distracted.
Clients may have difficulty reading or comprehending text.
Clients may not have or be able to use a keyboard or a mouse.
Clients may have an early version of a browser, a different browser entirely, a voice synthesizer, or a different operating system.
Clients may have a slow connection, a small screen, a text only screen, and so on.
Clients may not speak or understand fluently the language in which the document is written.

3.0 Guiding principles

The Web Content Accessibility Guidelines provide checkpoints for accessible Web design. Several of these checkpoints are explained in the sections that follow

3.1 Text equivalents

Text equivalents are important for ensuring the accessibility of images, links and other Web page elements. To further enhance accessibility, the text equivalents used for Web page elements should be as consistent as possible.

All images must include equivalent text provided by the alt attribute. Not only does this make a Web page more accessible, it is also required by the XHTML 1.0 Strict specification.

For complex visual information such as photographs, graphs, charts, and video clips, the alt attribute will not be sufficient. A text-based alternative presentation must also be provided.

For photographs, graphs, charts and other visual formats, the text-based alternative presentation should be provided on a separate Web page. The text-based alternative presentation must be a reformatting of the visual content and not a description of it. The Web page containing the text-based alternative presentation should be referenced through both the longdesc attribute and a separate hyperlink.

For video clips, audio clips and other audio-visual formats, captions, descriptive audio (visual formats only) and transcripts should be provided.

For additional details and to obtain a list of the most commonly used text equivalents on GC Web sites, consult the Text Equivalent Repository.

3.2 Colour

Some clients have difficulty differentiating between colours. Do not rely on colour only and use alternative means of conveying your message.

Some clients have difficulty perceiving text when there is not enough contrast. Make sure foreground and background colour combinations have enough contrast.

3.3 Mark-up and Cascading Style Sheets (CSS)

When an appropriate mark-up language exists, use it rather than images to convey information. Special mark-up such as <em> or <strong> can be used in place of an image to convey an idea.

Create documents that validate to published formal grammars such as the strongly recommended XHTML 1.0 Strict specification.

Use CSS to control page layout. Do not use images, tables or non-breaking spaces for this purpose.

3.4 Language of the page

Identify the language of the page in the html element (e.g., <html lang="en">). This helps screen readers correctly pronounce the page content.

3.5 Language changes

Identify changes in the language of a document where they occur. Use the lang attribute, e.g., <span lang="en">. This helps screen readers correctly pronounce both English and French text.

3.6 Tables

Tables should only be used to display data that needs to be divided into rows and columns. If it makes sense to present the data using a spreadsheet, then it will likely be appropriate to present the same data using a table. For additional details, consult Making tables accessible.

3.7 Pages featuring new technologies

Make sure pages featuring new technologies transform gracefully. For content containing scripts or other programmatic objects, be sure to provide alternative formatting using elements such as <noscript>.

Dynamic content should have an alternative presentation that does not rely on the interactive capabilities of a client. The usage of client-side scripting such as JavaScript and client-side programmatic objects such as Flash should be minimized because of potential accessibility, hardware, bandwidth and browser support issues.

Some clients may be unable to interact with pages containing functionality that is provided by client-side scripting and/or client-side programmatic objects. Those clients may be unable to interact with the page because the functionality is unavailable to them for reasons such as accessibility issues, inadequate software support and elevated browser security requirements. Other clients with older platforms and/or limited bandwidth (for example, dial-up access) may experience long delays in loading pages or poor audio-visual performance when client-side programmatic objects are used.

Clients should be provided with the option to select an alternative presentation that does not include client-side scripting or client-side programmatic objects. This option should be provided to clients before they reach any pages with client-side scripting or client-side programmatic objects to ensure accessibility and usability issues do not prevent them from selecting the alternative presentation option.

For additional details regarding JavaScript, consult Defining the JavaScript issue for accessibility.

3.8 Avoid scrolling or changing content

It is recommended that scrolling or changing content be avoided for accessibility reasons and browser issues. The page should not change without the page being manually refreshed. If you wish to have scrolling or changing information, this feature should not be enabled by default and a mechanism should be provided to allow the client to start and stop the flow of data.

3.9 Device independent content

Some clients do not have a mouse or a keyboard while other clients may have difficulty using them as input devices. Keyboard shortcuts, tabbing order, and device-independent event handlers all contribute to the accessibility of forms and elements. Clients with a variety of input devices may interact with your Web pages so the content should be designed to be functional regardless of the input device used.

3.10 World Wide Web Consortium (W3C) technologies and guidelines

Use the W3C XHTML 1.0 Strict specification and the Web Content Accessibility Guidelines 1.0 when designing your Web documents. This will help your documents degrade gracefully to software that may not fully implement the most recent technologies.

3.11 Form controls

Make sure all form controls are clearly labelled and accessible by keyboard, mouse, Braille devices, head wands, microphones, and other input devices. For additional details, consult Making forms accessible.

3.12 Navigation mechanisms

You should provide clear navigation mechanisms. The most frequently used feature of any Web site is the navigation system. No matter where a client may be on a site, there should be a way to return to the home page or major subsections with only one or two steps.

3.13 Clear and simple documents

Consistent layout and navigational aids help people with cognitive disabilities. Clear and simple language can help all clients, especially those not fluent in the language on your site.