E-Learning Accessibility Checklist

The Web Content Accessibility Guidelines (WCAG) are the most official source of guidance on how to make electronic communications accessible. However, those standards aren’t written specifically for e-learning. This checklist, created by Artisan E-Learning, ELB Learning, and SweetRush, is available to you through the Inspire Accessibility initiative. It can help you “translate” how the WCAG standards apply to e-learning development.

Instructional Designers
  • Create alternative text descriptions for non-decorative images. For decorative images, use ALTEXT=”” .
    WCAG: Level A Success Criteria  1.1.1
  • Provide text-based alternatives for multimedia content in the form of a transcript/transcripts, closed captions, or both.
  • Include all speech from the soundtrack, identify who is speaking, describe the important part of the scene, and include onomatopoeia only for background sounds that contribute to your message.
    WCAG:
    Level A Success Criteria  1.1.1 – 1.2.3
  • Create explicit instruction text for buttons and interactive components. For example: Instead of “Select here,” we can say, “Read more” or “View the file.”
    WCAG:
    Level A Success Criteria  1.3.3
  • Avoid images with embedded text because screen readers can not access the content. Put the text in a text object.
    WCAG:
    Level AA Success Criteria  1.4.5
  • Do not add time limits to activities and exams unless the time limit is essential.
    WCAG:
    Level A Success Criteria  2.2.1
  • Create a unique name for each course page or screen. (Think about the page titles that will appear in the table of contents or course menu.)
    WCAG:
    Level A Success Criteria  2.4.2
  • For buttons and links that don’t have a label, create alternative text descriptions.
  • The purpose of the link must be clear from the link text (for example, “Read Document”).
  • If the link is an image, the alt text of the image makes the purpose of the link clear (for example, “Link to FAQ”).
    WCAG:
    Level A Success Criteria  2.4.4
  • Explain what’s going to happen when you click a button or link. For example, if the button opens a new tab, explain that to the learner.
    WCAG:
    Level AA Success Criteria  2.4.6
  • Where a component has a text label, the name of the component also contains the text displayed.
  • Create alternative text to match on-screen labels, as applicable.
  • Ensure that the text label and programmatic name of components match.
    WCAG: Level A Success Criteria  2.5.3
  • Provide instructions when content requires user input.
    WCAG: Level A Success Criteria  3.3.2
Creative Directors/Graphic Designers
  • Maintain a logical reading order in pages, documents, tables, slides, and forms.
    WCAG: Level A Success Criteria  1.3.2
  • Don’t restrict device orientation. Make sure that:
  • All content retains meaning in either landscape or portrait position.
  • All content retains function in either landscape or portrait position.
    WCAG: 
    Level AA Success Criteria  1.3.4
  • Create alternatives when color is used to convey important information or instructions. Alternatives can be visual, text or audio-based.
  • Provide text alternatives for info that’s only visual, such as color coding or pattern.
    WCAG: 
    Level A Success Criteria  1.4.1
  • Use highly readable fonts like Arial, Calibri, San Serif, & Helvetica.
  • Avoid font sizes below 12px.
    WCAG: 
    Guideline  1.4 Distinguisable
  • Use line height to at least 1.5 times the font size;
  • The paragraph spacing must be adjusted to at least 2 times the font size;
  • And the letter spacing to at least 0.12 times the font size; and
  • Finally, set word spacing to at least 0.16 times the font size.
    WCAG:
    Level AA Success Criter ia 1.4.12
  • Make sure the visual presentation of text and images of text (avoid images of text) have a contrast ratio of at least 4.5:1, except for the following:
  • Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1.
  • Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content have no contrast requirement.
  • Logo types: Text that is part of a logo or brand name has no contrast requirement.
    WCAG: 
    Level AA Success Criteria  1.4.3
  • If color is used to convey the meaning between states (such as visited, selected, and normal), use a contrast of at least 4.5 to 1.
  • Don’t rely only in color to convey a state. Include alternative text for the screen readers.
    WCAG: 
    Level AA Success Criteria  1.4.3
  • Make sure your course text works up to 200% zooming, with the exception of captions and images of text.
  • Ensure users can resize the text content in their web browser up to 200% without loss of meaning or function.
  • Add support for 200% web browser zooming.
  • As all modern browsers allow for changing text size, a website based on good HTML and CSS should comply.
  • If your course doesn’t resize correctly to at least 200% in a browser, add a feature that enables users to resize (by CSS) to three or four predetermined magnification settings, including 200%.
    WCAG: 
    Level AA Success Criteria  1.4.4
  • Avoid the use of images of text since they cannot be read by assistive tools.
  • If an image is essential to preserve a specific design, provide text alternatives for screen readers.
    WCAG: 
    Level AA Success Criteria  1.4.5
  • Avoid blinking and flashing content. Do not use videos, animations, or other elements that flash or blink more than three times per second.
    WCAG: 
    Level A Success Criteria  2.3.1
  • Ensure there’s a visible focus indicator with good color contrast when keyboard navigation is used. For form fields, you might display a bar within the field or highlight the entire field. For controls, you might display a border around the control.
    WCAG: 
    Level AA Success Criteria  2.4.7
  • Provide clear and consistent navigation.
    WCAG: 
    Level AA Success Criteria  3.2.3
