Quick Reference

Accessibility for Designers Infographic

An image showing an AODA checklist to get started.

Print this guide in .pdf

Provide appropriate alternative text

  • Every non-text element needs a text alternative (alt text) that provides an equivalent to the image content.
  • Alt text should present the content and function, not necessarily a description, of an image.
  • If an image has no relevant content or function, is decorative, or the alternative text is provided in nearby text, then the image should have an empty alternative text value ( alt="").
  • If an image is a link (or hotspot), the alt text must describe the link’s function.
  • Avoid words like "picture of," "image of," or "link to."
  • Use the fewest number of words necessary.

Implementation Techniques

Content is well structured and clearly written

  • Use the simplest language appropriate for your content.
  • Organize your content using true headings (e.g., <h1>) and lists.
  • Use empty (white) space to improve readability.
  • Use illustrations, icons, etc. to supplement text.
  • Check spelling, grammar, and readability.

Provide headers for data tables

  • Identify all data table headers using the <th> element.
  • Provide an appropriate scope attribute: <th scope="col"> for column headers or <th scope="row"> for row headers.
  • If appropriate, add a table <caption> for the data table.

Implementation Techniques

Do not rely on colour alone to convey meaning

  • The use of colour can enhance comprehension, but do not use colour alone to convey information. Be especially cautious of red/green colour combinations.
  • Make sure that colour contrast is strong, especially between text and background.

Ensure users can complete and submit all forms

  • Put form labels adjacent to or near their controls, so the labels are associated visually.
  • Use the <label> element to associate labels and controls.
  • Group similar elements (such as checkboxes or radio buttons) together using <fieldset>.
  • Clearly identify required form elements. Don't make a field required if it is not necessary. Ensure all directions and cues are readily accessible.
  • If there are errors in a form that has been submitted, alert the user in an accessible way (especially to a screen reader user) and make it easy to fix the incorrect information and resubmit the form.

Implementation Techniques

Caption and/or provide transcripts for media

  • Videos and live audio must have captions and a transcript. A transcript is sufficient for archived audio.
  • Captions should be synchronized, equivalent, and accessible.

Implementation Techniques

Ensure accessibility of non-HTML content

  • HTML content will almost always be more accessible than content in any other format.
  • PDF, Microsoft Word and PowerPoint files, OpenOffice.org, and Adobe Flash provide basic accessibility features.
  • Provide accessible alternatives when non-HTML content cannot be made fully accessible.
  • Test the accessibility of non-HTML content in assistive technologies.

Miscellaneous

  • Ensure that the page is readable and usable when fonts are enlarged 150-200%.
  • Provide a descriptive page <title>.
  • When using scripting, ensure events are available with both mouse and keyboard. Make all scripted content and page updates/changes available to screen readers.
  • Limit pop-up windows and notify users when pop-ups are used.
  • Provide a descriptive title for all frames (e.g., <frame title="navigation">).
  • Follow HTML and CSS coding standards.

Source: WebAIM