How to make e-learning accessible - design tips and tricks

Design tips and tricks

In Part Two of our three-part series on how to make e-learning accessible, Brightwave's Quality Manager, Seffy, gives some practical tips for designing, writing, developing and testing e-learning.

Thou shalt not convey meaning by colour alone…"

- a stern commandment that we at Brightwave are fond of trotting out at various points during the production lifecycle. Joking apart, it serves to remind us that keeping basic accessibility principles in mind from the start can help avoid problems - for us as developers and for our end-users - down the line.

Surprisingly, some people seem to think that simply adding tooltips to graphics is all that's needed to make a course screenreader friendly. But really, it's down to understanding your audience, good design, and clear writing - sound principles which benefit every learner.

While this blog is no stone tablet, we'd like to pass on some practical techniques and considerations to you.

Skip to section:

1. Navigation and keystrokes
2. Punctuation
3. Visual references
4. Acronymns
5. Screenreader testing
6. Graphics and animation
7. Hyperlinks in text
8. Audio transcripts
9. And ask your learners

1. Navigation and keystrokes:

As well as providing an alternative for non-mouse users (which may include those using laptops with awkward trackpads), keyboard shortcuts can also be interpreted by screen reader users and speech input users.

• Consider this when carrying out your own testing, and try unplugging your mouse. Can you navigate comfortably through the content? Are the shortcuts intuitive so you don't have to keep accessing the Help feature to look them up? Or so that the screen reading software reads them out to you at the appropriate point in the content? Can you tab your way through the content in a logical order, and interact with everything as you're supposed to?


• For navigation buttons, keyboard shortcuts often take the initial letter of the button name as the keystroke in conjunction with the ALT key, for example, ALT+N for Next, ALT+B for Back. Be smart about button naming so you don't end up with clashes within the same screen. (Using ALT+P for both your Print and Previous button won't work, but renaming Previous to Back removes the conflict.)

2. Punctuation:

Different screen readers will interpret punctuation in different ways, and this may also depend on a user's individual settings.

• Most screen readers will interpret full stops and commas appropriately with a drop in tone and pause before the next sentence. It tends to be safest to avoid other punctuation such as colons, semi-colons, hyphens etc. and stick to short sentences separated with full stops. In some cases a screen reader will spell out the punctuation which can interrupt the flow of the content.

• When dealing with reported speech, always use double quote marks instead of single quote marks, as this flows much better when read out:

For example:

Virginia says “Seffy, where did you save the document about accessibility and script reviewing?”

will be read as:

Virginia says, quote, Seffy, where did you save the document about accessibility and script reviewing? unquote.

With single quotes this would be read as:

Virginia says, apostrophe, Seffy, where did you save the document about accessibility and script reviewing? apostrophe.

3. Visual references:

• Try and avoid phrases such as 'Let's have a look at…' or 'Here you can see how…'. Other verbs do the job just as well and are less vision-centric, for example, 'examine', 'consider', 'study', or 'explore'.


• Use content that assumes you can see it sparingly. For instance, where you're asked to look at something and answer a question based on what you see. If you do need to do this, then make sure you offer your learner an alternative way to understand the content. This could be by using an additional popup window with a full description, or by using ALT text effectively to convey any meaning implied by an image.

4. Acronymns

• Be careful with these as they can sound quite wrong with screen readers. (We once had a course where it sounded like the screenreader kept belching, as the acronym for "Information Retention Policy" sounded like "errrp".)

• If you do have to use acronyms, then ensure that the first time they're encountered on the screen they're accompanied by the full phrase in brackets. Sometimes including a space between letters, or full stops, will enable an acronym to be read more meaningfully.

5. Screenreader testing:

• If you're testing with screen reading software, put your headphones on and turn your monitor off. You'll look a bit silly, but it's a great way to test. And if you unplug your mouse at the same time, this test pass can nail any keystrokes issues at the same time.


• If you've developed your courseware properly, you should be able to navigate through the course, completing interactions along the way, and understanding the content. If you can't, ask yourself why and make appropriate changes. You don't have to wait until the course has been developed to check this out either - use a screenreader to read the content in its initial script format, and you'll identify any scripting issues early on.

6. Graphics and animation:

• Avoid graphics which contain a lot of text. If this is essential, then the text should be included in the ALT text (tooltip) which can be read by a screen reader. Be especially careful with tables and charts, as it can be hard to convey the meaning in a tooltip.

• Consider colour blindness and don't rely on colour alone to convey meaning. Making a text button change colour on rollover or selection is fine, but only when used in conjunction with another method of visual styling such as underlining or bolding.

• If you include interactive animations in your content, ensure you can navigate from the main course interface into the animation element using keystrokes, and also that any text contained in the animation can be interpreted by a screenreader.


• Consider epilepsy and avoid flashing/flickering images.

• Animations should always be under user control so the learner can move it on at their own pace and won’t miss content because it is on a timer. Alternatively, if it's a short sequence it's also acceptable to have a simple Replay button at the end.

7. Hyperlinks in text:

• Avoid links which just read ‘Click here’, as these can be hard for a screen reader user to interpret, especially if there are multiple links like this on the same screen. Links work best when they form part of the narrative – for example, "You can visit the Accessibility Standards website now, or access it at any time from the Help section."


• So that your learner doesn't get lost, make sure it's clear when a link opens in a new browser (just add title="opens in new window" into the underlying html).


• If linking to a download, you should always state the type of document and the file size in the display text, for example "Complete the Job application form (PDF, 60kb) and bring it to the office for processing."

8. Audio transcripts:

• Screen background audio should not require a separate transcript, as long as it does not provide any additional content to the screen text.

• For longer audio clips or videos, then you should always include a full transcript which is useful for learners with hearing difficulties and those using screen readers.

• Transcripts should convey meaning as well as just the words, when this is important to the content. Think of these as stage directions.

9. And ask your learners:

• If you're not a regular user of assistive technology yourself, it can sometimes be hard to understand if your content is working well enough or not. Screen reader users are often used to shortcuts and settings that you may not be aware of, and sometimes content that you may think isn't working particularly well is in fact perfectly acceptable to an experienced screen reader user.

• If you know of any learners in your organisation with particular accessibility requirements, it's always worth asking them early on in development to be a test user - sit with them and see how easily they're able to get through your content - or not!

Don't miss Part Three -Making e-learning accessible: The Learner's Experience