Universal Design and Accessibility

By Administrator

First published on April 30, 2019. Last updated on May 16, 2019.

Good design tends to be accessible by a diverse a range of users, including users with visual and other impairments. This approach is called Universal Design. Further, many schools and organizations require materials to be accessible by all students. While this page won’t cover everything, it will provide some suggestions to improve accessibility.

Color and Contrast

Some students are color blind. They can’t differentiate between reds and greens. So avoid pure red or green, or make the colored content clearly differentiable. For example, instead of using red and green check marks, you could wither use blue or orange ones, or use a different symbol for each case.

Some students can’t read low contrast content. For example, black lettering upon a dark blue background might not be readable. So make certain to include a sufficiently high contrast.

Image Alternative Text

The visually-impaired often cannot perceive images. This can be somewhat mitigated by including a description in the Alt Text field for the media (see the metadata fields for media items in the Media Library). Alt Text should not merely repeat the caption. It should add descriptive information for those who cannot see the image. For example, the alt text for a volcano could be “pointed mountain with smoke puffing out of top”.

Captioning

To help audio-impaired persons, videos should ideally be captioned. There are several services who will do this as well as software that allows you to enter such. An alternative that might be sometimes acceptable is to provide a transcript of the video that includes some description of visual elements.

Captioning can also be very helpful to readers whose primary language is different than that of the speakers in the video, or to those accustomed to a different accent.

Interactive Content

Interactive content, such as embedded or linked Javascript applets, can be a challenge for the impaired to fully use, and often don’t even work in all platforms for any users. You should provide an alternative for interactive content just in case it won’t work for some users.

Responsive Design & Mobile Devices

These days, people view content on numerous types of devices and platforms, from giant monitors to tiny smart phone screens. It can be a challenge to create content that works well with all of the possibilities. This is called responsive design. Steps can be taken to improve responsiveness.

Course.Cafe itself has been tested on various platforms, and has been designed to be somewhat responsive. The layout is designed to display differently on large versus small screens. However, there is still work to do. Course.Cafe will strive to further improve responsiveness.

However, the biggest challenges that you as an author may encounter is that some embedded content itself is not responsive. You can sometimes improve responsiveness through the following measures:

if an image, try setting a smaller image size.
if a video, try a different video window size.
sometimes scroll bars can be turned on for special content
iframe (shortcode) can sometimes give you control over embedded media that can’t be obtained otherwise.

Also, obviously some content will not display well (or at all) in a PDF (especially when read offline), or when the PDF is printed on traditional paper. Please see Optimizing For Print or Display to improve content for PDF and print responsiveness.

Authoring With Course Cafe