Accessible eLearning Best Practices
Authoring tools simplify the process of creating eLearning. Instead of coding directly in HTML and scripting languages, the tool does some of the coding for you. With some authoring tools, developers can often use different methods to achieve the same result. However, when it comes to WCAG compliance and accessibility, certain factors must still be met.
Web Accessibility Settings
As you begin to design your content, be sure to turn on the Use Web Accessibility Settings option within your Project Options on the Design Ribbon. When you select this option, Lectora will automatically enable certain features in the application that will assist you with meeting Section 508 standards and the Web Content Accessibility Guidelines 2.0 Level AA. You will still need to check your title for accessibility both manually (try unplugging your mouse and using just your keyboard), using automated tools (like a screen reader or accessibility evaluation tool), and in the field with students. However, this should give you a head start down the path toward more usable, accessible content.
What Does “Use Web Accessibility Settings” Do?
- Language property setting for text fields is enabled. This lets the screen reader know that a specific text block is different than the default language
- Custom button states are announced by the screen reader
- ALT tags are initially set to Empty when adding images and shapes
- Video and audio skins are disabled
- Rollover video controllers are disabled
- “Always on Top” property for objects is not selected by default*
- Visual indicators are enabled to be displayed when an object receives focus
- “Set Reading Order to Last” feature is enabled for groups
- Enable/disable audio Closed Caption background and change the background color
- You can choose to use lightbox per page
*Please Note: If the Use Web Accessibility Settings is checked BEFORE content is added, then it will not select by default. If
that setting is applied after content is added, it will have added Always on Top to a button. Those previous settings will need to be
changed individually.
Focus Color
When an object receives focus through tabbing, a visual indicator is displayed. The indicator highlights the object that is in focus. Pressing the Enter key will execute the action associated with the object just as clicking the object using the mouse. This color highlights the object that is in focus and can be defined by color and width in the Project Options dialog box. Visual indicators are only supported by all modern internet browsers with accessibility settings turned on.
Tab Order
Tab order refers to the sequence of detectable objects within a page. The Project Explorer (found in the left navigation pane) controls the layering of objects on a page, and therefore the reading order that screen readers use to identify objects. An object at the top of the list in the Project Explorer is actually on the bottom-most layer of the page. A screen reader would identify this object first. Alternatively, an object at the bottom of the list of objects in the Project Explorer would be identified last.
Setting Up: The Basics
Language
Use the Language drop-down in the Project Options dialog to specify the default language for your project. This will default to the language you chose when you installed Lectora desktop and to the local preference for each individual user in Lectora Online.
Language is enabled for text blocks when Web Accessibility Settings are enabled. Using the Language property, you can let a screen reader know that a specific text block is different from the default language of the page. This is useful if you are using multiple languages in the same course.
Follow these 2 steps to change the Language:
- Select the Text Properties to view the Properties ribbon.
- Use the Language pull-down list in the Text group to select the language for the text block.
Skip Navigation Links
Accessible content means your learners can skip repetitive navigation menu items; course title, logo, buttons, and links. Those using a screen reader or the keyboard exclusively can skip over listening to a screen reader announce each navigation element on the page or tabbing through each navigation element on the page before arriving at the main content. This shortcut link is often referred to as “Skip to Content,” “Skip Navigation” or “Skip Nav.” Lectora enables you to provide a “Skip Navigation.” When executed, it automatically brings users to the main content on the page and enables the screen reader to begin announcing that content.
There are two ways to accomplish this in Lectora:
1. Use HTML Text Types
2. Use a hyperlink.
Please note: You may experience inconsistent results using the hyperlink due to the published HMTL page refresh
Use HTML Text Types
HTML defines six levels of headings <H1> to <H6>. These headings communicate the organization of the content on the page. Web browsers, plug-ins, and assistive technologies can use them to provide in-page navigation. The most important heading has the rank <H1>.
Use Hyperlink
Follow these steps to create a “Skip Navigation” link:
Use HTML Text Types
- In the Project Explorer, add a text block at the Project or AU/AOO1 level before the main content.
- Add the text “Skip to Content” or “Skip Navigation.”*
- Place the Page Title at the beginning of the new page and in the Properties tab, select the HTML Text Type and change from Normal to the appropriate type.
Use Hyperlink
- In the Project Explorer, add a text block at the Project or AU/AOO1 level before the main content.
- Add the text “Skip to Content” or “Skip Navigation.”*
- Add a button or hyperlink that is set to Go To > Current Page, and Scroll To the placeholder.
- Layer the “Skip Navigation” link in the Project Explorer by placing it before any navigation.
- Use an appropriate ALT tag for the button or text for the link, such as “Skip to Content.”
*Most developers will set the color of the link to blend with the background color or set the opacity to 0 to avoid confusion for sighted users.
Course Navigation
Tabbing Order And Reading Order
Users must be able to interact with a course using only their keyboard (referred to here as “keyboard navigation”). The Tab key functions the same as the Windows tabbing functionality; it enables a user to cycle forward through the course while using Shift+Tab to cycle back to previous items. The Project Explorer provides a means to control the tabbing order of clickable objects for users relying on a keyboard.
The Tab order is based on the object’s listed position in the Project Explorer. A clickable object that appears in the top-most position of the list in the Project Explorer will receive focus first when using a keyboard to navigate the page.
Having consistent navigation in your course (and throughout all your courses) is important, especially for those using screen readers. Most will include navigation (Back and Next) at Project Level and inherit throughout the course. We discuss this more in the Layout and Design section of our eBook.
To ensure it is read after all the content on the page, navigate to properties for the group and check the box for “Set Reading Order to Last.”
Conclusion
While many countries have laws protecting the rights of people with disabilities, they vary on if the law applies to public sectors, private sectors, and the government. No matter what it is called around the world, e.g., in Canada it’s known as Accessibility for Ontarians with Disabilities Act (AODA) or Canadian Human Rights Act, in Europe, the European Accessibility Act (EAA), In Ireland, the Discrimination Disability Act (DDA), in England, Scotland and Wales, the Equality Act of 2010, or in the United States, Section 508; groups around the world are working diligently to make sure that accessibility standards are harmonized and don’t contradict each other.
Want to learn more about the essentials of setting up? Download the eBook Making eLearning Accessible to explore Table of Contents, Drop Down Menus or Fly-Out Menus, Color and Contrast, Typography and Text, Type Size, Kerning and Letter Spacing, Leading, Lists, Text Friendly Links, and so much more!
