Accessibility Guidelines

This page outlines some accessibility guidelines that content editors need to be aware of and address in order to meet AODA website requirements.

For more detail on AODA website requirements, accessibility guidelines, and specific techniques and tools to address them, have your department or unit request an information or hands-on training session, or refer to the Ontario Government's How to make websites accessible and the W3C's How to Meet WCAG 2.0.

Text Content

Mark up the structure of your web content

Some people may not be able to see the visual formatting commonly used to structure web content (such as large, bold font for headings), so content structure should be marked up with appropriate HTML elements such as heading, paragraph, list, and table tags.

For headings, indicate the hierarchy for the sections of content on a page using h1-h6 tags (h1 is usually used for the page title).

Use tables for tabular information such as schedules. Table headers need to be marked as table headers in the code. For page layouts, use CSS instead of tables.

Provide descriptive page titles, headings and link text

Page titles identify the page and should be short, unique, and relevant to the content. The should also make sense out of context.

Headings on a page should identify the sections of content on a page and provide an overview of the content and how it's organized.

For link text, describe the link so users understand the purpose of the link. If the link goes to a web page or web application, it is sufficient to use the same page or application title that is on the page or application being linked to as the link text. If the link goes to a document, also include the document format at the end of the link text (e.g. Document Name (pdf))

Mark up changes in language in your web content

If a page has passages or phrases in the content that change in language (e.g. a French quote on an English page), that change needs to be marked up in the code for that content. Exceptions include proper names, technical terms, and single words considered part of the language of the surrounding text (e.g. the word "rendezvous" on a page in English).

Images and other non-text content

For non-text content such as images, provide a text alternative

People using assistive technologies may not be able to use content that is not in text form, so when they come across the non-text content, they should be able to find alternative text that replaces the non-text content and that they can use.

For images, specify "alt text", which provides the same information as the original image. If there are words in the image, the alt text should include those words. If an image is purely decorative, used for visual formatting, or invisible, it should be marked with an empty alt text. If the image is an visual experience that can't be fully captured using words (e.g. a visual artwork), at least identify it with a descriptive label and provide additional description if possible.

In the case where alt text for an image would be too long (e.g. the image is a chart that would require a longer description to provide all the information on the chart), use the alt text to briefly describe the image and then provide a long description that presents the same information as the image. For more information on writing alt text, refer to WebAIM's article on Alternative Text.

Style text using CSS instead of using images of text

Use CSS styles to visually format text as opposed to using images of text (exceptions include logotypes, or text that is part of an image that has other significant visual content, such as a graph, screenshot, or diagram).

Web page editing tools provide ways to change text formatting such as font size, foreground and background colour, font, line spacing, and alignment.

Audio and Video

For audio and video, provide a text document that presents the same information

For audio, provide a text document that presents the same information, including all important dialogue (and who is speaking) and descriptions of background sounds.

For video, provide a text document that presents the same information, including all visual important information and descriptions of background settings, expressions and actions (and who is associated with each action). If the video has audio, also include all the important dialogue and non-speech sounds.

For video that has audio, also provide text captions

For video that has audio, text captions that describe the dialogue and important sounds are also required.

Documents

Make documents on your site accessible

Documents that you post on your site need to be made accessible. For more information on how to make documents accessible, attend the Designing Accessible Documents course offered by Centre for Staff Development & Technical Learning (listed on the York Employee Learning Calendar), or refer to the Inclusive Design Research Centre's Accessible Digital Office Document Project website.

Colour

If colour is used to convey something, provide another way for those who can't see colour to see the information

For example, a conference schedule may have several tracks that are indicated using coloured backgrounds. In addition to using colour, the track for each session is also indicated in text after each session title.

Another example is a bar chart where in addition to using colour, each bar also uses a different pattern.

Make sure there is enough colour contrast between text and background colours

Some users may not be able to read text if there is not enough contrast between text and background colours. If there are areas on a page that have coloured text and/or background (including images of text), use a colour contrast tool to check that the colours meet the minimum contrast ratio requirement.