Website Accessibility Guidelines

Last revised: 2007

These guidelines summarize strategies to make York University’s webpages more accessible to people with disabilities. The guidelines are not intended to be a comprehensive resource on webpage accessibility. The purpose is to highlight methods that address difficulties that visitors are likely to encounter on York Web sites.

If you have any questions about making your York University webpage accessible, please contact ithelp@yorku.ca or extension 55800.

More information on accessibility of webpages can be found at W3.org

These guidelines address the following areas:

Conformance
Images
Image Maps
Document Structure
Colour Contrast
Tables
Forms
Skip Navigation Link
Frames
PDF Files
Multimedia and Other File Formats
Dynamic Content and Scripting
Link Descriptions
Writing Style
Language Changes
Validation

Conformance

It is expected that all University webpages achieve Conformance Level "A" (i.e. satisfy all Priority 1 checkpoints) of the WCAG 1.0 (Web Content Accessibility Guidelines). In addition, pages should also minimize Priority 2 checkpoint errors. The Web Content Accessibility Guidelines are published by the W3C, the World Wide Web Consortium. The guidelines below provide guidance on how to achieve this level of conformance.

Images

Avoid using any unnecessary images.

With assistive technology, visitors to your page who cannot see will be able to access actual text but not images of text, graphical buttons or other images; unless you make them accessible with text equivalents. A text equivalent should describe the function of the image or provide information that is not available elsewhere on your page.

For a simple image (e.g. a logo linking to a home page), a common way to describe the image is by using a few words in an "alt" tag (up to 1024 characters):

However whenever possible, use actual text instead of images of text with an alt tag. Text magnifies better than images, making it more accessible for people with low vision.

For a detailed image (e.g. a chart), describe the image on the page itself where everyone can read it or use the "longdesc" attribute.

A "longdesc" is a link to a separate HTML file where a more detailed description can be provided. The HTML file can be fairly simple, consisting of, for example, the following code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Long description for chart.gif</title>
</head>
<body>
<p>description here</p>
<p>Back to <a href="applicants.html">information on high school applicants</a></p>

If an image provides no additional information or serves no real purpose on your page other than decoration, allow assistive technology to ignore it by using an empty alt tag (alt="")

More information on images

Image Maps

Use client-side image maps (i.e. with "usemap") instead of server-side image maps whenever possible. Alt tags should be used for all image maps.

In addition to providing alt tags for each active region of an image map, provide an alternative list of text links as well.

Example: The York Maps page provides links to York University locations as an image map and as text links.

More information on image maps

Document Structure

Use structural markup to structure your document so users who are using non-visual browsers can better understand the logic of the document.

Examples of common structural markup tags include:

<p> paragraph tags to indicate paragraphs
<h1> to <h6> heading tags to indicate hierarchy of information
<ul> or <ol>, and <li> to indicate list items
<blockquote> to indicate quotations
<cite> to indicate citations

Avoid using the "class" attribute with a structural tag for the purpose of emulating the visual display of another structural tag, for example:

Colour Contrast

Make sure that foreground colours are sufficiently differentiated from background and/or adjacent colours, especially for text, links, navigation items, logos, icons and interface elements, and other graphical elements which are needed for proper use of the site. Even where sufficient contrast may seem evident, it may still be a problem for those who are colour blind (e.g. red text on green background).

To check foreground and background colour combinations to see if there is sufficient contrast in colour and brightness, use a colour contrast analyzer tool based on W3C's suggested colour contrast algorithm, such as:

Giacomo Mazzocato's Accessibility Color Wheel

You can test the colour contrast of a webpage using an online tool such as:

AccessColor

In addition to colour contrast, elements should be understandable and comparable without relying on colour alone.

Example: Avoid statements such as “click on the green button” or links in body text that are only coloured (i.e. not underlined), making them difficult to distinguish from the body text.

More information on colour

Tables

For layout tables, use only the following basic table tags: <table>, <tr>, <td>.

Minimize the use of nested tables as they are difficult to navigate by those who can't see.

For data tables that have cells which contain header information, the header cells should be specified using <th> instead of <td> table cell tags.

