Skip to main content

Website Accessibility Guidelines

Last updated: May 23, 2013

Under the Accessibility for Ontarians with Disabilities Act, by January 1, 2014, new internet websites and web content on those sites must conform with Web Content Accessibility Guidelines (WCAG) 2.0 Level A. This document highlights and summarizes some techniques for the most common issues, but is not intended to be a comprehensive resource on conforming to WCAG 2.0. For more information, refer to the Ontario Accessibility Standard for Information and Communications and W3C Web Content Accessibility Guidelines (WCAG) 2.0.

Structure

  • Give a descriptive title to each web page using the title element
  • Provide a lang attribute on the html element to identify the default language
  • Use structural elements to mark up content
  • For headings, use appropriate h1-h6 heading elements
  • For content which is divided into sections, provide heading elements at the beginning of each section
  • For lists, use appropriate ol, ul, and dl list elements
  • Use CSS to position content based on structural markup
  • Match the content order in the source code to the visual presentation of the content in the Web page
  • When a web page is linearized (e.g. CSS layout styles are removed), the content is ordered in a meaningful sequence
  • Use HTML or XHTML elements, attributes and values according to their specifications, and use validation parsers to check for validation errors. Ensure opening and closing tags for all elements are used accordingly, all id attributes are unique on a web page, and elements don't contain duplicate attributes

Links and References

  • For links, whenever possible, describe the purpose of the link in the text of the link. If an img element is the only content of a link, provide a text alternative that describes the purpose of the link. In some situations, part of the link description can be provided preceding the link in the same sentence, paragraph, list item, parent list item, preceding heading, table cell, or associated table heading
  • For links with surrounding text, use underlines, or have a lighness difference of 3:1 or greater with the surrounding text as well as an additional text formatting change (e.g. underline) on mouseover and keyboard focus
  • For links that are grouped into a logical set, use the map element
  • Provide a link at the top of the page that goes directly to the main content area; the link should have a description that communicates that it links to the main content, be the first focusable control on the page, and be visible when it has keyboard focus
  • Provide a link at the beginning of a block of repeated content that goes to the end of the block
  • When referencing content on a web page by shape, size, or position, also provide additional information that allows the content to be located and identified

Text Formatting and Color

  • Use HTML to mark up emphasized or special text, and CSS to apply text formatting based on the structural markup
  • When text formatting is used to convey information, also convey the information explicitly in text
  • When text color is used to convey information, provide additional text formatting to make the text distinct from other text around it
  • When color is used to convey information, also convey the information in text and semantic markup

Tables

  • For tabular information, use table, tr, th and td elements
  • If a title or heading is used to identify a data table, use the caption element
  • If a data table has a complex structure or contains many columns or rows, include a summary attribute that describes the table's organization or explains how to use the table
  • For data tables where the header is not in the first row or column, use the scope attribute to associate header cells with data cells
  • For data tables where data cells are associated with more than one row and/or one column header, use id and header attributes to associate data cells with the appropriate headers

Frames

  • Avoid using frames
  • In some situations, where iframes are used for embedding third-party media or components (e.g. videos, social media widgets), provide a title attribute that identifies the frame

Images

  • For images, provide a text alternative that serves the same purpose and conveys the same information. If possible, completely convey the purpose and information with a short text alternative by using an alt attribute for the img element. If it is not possible, provide a brief description of the image with a short text alternative and convey the full information with a long text alternative.
  • If an image contains words that are important to understanding the content, include those words in the text alternative
  • For images intended to provide a specific sensory experience (e.g. a work of visual art), provide a short text alternative which is the accepted name or a descriptive name of the content
  • For images that are purely decorative or meant to be hidden, either use an empty alt attribute and no title attribute, or use a CSS property to include the image as a background image
  • For tests or exercises that must be presented or conducted in visual format and cannot be changed to text, provide a short text alternative to describe the purpose of the content
  • If using a long text alternative, provide a longdesc attribute for the img element to specify the URI that contains a long description of the image. Alternatively, place the long description on the web page near the image (visually and in the linear reading order), and include its location in the short text alternative
  • For images, if color is used to convey information, also convey the information using text or pattern
  • Whenever possible, use text instead of images of text

