E-Learning Accessibility Road Map
If you are embarking on a journey towards more accessible e-learning, what types of things do you need to consider?
This road map provides two levels of guidance targeted for non-developers such as learning leaders and instructional designers. Use the headings for high-level guidance on the types of considerations and who they are designed to help. Use the individual points for greater insight into what it takes to get there.
This road map is based on WCAG 2.1 AA. Bonus tips help you go over and above the AA recommendations. If you are a developer and want more details about how to actually implement the guidelines, refer to our E-Learning Accessibility Checklist.
Give learners enough time.
- Do not use time limits, such as a timed quiz, unless the time limit is essential. If you do want a nonessential time limit, provide a way to turn it off, adjust it, or extend it.
- Bonus tip: Do not automatically advance slides/pages so learners can choose how much time to spend with the content.
Make sure learners who can’t hear can access all content.
- For audio, add either synchronized captions or a static transcript when you don’t have visuals that change over the course of the page (static visuals or no visuals).
- For audio, add synchronized captions when you have visuals (text, images, etc.) that synchronize in and out during the audio.
- For captions, include additional helpful information such as who is speaking, sound effects, and music.
- Bonus tip: Design your slides/pages/media so that audio captions don’t cover important content.
Make sure learners who can’t use a mouse can navigate your content with a standard keyboard.
- Make sure a learner can navigate through the entire course and access all content with a standard keyboard without getting stuck (using Tab, Enter, Spacebar, arrow keys, etc.).
- Do not include any activity that requires a dragging action unless it has a keyboard option as well.
- Avoid showing content on hover. If you need to show content this way, refer to WCAG for specific techniques.
- Include a visual focus indicator so keyboard users can tell which item is active. Make sure the focus indicator has good color contrast with surrounding elements.
Make sure someone with imprecise mouse movements can use your course.
- Don’t require any two-finger gestures (such as pinch to zoom). Either use a one-finger gesture or provide a button alternative (such as a zoom button).
- If you design anything that requires moving a device (such as an accelerometer or gyroscope), provide a way to perform the activity without moving the device, and provide a way to turn off the movement-activated feature.
- Bonus tip: Make clickable areas at least 44 pixels wide and 44 pixels tall.
Make sure learners with low vision can interpret your content without assistive technology.
- If you use color to convey meaning (such as color coding), provide a way for learners who can’t see color to get the same information. This might mean on-screen text descriptions, labels, or patterns.
- Use good contrast. Use a minimum contrast ratio of 4.5:1 for small text and 3:1 for large text, interface elements, and any graphic with meaningful content (such as a line graph). Text in logos is exempt from this rule.
- Bonus tip: Consider enhanced contrast: 7:1 for small text and 4.5:1 for large text, interface elements, and any graphic with meaningful content, including logos.
- If an object has states (such as visited, selected, locked, expanded, etc.), don’t rely solely on color to distinguish between the states.
- If an object has states, make sure the text/icons in each state still have good contrast with that state’s color.
- Do not use images of text unless the text needs to be presented in such a specific way that only an image can accomplish it, such as showing an example of a font, an image of a worker wearing an ID badge, or a logo.
- Make sure your course functions properly if the learner magnifies it to 200%.
- Use technology and layouts that let the learner use a browser extension to change the line height or the spacing for paragraphs, letters, or words such that the text does not get cut off or overlap with other objects.
- Use reflowable text, if possible, so learners who need to magnify the text don’t need to scroll in more than one direction to read it (unless your content requires a specific two-dimensional layout for usage or meaning).
- Make sure anyone who can’t distinguish colors, shapes, location, size, or other visual information can still determine what all buttons and links do without the need for any assistive technology. For example, instead of referring to “the button on the right,” refer to the “Learn More” button.
Make sure learners who can’t see (fully or partially blind) can interpret all visual content with assistive technology.
- If an image contains any information relevant to the content, provide a helpful, succinct text alternative that describes it, such as with alt text that can be picked up by a screen reader or on-screen text.
- If a video contains relevant visual information (such as text, character actions, or scene changes) that isn’t adequately described in the audio, create a separate audio description version that splices in a separate narrator describing the visual content.
- If an object has no useful content, pull it out of focus order so assistive technology skips it. Examples: background graphics, lines and shapes, images that are described adequately audio or on-screen text.
- If you use a symbol font (such as Webdings or Zapf Dingbats), provide alt text with the meaning because screen readers will read the letter used to type the symbol, not the symbol itself.
- Make sure headings, lists, tables, and other visual organizing techniques can be recognized by screen readers.
- Bonus tip: If you have on-screen elements that appear and disappear as a slide progresses (such as text and images synchronized to audio), make sure a screen reader user can access that content without having to “chase it.” For example, how would a screen reader know about an image if it disappeared before they got to it? How will they know new content has been added to a section they have already explored?
Make sure learners who can’t see (fully or partially blind) can interpret navigation and interactions with assistive technology.
- Make sure anyone who can’t see can still determine what all buttons, links, input fields, and other interactive elements do.
- For any buttons and links, use names (visible or with alt text) that make sense out of context. Instead of “click here,” use “download policy.”
- If you use states (such as selected, visited, locked, expanded, etc.), make sure a screen reader can determine what the state is.
- If an action results in a change in context (such as opening a new browser tab), include guidance for screen readers to let learners know in advance what will happen.
- If status messages appear (such as an error message or an update to a score), the status message is announced automatically by a screen reader or appears in a pop-up window or layer.
Give learners options and control.
- Include volume controls so learners can control audio on the course separately from the audio on their device.
- Give learners the option to stop, pause, or control volume (separate from the device’s audio settings) for any audio that plays for more than 3 seconds. Bonus tip: Provide this for any audio, regardless of length.
- If you have moving, blinking, or scrolling information that starts automatically, lasts more than 5 seconds, and is presented along with other content, give learners the option to stop, pause, or hide that content.
- Bonus tip: If you have auto-playing media, give learners the option to turn off all auto-play in the course.
- Make sure your course works in both landscape and portrait orientation.
- If you have repetitive elements on your slides/pages (such as course title, menu button, logo, etc.), provide a way for learners to skip them.
- Make sure tabbing to a button or other interactive element doesn’t activate it. Instead, have the element execute when the learner clicks, presses Enter, etc.
- Use authoring tools that execute mouse actions when a mouse is released rather than when it is pressed (allowing learners to change their minds).
- Give the learners the chance to change their minds before submitting an answer. (For example, do not auto-grade upon selecting a choice in a question.)
- Don’t use keyboard shortcuts that only use single keys or uppercase letters. If you do need to do this, refer to WCAG for specific techniques.
Make everything clear and easy to understand.
- Make sure assistive technology can determine the language of a page and of any passages/phrases that are in a different language than the rest of the page.
- Include clear instructions about any interactions. Explain what’s going to happen when the learner clicks a button, link, etc. (For example: “opens in a new tab”)
- Work with authoring tools that use the correct behind-the-scenes code to classify and label everything properly. (For example: A screen reader can tell that a radio button is a radio button.)
- Avoid blinking or flashing content that flashes faster than three times per second, as this content can be distracting and could even cause seizures. If you must use flashing, refer to WCAG guidance for possible exceptions.
- Bonus tip: Use clear, easy-to-understand language that’s appropriate for the reading and comprehension levels of your target audience. Provide definitions where needed and avoid jargon or unfamiliar acronyms.
- Bonus tip: Use highly readable fonts like Arial, Calibri, and Helvetica.
- Bonus tip: Avoid all caps and centered text when it’s more than just a few words, as these formats can be difficult to read.
- Bonus tip: Use inclusive language, such as “select” instead of “click” or “learn what happens” instead of “see what happens.”
- Bonus tip: Organize content with tables, headings, lists, and blank lines between paragraphs.
- Bonus tip: Include a help/instructions feature that explains how to use the course (with and without assistive technology) and provides contact information for getting additional assistance.
- Bonus tip: Consider how to teach content for skills that require a certain ability, such as a course on nonverbal communication for a learner who can’t see body language or hear tone of voice.
Make everything consistent.
- Use clear and consistent navigation. Don’t move repeated navigational elements around or put them in a different order from page to page.
- Use consistent naming conventions throughout a course. For example, don’t switch between continue, next, next slide, and next page when describing the same basic action.
- Make sure the alt text on interactive elements uses the same language as any on-screen or audio instructions. It’s OK to add extra text to the end of the alt text. (For example: a button called “More” can have alt text that says “More topics”).
Make things easy to find.
- Give each page a unique, logical name/title.
- Make sure all on-screen elements are in a logical sequence. Example: make sure instructions come before an interaction, not after it.
- Provide more than one way to navigate to content. For example, use Next buttons, a menu, and/or search.