Proper structural markup should also be used for table headers which comprise of two or more rows or columns (e.g. use of THEAD, TFOOT, TBODY, COL, COLGROUP elements and "axis" and "scope" attributes).

More information on tables

Forms

Label each form control with the LABEL element, using the same value for the label and form control attributes.

Also, use the FIELDSET and LEGEND elements if there are form controls in the form that can be logically grouped.

More information on forms

Skip Navigation Link

A skip navigation link enables users who are using non-visual or non-CSS browsers to jump directly to the content on a webpage without having to go through navigation menu items that are common on most pages of a website. The skip navigation link is implemented using an anchor link.

By default, a skip navigation link is already included in the York internal webpage template which allows the skipping of the global navigation items at top and the Web site navigation items in the left sidebar. However, since local navigation may need to be added in the content area under certain circumstances, a skip navigation link can be added around that navigation set as well.

Frames

As a general guideline, avoid using frames.

For users using a screen reader it can add levels of complexity.

If, however, it is absolutely necessary to use frames, use the name attribute to indicate the basic function of the frame and the title attribute for a fuller explanation.

Example:

Include a <noframes> element within the <frameset> tags if you are using frames - content that is contained within the <noframes> tag will be seen by browsers that cannot render frames (e.g. Lynx).

More information on frames

PDF Files

Don't use a PDF file unless an HTML file cannot do what you want (e.g. a document specially formatted for printing, graphical maps).

PDF files are problematic because, without a special effort from the author, they do not contain the underlying structural tags such as headings or alternative text that are required for accessibility.

If you must use a PDF file, try to ensure that it's accessible.

Information on how to make PDF files accessible

If you are unable to ensure that your PDF file is accessible, you must provide equivalent content on an HTML page that is kept up to date. Regardless of whether your PDF file is accessible or not, it is good practice to try to include an HTML version.

Multimedia and Other File Formats

Make sure pages still work with older browsers and for people who choose to turn off specific browser features.

A transcript or some other alternative should be provided for audio and video, if the content presented is not available elsewhere. If video, also consider captioning and audio description.

Example: A professor may post an audio recording of her lecture as an aid to her students. This would not necessarily help those with hearing disabilities and something visual, like a transcript or lecture notes, should be made available for them.

Whenever possible, use the accessibility features available for the specific file format.

Example: Refer to the Macromedia Accessibility Resource Center for information on accessibility with Flash.

More information about multimedia

Dynamic Content and Scripting

If scripts, applets, or plug-ins are used to implement content and/or navigation features, ensure that equivalent content is provided which does not require scripts, applets or plug-ins, and that the content is kept up to date.

If you are using dynamically changing elements on a webpage, provide a way for users to pause or stop them. Avoid flickering or blinking effects such as quick motion or sudden changes in color. These effects may induce seizures.

If your dynamic content or script uses a mouse for interaction, ensure that the keyboard can be used as well.

More information about dynamic content and scripting

Link Descriptions

Use clear and accurate link descriptions, by using phrases that are to the point and make sense on their own or as part of a list of links (i.e. link descriptions should say more than just "click here").

Do not use the same link description more than once on a page when the links point to different URLs.

More information about link descriptions

Writing Style

Use of a clear writing style is helpful for everyone especially those with cognitive disabilities. Elements of a clear writing style include:

Headings are clear, accurate and informative so users can scan the content without having to read through the entire paragraph or page.
The paragraph topic is at the beginning.
There is one idea per paragraph.
Commonly used words are used (e.g. no slang or jargon).
Sentences are simple.
Abbreviations or acronyms that are not well-known to your reader are spelled out in full the first time they are used.

More information on writing style

Language Changes

To enable assistive technology to use proper pronunciation when reading the screen, indicate changes in language in the content of a webpage. Add lang="languagecode" to a structural tag such as <p>, <blockquote>, <span> or <div>.

Example: A French paragraph on an otherwise English language page can be indicated with <p lang="fr">.

Validation

It is good practice to test any created webpages against a web accessibility evaluation tool such as:

See the W3C Complete List of Web Accessibility Evaluation Tools for a more comprehensive list of tools.

More comprehensive information and methods to evaluate the accessibility of webpages