How To Create Accessible eLearning Content: Part 2
Part One of this accessibility Q&A covered how to make a course keyboard accessible and how to create engaging content for learners with visual impairments. In this article, we'll address four more questions that eLearning developers often have when designing meaningful experiences for all, regardless of learners' needs or preferences.
Question #1: What Do I Do If My Graphic/Chart/Image Needs A Longer Description Than 156 Characters?
Answer A: Page Text, Hidden Text, Display Message
Often complex graphics, charts, and some images will require a longer description than what you can provide with the 156-character ALT Tag limit, so a textual description is needed. There is more than one way:
- Describe the image within your page’s text. This benefits all learners by reinforcing the information presented in the graphic.
- Place the description behind the graphic, so it is only recognized by a screen reader, but not displayed on the page. To do this, use a small font and a text color that matches the background color of the page; then layer it, hidden, behind the image. You can also change the opacity of the text block to 0 and place the text block near the image.
- Add a hyperlink below the image to open a textual explanation in a new window. In earlier versions of Lectora, you would use a Display Message action and type the long description in the Message field. Since Lectora v.18, you could include an initially hidden text block that is revealed by the click of a button or synchronized to audio.
Answer B: Additional Notes On Text
When using hyperlinks rather than listing the URL, use a descriptive title of the resource, such as read “The Making eLearning Accessible eBook.”
Question #2: How And Why Do I Need To Structure Headings And Other Text?
Visually, headings are presented as larger and more distinct than surrounding text. Making text larger helps guide the eye around the page. Using headings and making them visually apparent is especially helpful for users with cognitive disabilities. If the text is set up correctly, users of screen readers can search the page to find and identify important content.
Answer: HTML Text Headers
When you label the text block as a heading, it is recognized by assistive technologies such as screen readers and search engines as containing important information. This selection will not affect the formatting of the text block, but will define the importance of the text relative to the content. HTML defines six levels of headings, H1 to H6. These headings communicate the organization of the content on the page. The most important heading has the rank H1 with the least important heading having the rank of H6.
To enable this, select the Text Properties, then HTML Text Type property. For each text block, you can set the HTML Text Type to Heading 1 through Heading 6.
Question #3: How Can A Data Table Be Accessible?
If you use tables within your project and that table contains data, accessibility guidelines require you to identify row and column headers so that a screen reader can properly identify the information within the table.
Answer: Table Header Rows
In Lectora, select the Include Header option within the Table properties. Cells within the table are automatically referenced with the left-most column of the table, and the designated header row. The program can only natively support the simplest of tables that contain only a single header row.
The Include Header option is on the Table Properties ribbon.
Question #4: Is There Anything I Need To Do To Lectora Questions And Form Elements?
Answer: Labels
Most questions and form elements are already accessible, but there are a few design considerations to keep in mind.
For example, all form controls like radio buttons and entry fields require a label so that learners can identify the name and function of the control. Radio buttons and check boxes automatically include a Label property you can use to enter a descriptive label. They are added directly to the page. However, drop-down lists, list boxes, and entry fields require a different method. You will need to add a Text Label from the Test & Survey ribbon. Then use the Label for option within the Text Properties to associate the label with the correct form element.
Since radio buttons, check boxes, entry fields, and other form elements are used to make up the parts of a question, it’s helpful to know which questions can be used in accessible projects. Generally, the question text or question choice will serve as the label for the form control.
The following questions are accessible and require no additional work:
- True/False
- Multiple Choice
- Multiple Response
- Essay
- Short Answer
- Fill in the Blank
- Number Entry
- Rank/Sequence
Remember to place labels close to their corresponding form elements on the page. If a learner is using a screen magnifier, it should be easy to determine which label identifies which form control.
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.
