How To Create Accessible eLearning Content
It’s up to you to ensure that you’re designing your content for as many people as possible, including those with physical, sensory, or cognitive limitations or disabilities. We call this concept “accessibility” or “accessible eLearning.” In this article, we explore two common eLearning accessibility questions. You can also download our eBook for more Q&As and accessibility tips.
Question #1: How Do I Make A Course Keyboard Accessible?
For sighted learners in the US, content is typically consumed from top-to-bottom and left to right. Learners with visual disabilities consume content differently; rather than using a mouse, some learners may depend on a keyboard to navigate through a course and the content on a page, and other learners may use a screen reader.
When a screen reader encounters this True radio button, the text and the ALT text will be read, the object type will be identified, and if required, the status will be identified. The screen reader would announce this as “True, Radio Button. Unchecked.” The user could then press Space or Enter on the keyboard to change its status or activate its trigger.
Think about how a screen reader user would experience many typical interactions or how someone only using a keyboard would experience the course. Without the use of a mouse, some interactions are not accessible. Course designers should plan for this, and one of the best ways to test a course for accessibility is to unplug your mouse and confirm you can access all of the content and complete the course using only a keyboard. Check to see if you can:
- Navigate through the course with your keyboard
- Access keyboard shortcuts when necessary
- Tab between fields like buttons, entry fields, and question controls
- Stop, pause, and play audio and video using the keyboard
Answer: Reading Order, Tab Order, And Layering
Well-designed courses include a consistent layout with routine navigation placed in a standard location. Ensuring consistency in how navigation and content are organized and displayed helps decrease the potential learning curves, and improve accessibility— for everyone. Learners can easily glance at a page, find the navigation links, and quickly focus on the main content. Students who use screen readers rely on the software to gather this type of information. A screen reader will interpret the HTML markup used to generate the page, rather than the page itself. Creation of a first-visit tour, a “welcome course,” or a tutorial that orients new users to the primary navigation and tools used in your LMS will help all users start on the right path.
For this reason, it’s important to pay careful attention to the reading order of the elements used on a page. For example, paragraphs should be announced in logical order, and page titles should be read first, rather than last. Consider reading order as you develop and design your course, rather than after you have already added all of the content. This will save you time and rework down the road.
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.
Use caution when setting the Always On Top property for an object. This option places the object on the top-most layer of the page and at the same time, makes it the first object identified by a screen reader.
Note that objects that are inherited on a page are always identified first and layered at the very bottom of that page. A screen reader will first identify inherited project level objects, then identify inherited chapter level objects second, and identify page level objects last. You can check the reading order simply by reviewing the Project Explorer from top to bottom. With Lectora v.21 you may place inherited items in a group at the Project or Chapter level and 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.”
Question #2: How Do Users With Visual Impairments View Visual Elements Within A Course?
A learner with a visual impairment may not be able to distinguish or identify images, graphics, charts, graphs, audio, and video if they are not configured properly in your course. If any of the images in your project are of no informational value or are used merely for decoration, the image description doesn’t need to be sent to a screen reader.
Answer A: ALT Tags For Decorative Images Turned Off
Select Empty ALT Tags for decorative images; those images that do not add information to the content of a page. For example, the information provided by the image might already be present on screen in text, the image might be included to make the website more visually attractive, or it might be background images, shapes, and borders. Screen readers and assistive technology will skip over objects with empty ALT Tags.
You can set this in Lectora by selecting the Empty ALT Tag option in the object’s properties to properly turn off ALT tags for an image. Don’t leave the object name blank, or a screen reader will end up reading the image’s filename instead.
Answer B: ALT Tags For Images, Media, Buttons, And Hotspots
For images that are not simply decorative, alternative text (referred to as ALT Text) or text equivalents are the most essential and straightforward methods for creating accessible content. You can provide text equivalents in Lectora by using ALT tags for media, buttons, and hotspots.
ALT Tags in Lectora are created from the object’s name as it is listed in the Project Explorer. The name used in the Project Explorer is the same name that appears in the Name field of the object’s properties. Use short, descriptive object names to create ALT tags for images, media, buttons, and animations.
If you’re layering transparent buttons on top of images to create hotspots or rollovers, ensure that the ALT tags for the all of the transparent buttons (as well as the underlying image) have appropriate ALT tags as well. ALT Text should be as brief as possible and has a maximum length of 156 characters.
When writing ALT Text, be sure to keep descriptions short and to-the-point. Avoid unnecessary information and qualifiers at the beginning or end of a description, such as “image of…” or “graphic of.” When a screen reader is running it will automatically declare an item when it has finished reading the ALT Text. In the case of an image, it will say “graphic.”
Conclusion
Download the eBook Making eLearning Accessible for actionable tips and insights to create truly accessible online training experiences for everyone. It covers everything from WCAG checklists and problem-solving to strategies that you can use for any authoring tool. You'll also find tips to create your own accessibility development checklist to keep on hand as you develop your
next accessible project.
