Essential Web Accessibility items

Owned by Miriam Rusu
Last updated: Sept 27, 2022 by Joan Gabrielle Basa
2 min read

Alternative (ALT) Text 

  1. When using an icon, picture, chart, table, or illustration, make sure to add ALT text.

  2. ALT text describes the information conveyed in the image.

  3. Make sure to leave a Null alt text for purely decorative images.

  4. Set images/objects to be ‘in line with text’ if possible.

Meaningful link text

  1. Instead of copying and pasting the URL directly into the content, make the link meaningful to the reader. Example

    1. CORRECT: Check out University of Waterloo’s list of courses for Fall 2015

    2. INCORRECT: Check out University of Waterloo's list of courses for Fall 2015: Course Selection Offerings List (uwaterloo.ca)

Content Structure

  1. Using visual techniques, such as bolding or a different font to improve the appearance of a document, is not accessible.

  2. Instead use Structural formatting, such as:

    1. Headings

      1. Make sure that each heading is used for the appropriate title. i.e. University of Waterloo should be Heading 1.

    2. Paragraphs

    3. Lists

      1. Use the built in list features so that it prompts the user that a list is being started.

      2. If you manually type in your own bullets, this could confuse the reader.

    4. Page breaks

      1. Use page breaks instead of putting several spaces to separate content.

      2. If you use spaces, a person who requires accessibility features might believe that there is no more information below the spaces.

    5. Tables/columns

      1. Use the table feature in Word.

      2. If there are any blank columns or rows, enter in N/A.

      3. Refrain from using tables within tables.

Language

  1. Make sure to identify what language the content is in, for the assistive technology.

  2. If the language default is not the language used in the content, problems could occur.

Navigation

  1. Book marks help users navigate the document.

  2. Page numbers assist the user to know how far they are into the documentation.

    1. Using X out of X, as a page number system helps the user know how many pages to expect.

Use an Accessibility Checker such as the WAVE tool bar (in FireFox)

  1. Make the appropriate changes to improve accessibility.

Colour

  1. If you are using colour as a statement for your content, make sure that the colours are different in regards to density.

    1. E.g. Using the gray scale to show differences, from light to dark (i.e. using white, medium gray, and black) instead of using red, orange, or yellow to show difference.