In my previous post, I talked about online accessibility and the main features an LMS should have so that a knowledge entrepreneur could create online courses for all users. As I mentioned then, your LMS should be compatible with a screen-reader and feature high contrast themes as minimum requirements. However, that is not enough to make your courses accessible.
Creating accessible content is a lot about empathy and renouncing all assumptions. Looking at the WCAG checklist can be intimidating since there are many boxes to tick, especially under the content category.
Yet, we shouldn’t be so easily discouraged — it’s not as hard as it seems. For example, YouTube users have been uploading Closed Captions (CC) for years (even if the company has sadly discontinued this feature), and some tools help you achieve this in a matter of minutes.
How to design accessible e-learning content
Designing accessible content becomes much easier if you have a checklist before or after you design the actual online course. There are small changes to make here and there, depending on the size of your course and how much content there is.
Let’s see what you can do to make your courses more accessible, starting today:
Video and audio files must have a text transcript. Deaf and hard of hearing people will appreciate being able to read a transcript of your audio/video files. It makes for a much better experience when they’re able to watch a video and follow along with a transcript.
Just add the transcript as a file in your LMS and insert it below your video. There is automated transcription software that you can use to transcribe video and audio files quickly.
Describe non-text content
The screen reader also picks up on hidden content such as alt text. For example, when adding an image, you can also add a description for it that won’t appear on screen but will be read aloud for visually impaired learners.
Think about enriching their experience through images. Make the description as accurate as possible. For example, I could write “small girl balloon”, but a better description would be “small girl holding a balloon, smiling”. The same goes for videos, as learners want to know what they’re going to watch before pressing play.
Make use of headings
Headings are great for structuring a text. On a content page, don’t just bold and increase the font-size for the title and subtitles; use the settings in the upper ribbon instead and define your headings.
For example, when they scroll down a content page, heading tags will be read by a screen reader as “Heading 1: Introduction”, “Heading 2: How to do…” etc. The same goes for any other text-based document that you upload.
Offer closed captions
Closed captions are great for following along with a video. There’s an option to add the captions with pretty much any video editing software. You can also host videos on a platform such as YouTube or Vimeo, add the captions, and embed them in your content page.
Just make sure that they are as close to the real thing as possible. For example, describe sounds such as putting a mug down on your desk or birds chirping outside in your captions. This is also helpful for people who, for some reason, can’t follow your videos with the sound on.
Pay attention to section order
The sections and subsections of a course should be logical, so the learner should have zero issues figuring out how the course works. It’s mandatory for all learners anyway, so double check your course flow before publishing anything.
A good tip is to divide content pages into subparts if you have a combination of text and images on one page so the screen reader will accurately read these.
Avoid images of text
Seeing people have no problem reading tables, images with text, graphs, etc., but a screen reader will not read something as simple as this.
In the same way, a screen reader cannot detect a table containing valuable information. The solution is to add HTML markups that indicate header and data cells. The markups will then tell the reader what the table contains, cell by cell. Your content page should be editable in HTML so you can add HTML tables and markups. For more information, check this video tutorial.
Make use of color
Make the color contrast as obvious as you can. Of course, a light grey font on a white background is a no-no, and I’d go as far as saying that it’s annoying for people that don’t have any issues with their vision.
However, there are other ways in which colors can be misused. Let say you have a list of dos and don'ts. Maybe you think that it’s cool to have the dos list marked with green and the don'ts with red. However, the screen reader will not pick up on your chosen color codes, so make sure to label the two lists correctly.
No flashy items
I’d say banish flashy items altogether. You don’t need rolling and moving elements all around your page, including gifs.
However, if you want to include some gifs, make sure that they aren’t too flashy or moving too fast, as they can trigger seizures for those who suffer from photosensitivity. That’s why it’s best to avoid them since you probably don’t want to add “seizure warning” to your lessons.
Adequate anchor text
Even if the underlined links option is enabled on your website, you still need to link to other resources to be as user-friendly as possible. How? Remember this: long and descriptive beats short and general.
“Go here to learn more” is a bad example. Create longer anchor text as a rule throughout your course so all users can see the links, such as “Go here to learn more about creating adequate anchor text.”
Knowledge entrepreneurs have a much higher chance of reaching users of all abilities online. It would be a shame to ignore some of them. Creating accessible content is about offering the best experience you can to all learners, so keep this in mind whenever you start a new project or if you want to improve existing content.