Learn Visual Accessibility Features in Online Learning

Published on April 6th, 2017 | from CAMH Education

Visual Accessibility Features in Online Learning

Continuing our series on technology and accessibility,  CAMH Education’s Anne Simon (LMS Administrator, Simulation and Digital Innovation) and Amanda Chan (Project Manager, Enterprise Project Management Office) detail some visual considerations. Thanks as well to our guest editor, Oliver Ho.

Responsive web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.

Smashing Magazine (see post here)

To build online courses that meet our audience’s visual and hearing needs, CAMH Education follows the concept of responsive design. A previous blog post referred to this concept in the context of accessibility in learning management systems (LMS). Today’s post describes tips and tricks for addressing visual accessibilities by using responsive design tools in our Moodle LMS and on most mobile devices.

The following statement illustrates the importance of accessibility. They come from a learner who completed a CAMH course in the Moodle LMS:

“I recently was required to complete training that was offered through the Moodle application. I was surprised to find that the application was available and rendered quite nicely on mobile devices.

This allowed me to complete the course at my own pace (allows you to quickly pick up where you left off) as well as from any location.

I was able to enter the portal at various times (and places) over a weekend regardless of location and efficiently finish the training at my own pace.

The Moodle application succeeded in making training an enjoyable experience.”

Colin Chu, Clinical Application Lead, CAMH


Moodle LMS and its accessibility features

Accessibility tool for Moodle LMS

CAMH Education selected Moodle as an LMS because of its abundance of tools that allow our users to customize the visual and hearing supports and enhance the learning experience. For example, the aptly-named “Accessibility” tool allows users to improve readability on a page by adjusting text size and changing the background/foreground colour contrast, depending on their visual needs.

Accessibility on cell phones and tablets

Most mobile devices have accessibility features built into their settings. For example, here are three that exist for Apple devices (iPhones and iPads):

  • Zoom: Magnify your screen by dragging the box around, just like a magnifying glass. There are also options to add colour filters and adjust the zoom level from 0 to 15% of the actual size.
  • Larger text: Adjust text size by dragging the slider.

Zoom tool in an iPhone

Larger Text tool in an iPhone

  • Display accommodations: Adjust the colour contrast. For example, invert the colours so the background turns dark while the text remains white. Colour blind users can change the colour filters to reduce the intensity of bright colours.

Display Accommodations tool in an iPhone

Display Accommodations > Color Filters tool in an iPhone


To enable these tools on an Apple device, go to Settings > General > Accessibility > and select one of the accessibility tools described above.

Note: Similar features appear on other brands, such as Android.

Combining accessibility features in Moodle and your device

For some users, it can be helpful to use the accessibility tools in a device as well as those in the LMS. For example, enabling “Larger Text” on your device can help someone navigate to a Moodle course, but once logged into the LMS, this accessibility setting no longer applies. This is when Moodle’s “Accessibility” tool comes in handy, allowing users to adjust the text size of the course content.

Online course accessed using an iPhone before using Accessibility tool in Moodle LMS

Online course accessed using an iPhone after increasing text size using Accessibility tool in Moodle LMS

Conversely, some of the accessibility settings in a mobile device maintain their effects within Moodle. Such is the case for “Display Accommodations.”

Online course accessed using an iPhone when Display Accommodations > Invert Color tool is enabled

Online course accessed using an iPhone when Display Accommodations > Color Filter tool is enabled

For these reasons, online learners must be aware of the tools that can accommodate their accessibility needs, and all accessibility tools should be thoroughly tested before launching any online course.

Test course accessed using an iPhone

How would a Moodle course look on your particular device? Try out some of the tips and tricks we described by accessing the following test course using your device’s browser: https://moodletest.camhx.ca/moodle/course/view.php?id=3


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

Posted by

Leave a Reply

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

Back to Top ↑