This is a the checklist we are using to make sure that the AI4terps learning platform is accessible to everyone.
Text
☐ Use short sentences. Avoid long and complicated sentence structures.
☐ Label everything clearly.
☐ Use headlines.
☐ Always use format templates to mark headlines as such (screen readers don’t recognise bold or larger text as headlines).
☐ Use lists (screen readers work well with lists).
☐ If you want to add a new paragraph, use only one blank line in between the paragraphs (and use paragraph formats where possible).
☐ Use a single tab stop to create gaps in the text and set a tab position to determine the size of the gap. Do not use a series of repeated spaces.
☐ Make sure your text is left-aligned. Avoid right- or justified text alignment.
☐ Do not use automatic syllable division.
☐ Avoid ableist language.
☐ Use sans serif fonts (examples include Arial, Aptos, Helvetica, Calibri. Do not use Times New Roman).
☐ Make sure contrast is high and that colours can be easily distinguished (minimum of 4.5 to 1). (Word has an accessibility check that you can use for this).
☐ Use more indicators than colour when relaying information. Information should be understandable on black and white screens or for people who are colourblind.
Tables
☐ Only use tables for straightforward tabular lists.
☐ Mark table headings as “header”.
☐ If the first column contains descriptive terms for the adjacent content (row labels), set the ‘First Column’ property: In the Word menu, select Table Tools | Design | First Column.
☐ All rows must have the same number of columns.
☐ All columns must have the same number of rows.
☐ Never have a table inside of another table.
☐ Very long tables may extend over more than one page. In such cases, the headers or table headings should be repeated so that they are displayed again after a page break.
☐ Ensure that page breaks only occur between table rows, not within a multi-line table cell.
Images, lettering graphics and diagrams
☐ Formulate alternative texts for informative images, graphics or photos.
☐ If images, graphics or photos are only decorative, insert a space in the alternative text to mark them as ‘decorative only’.
☐ Alternative texts should be one short sentence. Try to use less than 80 characters. Exception: diagrams.
☐ Diagrams have a lot of information. All of this data should be included in a more detailed alternative text.
☐ When writing alternative texts describe what can be seen in the image. Do not add your own interpretation of the image.
☐ Do not repeat what is already stated in the surrounding text.
☐ Avoid lettering graphics. Only exception: logos. For logos add an alternative text such as “Logo TH Köln”.
☐ Avoid design elements that flash more than 3 times in a one second interval.
Audio and video
☐ Turn off auto-play. Make sure you have to start audio manually.
☐ Make sure you have the best possible sound quality.
☐ Provide a transcript of everything that is being said (option: use an STT software (make sure to proofread after)).
☐ For videos you need to provide an audio description and/or a transcript. Here are two links on how to create an audio description and what you should keep in mind:
- https://www.ndr.de/fernsehen/barrierefreie_angebote/audiodeskription/Audio-description-guidelines,audiodeskription142.html#:~:text=Who%20is%20doing%20what%20where,present%20perfect%20may%20be%20used.
- https://www.w3.org/WAI/media/av/description/#writing
Subtitles
☐ Use an .srt format. Use a text editor to create an .srt file.
☐ To mark speaker changes, use their name or a dash.
☐ Lines should be divided according to meaning.
☐ Subtitles should be on the screen for at least 2 seconds (or 13-15 characters per second).
☐ Include important information relayed through audio (for example music, sounds in parentheses).
Format Ilias (only relevant for implementing content in Ilias)
☐ Use columns as layout (good for responsiveness and length of the lines).
☐ Avoid “advanced tables”(“erweiterte Tabellen”).
☐ Use “Metadata” to assign a language to the document.
☐ Make sure links/buttons can be clicked on using “tab”.
☐ Links and buttons should be at least 24 pixels high/wide.
☐ Form entry functions should not have a time limit/or an extended time limit.
☐ Be consistent in layout and in navigation elements.
☐ Everything should be mobile and tablet friendly.
Tests for accessibility
https://bitvtest.de/pruefverfahren/bitv-20-web
WebAIM: WebAIM’s WCAG 2 Checklist
