Accessible digital content

General

There are 6 different types of digital content that can be part of learning materials:

  1. Text.
  2. Pictures and images. E.g. illustrations and photographs.
  3. Complex visual elements. E.g. maps and charts.
  4. Structured content. E.g. nested lists and tables.
  5. Interactive content. E.g. web.
  6. Multimedia. E.g. audio and video.

For each one, there are a set of accessibility best practices. These focus on the specific aspects that need special attention to minimise the chances of having accessibility issues and AT incompatibilities. The idea is having simple rules that guide the creation so that the output is usable for the widest range of students regardless of their abilities without the need for further adaptations.

Related topics

Key tips

Accessible digital content has 4 key principles: Perceivable, Operable, Understandable and Robust

The principles can be easily remembered by the acronym POUR:
P = Perceivable.

  • Content is delivered to students in different ways so that they can access it regardless of the senses they use. E.g. texts can not only be read, but also heard.
  • There are text alternatives to non-text objects. E.g. images have alternative text (description, alt text) that carries the same information.
  • Multimedia has associated alternatives like captions, transcripts, audio descriptions, sign language interpretation...

O = Operable.

  • Students can easily navigate and find content.
  • Keyboard-only. it is possible to use the content only with the keyboard.
  • Students have enough time to use the content.
  • The displayed content should avoid causing seizures. More than 3 high-contrast changes per second can trigger epileptic episodes in sensitive people. Learn more at: Photosensitive Epilepsy - British Epilepsy Association.

U = Understandable.

  • The language used and the arrangement of the information is not convoluted.
  • Text is easy to understand.
  • The reading order and the interactive elements are predictable.
  • The design should be helpful and avoid students getting confused and making mistakes.
  • E.g. a single-column layout is preferable but, when a two-column layout is used  then the elements in the page should guide the reader through the content in an intuitive way.

R = Robust.

  • The content should be usable regardless of the device that students use. However, notice the large number of IT device manufacturers and devices in the market.
  • To achieve robustness, standardised procedures for the creation of the content should be followed.
When the content meets the minimum accessibility requirements of each principle then we may consider it accessible

This is an example of a general checking procedure for the creation of accessible digital content.

  1. Language and readability
    1. The language of the content is explicitly set. This allows ATs to correctly handle the content. Eg. screen readers use this meta-information to select the right voice synthesiser for the specified language.
    2. The complexity of the language should fit the topic and the audience.
    3. If something is expected from the student then provide clear instructions.
    4. Find out more at Accessible text.
  2. Visual static content
    1. Include short “Alternative Text” that conveys in words the information contained within the visual image. Find out more at Pictures and images.
    2. For graphic content that contains complex information, like graphs, charts and maps. The surrounding text should refer to this content and describe the information that the content carries in more detail than the “Alternative Text” tied directly to it.
    3. Find out more at Complex non-text elements.
  3. Content Structure
    1. Use of descriptive headings.
    2. Ensure that the headings used are of different hierarchical levels.
    3. Check that the headings are nested in a continuous descendant sequence (E.g. H1, H2, H3).
    4. Find out more at Accessible text.
    5. Tables should contain row and/or column headers that introduce the data. Find out more at Accessible tables.
  4. Legibility & colour
    1. Ensure that there is style consistency along the whole text.
    2. Choose a legible font. Sans-serif typography is preferable. i.e. Arial, Verdana, Calibri, ...
    3. The size of the text, by default it should be enough to be readable. E.g. greater than 12px. But more important is that the student is able to resize it according to their preferences.
    4. Bold, underline, italic should be used moderately and only when they are necessary.
    5. Ensure that the colour contrast between the relevant content and its background is enough to be easily perceived.
    6. Colour safe - tool to create accessible colour palettes.
    7. Contrast Checker by WebAIM - tool to assess the colour accessibility.
    8. Find out more at Accessible text.
    9. Do not rely on colour alone to convey meaning. E.g. a good approach is when wrong answers in a multiple choice exercise are marked in red and by the symbol ‘X’.
    10. Find out more at Pictures and images.
  5. Interaction elements
    1. Create meaningful links that provide accurate information about where the user is being sent to.
    2. Interactive elements should be easily distinctable from the rest of the content.
    3. User input fields should describe explicitly what is expected from the student.
    4. Whenever an error happens, the student should be aware of it.
    5. Find out more at Multimedia.
  6. Reading order
    1. There is an implicit reading order that screen readers can follow.
    2. Find out more at Accessible text.
    3. Interactive elements should be focusable or selectable.
    4. Find out more at Multimedia.
    5. Users can use the search functionality to find text.
  7. Keyboard-only
    1. Students can make use of the learning material using only the keyboard. E.g. Pressing the Tab key the selection jumps from one selectable element to the following.
    2. Find out more at Understand the uses of the assistive technologies page.
  8. Resize & Reflow
    1. Text can be resized by the student.
    2. There is no loss of meaning when non-text elements are resized. E.g. Use of high quality pictures so that when they are magnified the relevant content in them can be perceived.
    3. Find out more at Pictures and images and at Complex non-text elements.
  9. Multimedia content
    1. Videos should have closed captions.
    2. Videos should have transcriptions and/or audio-descriptions
    3. Audios should have tied transcriptions.

Resources