Find your portal

How to create accessible e-learning design

In a recent post I touched upon the subject of designing for accessibility in e-learning. The things is, there are millions of people out there who are living with some sort of disability, and they all should be able to access online learning content the same as everyone else. But not all web pages are created equally, and many students with disabilities are suffering in silence, even if the shouldn’t.

Just because someone is color-blind, has a hearing impairment or needs a wheelchair to move around, it doesn’t mean that they are unable to learn or can’t achieve stellar academic results. That’s why international web standards exist — and should be followed — and that’s why there are laws protecting their rights.

So if you are creating any type of learning content that is delivered to students through a screen — whether you do this all day every day or only once in a while — you should know that accessible e-learning design is simply good design. If you pay attention to accessibility principles when designing online courses, healthy students won’t even notice it, while this could mean the world to someone living with a physical disability.

I invite you to read the post in its entirety to learn more about the laws and standards, as well as about the basic principles of good online design.

And now we’ll move on to a few down-to-earth, specific tips on how exactly to create online learning content so that all students could access it easily.

How to create accessible e-learning design

The first thing to keep in mind is that it’s way easier to follow and implement accessibility guidelines and principles when creating from scratch online learning materials for courses rather than do this later. But in the end, later is better than never.

There are three big categories of physical disabilities and this post is structured around them:

  • Visual-related disabilities. These include: total visual impairment, partial visual impairment, photosensitivity, color-blindness, and the list goes on.
  • Hearing-related disabilities. These include: total hearing impairment, partial hearing impairment, and other auditory processing disorders.
  • Mobility-related disabilities. Not all of these can affect the learning process, but limited mobility of hands can hinder users’ experience online.

Let’s take these one by one:

Addressing visual-related disabilities when designing e-learning


Pay attention to the colors you use in the learning materials you create. Don’t choose too bright or too shady colors, limit their number in a combination, and remember you still need contrast. A lighter grey on top of a darker gray may blend in seamlessly in the eyes of a visually impaired or color-blind student.

When in doubt, remember the rainbow: if you put all main colors of the rainbow in a circle, red sits opposite to green, blue sits opposite to orange, and yellow sits opposite to purple. these color combinations will never fail you. For more tips and tricks on how to get the right colors for your online learning materials, check out this post.

But the most important thing you should remember when creating accessible online courses is to avoid flashy or rolling items like the plague. These can trigger seizures to people with photosensitivity. This doesn't happen every time, but it can happen. If flashing items are inevitable, at least try to add a layer that gives control to the learner — they should be able to choose if they want to see it or not.


Be careful with the fonts. Sans-serif fonts may be your best friend because they are clean and have been developed to render well on screen. In this post I explain the difference between serif and sans-serif fonts and offer more tips on how to identify fonts and how to choose the best combination of fonts for your online course.

Besides this, you should pay attention to the font size and thickness. A hairline-type font is very thin compared to the regular thickness of the same font, not to mention its bold variant. Also, the same size in pixels may not correspond between two fonts, as some are smaller than others.

Your online learning content should have an easy to read font, with as less flourishing as possible, that behaves well on all screen sizes. Students with partial visual impairment may only need a zoomed-in version of the page with the learning content. If the font is too thin or too small, when the page is zoomed-in, it will be blurred. Regular sans-serif fonts like Arial or Helvetica don’t really have this problem.

Accessibility and SEO

Perhaps your online courses are only yours and your students’ to see and access, but if you want to share them with the world wide web, you need to optimize your web pages so that more people can find them. Quite a few SEO best practices can also be found under the umbrella of accessibility design, so if you follow them, you kind of shoot two birds with one stone:

Add headings and make them descriptive. Using headings throughout text is a great way to identify and structure the text, for both human users and for indexing bots as well. For example, if you create a simple Google Document, don’t just bold and increase the font-size for the title and subtitles, but use the settings in the upper ribbon instead. Many visually-impaired people use screen readers or other forms of assistive technology to navigate web pages, and heading tags are easier to interpret by such technology.

Add the alternative text for each and every image and make them descriptive as well. The “alt” tag is also captured by screen readers and users can easily understand what a picture is about even when they don’t see it perfectly.

If you are using menus, try to avoid drop-down lists. Screen readers are not that advanced and can’t always catch them.

When linking to other learning resources or web pages, make sure the anchor text is also descriptive. “Click here” is not descriptive.

Addressing hearing-related disabilities when designing e-learning

People that only suffer from hearing-related disabilities are able to read perfectly well. So the obvious solution is to offer audio learning materials in text as well.

All audio content should be transcribed, and the corresponding transcriptions should be easily accessible right near the audio file. Healthy students will check the transcription only as a preference, while students with hearing impairment will get the information in the only way they can process it.

Likewise, all video content should have its own transcription, in the same location. What’s more, you can add subtitles to videos, even if the language in them is the native language of students. Perhaps, the video itself is low-quality, perhaps there is noise surrounding a student when accessing the video, perhaps a hearing disability prevents the student to catch all words and make meaning of the video. Subtitles make all these problems disappear. Also, make sure they are synchronized with what happens in the video.

One thing that is not particularly related to designing accessible e-learning but it still is worth mentioning, is that you as an instructor could let every student know that they can contact you in more than one way. Maybe you prefer face-to-face meetings or phone conversations, but hearing impaired students will definitely go for the email or chat options — where they can write, and not make any effort hearing what you have to say — if they have them.

Addressing mobility-related disabilities when designing e-learning

The following tips are all related to the limited mobility of hands some people struggle with when using a computer. Moving a mouse requires almost no effort whatsoever from a person with no motor disability. But it can be a serious hurdle for someone struggling to control their hands.

So make sure users can navigate through the course with both mouse and keyboard. The Tab key can do wonders for someone in need. Keyboard shortcuts for copy and paste and other actions may save seconds for healthy students, and plenty of minutes and nerves for students that can’t control the mouse properly. Media players should also be manipulated through both mouse and keyboard.

Last but not least, make a habit to create longer anchor keywords whenever you want to add a link in a text. Here’s an example: Find more information about anchor text here. Here’s another example: Check this article if you want to know more about anchor text. Always go for the second option. Always. It’s way easier to click on the longer and descriptive link that on the short and general one. Your students will thank you for this.


Creating accessible e-learning design is the same as creating good e-learning design. All students should be able to access it easily.

If you follow the above tips and guidelines, all your students, no matter their physical state, can learn what you teach. If you don’t, healthy students will mumble but will get over it, but students with various physical disabilities aren't that lucky. But why shouldn’t you follow these easy-to-implement tips?

Remember, small adjustments can make a huge impact.