2. Ensure online content can be accessed by assistive technology

In accessible web design, there is a separation between the way content is structured (HTML) and the way it is graphically displayed (CSS). The process can be compared to writing a book. The title, chapter headings, paragraphs and images form the content layer. The way the content appears, such as the layout, font, line spacing and colour, form the design layer. The content could be displayed in many different ways, but this would not change the overall structure or content of the book.

A screen reader, commonly used by people with vision impairments, is an assistive technology that reads out the content layer to the user. Screen readers are used through the keyboard controls. As screen reader users may only have access to the content layer (HTML) of webpages, and not to the design layer, it is important that you structure your content properly using HTML structural elements. This also affects users on low-bandwidth connections whose browsers cannot display CSS.

Additionally, it is important that all images have alternative text. When a screen reader encounters an image, it will read out the alternative text to the user. Without alternative text, the user will not know what is being displayed.

This guideline applies to any online or digital content created for your course, including your Moodle site, documents (e.g. Word, Powerpoint and PDF files) and any third-party tools or content.

To meet this guideline:

  • Ensure that all functionality of the content is operable through the keyboard. It is especially important to test this when using third-party (external provider) tools.
  • Use heading elements (<h1>, <h2>, <h3>) to structure content.
  • Use list elements (<ul> , <ol>, <li>) to organise serial data (e.g. a list of names, recipe or address). In most authoring tools, this can be done by clicking on the "bullets" or "numbers" icons in the toolbar.
  • Use table elements (<table>, <th>, <td>, <tr>) to organise tabular data. In most authoring tools, this can be done by clicking on the table icon in the toolbar. You should always designate the header row (<th>).
  • Provide alternative ("alt") text for images. Alternative text should be a short visual description of the image for users who cannot see or load the image.
  • Use text, as opposed to images of text.
  • Ensure that the purpose of each hyperlink can be determined from the link text alone.
  • Specify the language of an entire document or section of a document (e.g., Italian, Chinese, French) so a screen reader can read it properly. In MS Word, this can be done with Review > Language > Set Proofing Language.
  • Give the document an informative title. For most document types, this is done in the document properties.
  • Ensure that PDFs are correctly tagged, and that the reading order is correct (see the PDF accessibility link below).
  • Avoid the use of HTML elements to achieve a visual design (e.g. a table should not be used to define a graphical layout).

Did you know?

Microsoft Word allows you to apply styles to different elements of a document (opens in new tab). This is similar to the CSS layer of a webpage. For example, you can define a default font, line spacing and colour for all level-two (h2) headings. This might be different to the style applied to top-level (h1) headings and body paragraphs.

You should always use the "Modify style" option to control how your content appears in MS Word. For example, to create additional spacing between paragraphs, modify the style of the body text (instead of adding an extra return).

Additional resources

WCAG 2.0 checkpoints

See next

3. Provide text alternatives for media   >