General
In this page you may find an outline and description of the procedure for ensuring the accessibility of digital educational material. Please, mind that the most basic and important thing is assuring that the content tailored to the target audience and is effective in achieving the learning goals.
Related topics
Key tips
- Evaluate the approach
-
- Skim the content of the document.
- Identify the aim or goal.
- Identify the target audience.
- Evaluate the fitness of the presentation of the information to the target audience.
- Determine the type of digital content
-
- Only digital text. E.g. txt.
- Images. E.g. jpg, svg, …
- Office document. E.g. Word.
- Slides. E.g. PowerPoint slides.
- Spreadsheet. E.g. Excel workbook.
- Multimedia. E.g. Video.
- Interactive. E.g. Web application.
- Perform automated accessibility assessment
-
There are software tools that automates this procedure of checking the accessibility of the digital educational material. These tools highlight the potential accessibility issues and suggest actions to remove or mitigate them. This is helpful as it reduces efforts to ensure accessibility, but some aspects of accessibility are not covered by automatic accessibility checkers.
- When accessibility checkers are available, their use should be one of the first steps to address when checking the accessibility of educational materials.
- You may find some of these tools in the “Tools for checking the accessibility” section.
- Check the text
-
- Language oriented to the target audience.
- Use simple language. Technical terms and acronyms are explained.
- Consistent writing style through the document.
- Avoid long chunks of text when possible. E.g. split content using lists.
- Avoid using sensory cues like colour, shape, size, orientation and spatial position..
- Check images
-
- All non-text elements have a text alternative.
- Decorative and non-relevant non-text elements are marked as such. Ie. they have empty alternative text in HTML.
- Alternative texts are short.
- Complex non-text elements have a text description which is longer than their alternative texts.
- Animations should avoid flashing. Ie. less than 3hz (3 changes per second) high-contrast colour changes. See: Understanding Seizures and Physical Reactions - Understanding Docs - W3C.
- Check colour
-
- Relevant elements have a high enough contrast to be easily perceived. For example, an accessible colour scheme is black text on a pale white background.
- Size affects the accessible contrast threshold, the larger the size the lower the threshold. Relevant larger scale elements require less contrast to be accessible (contrast ratio 3:1), while smaller elements need higher colour contrast (contrast ratio 4.5:1).
- It is good practice to have an accessible colour contrast on all elements but, where this is not possible, non-relevant elements such as decorative or inactive elements may have a lower contrast. See: See: Understanding minimum contrast - Understanding Docs - W3C
- Meaning is not carried only by colour. E.g. referring to a piece of text only by its font colour. See Understanding the use of colour - Understanding Docs - W3C
- Check links and buttons
-
- They should be easily perceived as interactive elements. See: Understanding content on Hover or Focus - Understanding Docs - W3C
- The text should be descriptive. It should explain the function of the button or the destination of the link. See: Understanding Link Purpose - Understanding Docs - W3C.
- Check the layout
-
- Consistent text style -font and text size- through the document.
- Tables are not used for layout purposes. Tables are used only for displaying tabular data.
- Use headings and subheadings to organise the content. Headers only contain sub-headers of lower order and heading levels are not skipped.
- Use special formatting for quotes, code snippets and other special elements.
- Use semantic structure:
- The different text styles have attached meaning. Eg. use of styles in Word to add headings.
- Unordered lists. Items should be preceded by programmatically placed bullet points.
- Ordered lists. Items should be preceded by programmatically placed numbering elements. I.e. 1, 2, 3, … or a), b), c), …
- Know more at: Use a Clear and Understandable Page Structure - Supplemental guidance to WCAG.
- Check tables
-
- All tables should have headers.
- Use simple headers. Avoid the use of merged cells and multiple column/row headers.
- The content of the headers should describe accurately the content of columns and rows.
- There are no merged cells or nested tables (table inside of a cell).
- There are no empty cells. E.g. empty cells could take the N/A value instead.
- All tables have a table caption that describes concisely its content.
- The content is ordered in a logical manner. The order should help to understand the data and meet the purpose of the table.
- Check the navigation
-
- Headings are descriptive of the content they introduce.
- The heading structure is logical and makes it easy to find content through the document.
- Provide non linear access methods like tables of the content or site map in large digital documents.
- Ensure keyboard-only access. Users should be able to navigate without the use of a pointing device. See: Understanding Keyboard Accessible - Understanding Docs - W3C
- Only for web content.
- Use skip links to allow users to skip repetitive content and to navigate to the main content. See: Understanding Bypass Blocks - Understanding Docs - W3C
- When proceed, use ARIA to provide meaning to the different sections of the document. See: WAI-ARIA Overview - W3C
- Check magnification issues
-
- Prefer vector graphics over raster images.
- Raster images must have a high enough resolution so that the relevant details can be clearly perceived when the image is enlarged.
- Avoid text in images. When unavoidable, relevant text should be in the alternative text or large description of the image. See: Understanding Images of Text - Understanding Docs - W3C
- If the document allows scaling, make sure that text overflows correctly and the layout does not change logical reading order.
- Check videos
-
- It should be allowed to play, pause and stop.
- Allow to jump directly to specific points in the video. I.e. slide that shows the progress.
- Keyboard-only control of the video.
- Include closed captions and transcriptions. See: Understanding Captions - Understanding Docs - W3C
- Videos are not autoplay.
- Avoid flashing videos when possible. See: Understanding Seizures and Physical Reactions - Understanding Docs - W3C.
- Check forms
-
- Clear and descriptive instructions to guide users through the filling process. See: Understanding Labels and Instructions - Understanding Docs - W3C
- Fields have associated descriptive labels.
- All requirements for inputs are clearly stated. See: Understanding Help in Interactions - Understanding Docs - W3C
- Errors are clearly indicated and explained. Avoid flashing indications. See: Understanding Error Identification - Understanding Docs - W3C
- Time constraints should be long enough to allow slower students to complete the submission. See: Understanding Enough Time - Understanding Docs - W3C
- If sensitive data is asked there should be a confirmation step prior to the submission. See: Understanding Error prevention - Understanding Docs - W3C
- Keyboard-only enabled so students can fill it in without relying on pointing devices.
- Tab-order should be logical and make it easy to complete the form.
- Colour should not be used as the only mean to convey information (e.g. when marking mandatory fields or errors). See previous checking about colour.
- Tools for checking the accessibility
-
- Automated testing tools
- Microsoft Office Accessibility Checker - Office documents
- Adobe Acrobat Pro - PDF documents
- WAVE browser extension by WebAIM - Web
- Accessibility Checker extension by Siteimprove - Web
- Colour contrast checkers
- Colour Contrast Analyser by TPGi - Windows & Mac
- Contrast Checker by WebAIM - Web application
- Screen magnifiers
- Screen readers
- JAWS - Windows (Paid)
- NVDA - Windows
- Apple VoiceOver - Mac / iOS
- Orca - Linux
- ChromeVox - Chrome OS
- Automated testing tools