Learn Using Accessible Interactive Elements in Online Learning

Published on January 11th, 2018 | from CAMH Education

Using accessible interactive elements in online learning: Part 1

Continuing our series on technology and accessibility,  CAMH Education’s Anne Simon (LMS administrator, Simulation and Digital Innovation) and the Office of Health Equity’s Erin Lee (communications associate) provide some information, examples and tips on interactivity in online learning. Thanks as well to our guest editor, Gillian Cott.

An interactive element is piece of content that, by specification, may have associated behaviours to be executed or carried out as a result of user or [programmed] interaction. — World Wide Web Consortium

A previous blog post on visual accessibility features in online learning outlined accessibility tools and features available in Moodle, and on most devices, that allow learners to customize visual elements. These elements, such as typography and colour contrast, improve readability in online courses. In this post, we move a step further and present basic interactive elements, specifically links and buttons, while considering accessibility standards.

Basic interactive features you may use for your online course could include the following:


Links are one of the simplest, and effective, interactivity tools in online courses. Links have the ability to seamlessly take the learner to internal and external content, and can take on various forms, including as images. Linked images in online courses commonly appear as a smaller representation of a larger image (see figure 1); examples can include maps and infographics. Adding style (e.g., typography, colour) to links can enhance the learner’s experience, especially if the link style meets accessibility requirements (see figure 2).

Example of alt text and linked images







Figure 1: As illustrated in the example above, clicking on the image takes the user to a page that displays an enlarged version of the image.

Source: Alt text and linked images

Example of link colours using WAC guidelines




Figure 2: As shown in the example on the left, the link uses the recommended accessibility guidelines for link states, specifically by having the link blue or red for normal and hover/active states (respectively).

Source: WCAG 2.0 and link colors


For best web practice, links are used for browsing purposes (e.g., taking the online learner or site visitor from one page to the next) and buttons are used for calls-to-action (e.g., online forms, playing multimedia content).

Using links versus buttons: Accessibility

There have been many discussions in the online user-experience world on the use of links versus buttons. This discussion is complicated when a designer creates a link that is styled to look like a button (see figure 3), and provides the instruction for learners to “click the button.” This can be confusing to learners who use screen readers to accommodate their visual challenges. When the instruction to “click the button” is read aloud by the screen reader, learners with visual challenges will have difficulty finding the button, as the screen reader will identify the button as a link. If an actual button element has been used, the screen reader will recognize and read it as a button.


Instructions: Click the link below to view all courses

All courses


Instructions: Click the button below to view all courses


Figure 3: As shown in the example above, the “before” illustrates a standard link and the “after” is a link styled as a button. This is a problem from an accessibility standpoint because screen readers are unable to recognize links styled as buttons.

Although links and buttons are fundamental features of the web, they are made powerful when following web accessibility guidelines to create interactivity in online learning. We recommend that course development teams always allocate time in their process to test for compliance.

Stay tuned for part 2 where we discuss advanced interactive elements that can be used in online learning!

Tags: , , , , , , , , , , , ,

Posted by

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to Top ↑