Media

  • For media, provide a short text alternative that describes the media and/or gives its title. If the media is intended to provide a specific sensory experience (e.g. symphony performance), provide a short text alternative which is the accepted name or a descriptive name of the content
  • For audio, provide an alternative that includes the same information including the transcript of the dialogue and descriptions of background sounds; if there are multiple voices, identify who is speaking. For live audio, provide a short text alternative that describes the purpose of the content
  • Avoid playing sounds automatically on the loading of a web page
  • For video with no audio, provide an alternative that includes the same information including descriptions of scenery, actions, expressions; if there are multiple people or characters, identify which person or character is associated with each action described. Provide a link to the audio alternative immediately before or after the video. For live video with no audio, provide a short text alternative that describes the purpose of the content
  • For synchronized media (e.g. video with audio), provide text captions, including all dialogue and important sounds, that can be made visible using the closed caption feature of the media player. Also, provide a link to a text alternative immediately before or after the media that includes the dialogue, descriptions of sounds, setting and setting changes, and actions and expressions of 'actors', and provide a link back to the media.
  • For tests or exercises that must be presented or conducted in audio format and cannot be changed to text, provide a short text alternative to describe the purpose of the content

Dynamic Content

  • Avoid blinking and flashing items
  • For moving, scrolling, or auto-updating content, provide a control or mechanism to pause and resume the content from where it was stopped

Functionality

  • For HTML form controls and links, use appropriate attributes, elements, and text within elements to provide information about name, value and state
  • For input, textarea and select elements, use a label element that identifies the purpose of the control. Provide a for attribute for the label element that matches the id of the input, textarea or select element. The label should be immediately before the field unless the field is a checkbox or a radio button. When a label element can't be used, use a title attribute that identifies the purpose of the control. For other functionality, provide a text alternative that identifies the purpose of the functionality
  • For input fields that have an adjacent button that invokes the function of the field, use the button to label the purpose of the field
  • For form controls that are required, indicate the required status in the label or legend; if the required status is not provided in text, explain the meaning of the indicator before the form control
  • For form controls that only accept user input data in a given format, provide information about the expected format
  • For form control labels, when color is used to convey information, also convey the same information with text or character cues
  • When a required form field is incomplete, or a form field that requires a specific data format or certain values is invalid, use client-side validation and an alert dialog box, or server-side validation and a text description that identifies the omitted or invalid fields
  • For related input or select elements, use a fieldset element to group the elements, and a legend element that includes a description for the group
  • For selection lists that have groups of related options, use the optgroup element with a label attribute to group and label related option elements
  • Ensure that functional components can also be accessed using only the keyboard, and that a keyboard mechanism is provided to return focus to the parent window
  • For functional components, the default focus order should follow the order in which the elements appear in the content
  • When focus is placed on a functional component, do not remove it until the user moves it, and do not change context
  • When a page is loaded, do not automatically open a new window and give focus to it
  • When focus leaves the last field of a form, do not automatically submit the form
  • For functional components that cause a change of context, provide an explanation of what will happen when the control is changed prior to the control. Use a submit button (input type="submit", input type="image", or button type="submit") to cause a change of context. If changing the setting of functional components changes the context, provide instruction prior to encountering the change of context
  • For select elements, actions should be performed only when a corresponding button is selected, not when the value for the select element is selected. To have a select element update the options in another select element on the web page, use an onchange event.
  • For radio buttons, check boxes and select list items, when the status of the control has changed, do not launch a new window
  • When adding content to a web page, use Document Object Model (DOM) functions instead of document.write(), innerHTML, outerHTML, innerText or outerText methods and properties
  • For dialogs that aren't pop-up windows, insert them into the Document Object Model (DOM) immediately after the triggering link or button using an onclick event
  • For CAPTCHA, provide a text alternative that describes the purpose of the CAPTCHA. If a web page has CAPTCHA, provide another CAPTCHA for the same purpose but using a different modality
  • For redirects, whenever possible, use automatic server-side redirects. If using a meta redirect, set the time-out to zero
  • If a time limit is set by the content, provide an option to disable the time limit, else customize the length of the time limit, else request more time before the time limit occurs