Developers
  • If an object does not contain useful content, remove it from the focus order so it is ignored by keyboards and assistive technology.
    WCAG: Level A Success Criteria  1.1.1
  • Add captions to synchronized media, except when the media is a media alternative for text and is clearly labeled as such.
  • Check that the caption text is not covering any important part of the image, has a font size of no less than 12px, is 30 words max, and is the right color contrast ratio (you can use a font background).
    WCAG: Level A Success Criteria  1.2.2
  • When using visual techniques to convey information, structure, and relationships (such as larger text to designate something as a heading), make sure that information, structure, and relationship can be interpreted programmatically or with a text alternative.
  • Break up content with subheadings for new sections.
  • Mark headings with HTML header tags.
  • Use lists, tables, and other formats where needed.
  • Use the correct HTML for all structural elements.
  • Use valid HTML everywhere.
  • Use clear labels and alternative text on forms.
    WCAG: Level A Success Criteria  1.3.1
  • When hover or focus triggers content to appear, it is dismissible, hoverable, and persistent.
  • If the hover changes the content, add the accessibility support for that feature.
  • Content on hover must provide a mechanism to dismiss the additional content without moving the keyboard focus, and the aditional content must remain visible until the hover or focus trigger is removed.
    WCAG: Level AA Success Criteria  1.4.13
  • Include volume controls so a screen reader user can keep their system audio on (to hear the screen reader) but mute the audio in the course.
  • Volume control must be activated using the arrows keys.
    WCAG: Level A Success Criteria  1.4.2
  • If possible, avoid audio/video that plays automatically because screen readers can cause audio overlapping when they are reading the page or element instructions. But don’t be afraid to use video/audio! It can be great on a course; just let users choose when to play it.
  • For the best user experience, give learners the option to stop/pause anything that autoplays. Also include volume control.
  • If a keyboard shortcut is available to pause/stop the audio, then explain this shortcut at the beginning of the course.
    Include a way for users to toggle autoplay on/off.
    WCAG: Level A Success Criteria  1.4.2
  • Ensure all course features and functions can be used with a keyboard.
  • Avoid features associated with a keystroke time duration. (i.e., hold Enter for 3 seconds)
  • This does not forbid and should not discourage providing mouse input or other input methods in addition to keyboard operation.
    WCAG: Level A Success Criteria  2.1.1
  • Do not add time limits to activities unless the time limit is essential to the functionality, such as a timed exam.
  • If needed, give the user an option to turn it off, extend it or adjust it before it begins.
    WCAG: Level A Success Criteria  2.2.1
  • Provide a way for users to skip repeated blocks of content.
  • Make sure tabbing to something doesn’t activate it.
  • Don’t put repetitive elements on the slide if they can’t be skipped.
    WCAG: Level A Success Criteria  2.4.1
  • Customize the focus order to ensure the content follows a meaningful sequence and supports the functionality of interactions.
    WCAG: Level A Success Criteria   2.4.3
  • Provide more than one way to locate the content with the built-in navigation features, such as the course menu, site map, table of contents, links, bookmarks, search fields, and the previous and next buttons.
  • Add a description of the shortcuts at the beginning of the course.
  • Do not use single-key shortcuts unless you provide a way for users to change them or turn them off.
    WCAG: Level AA/A Success Criteria  2.4.5 –  2.1.4
  • Make sure navigation elements (e.g., menus and previous/next buttons) are positioned consistently on every page.
    WCAG: Level AA Success Criteria  3.2.3