Guidelines for creating accessible and inclusive web content for teaching and learning

 
Print Friendly, PDF & Email

View these guidlines in a modifiable format

When developing online content for teaching and learning it is essential that the content be presented in such a way as to make it as accessible as possible to persons with disabilities and learning differences.

In some cases, persons with identified learning differences will have access to assistive technologies for engaging with online content. They may also be versed in how to set their web browser in order to accommodate their needs. Nevertheless, there are some steps that should be considered when presenting teaching and learning content online to ensure that the accessibility of the content is maximised.

This Web Accessibility Quickguide offers a basic overview of ways in which you can make your online teaching and learning content accessible – with a particular focus on the use of digital media (images, audio, video and animation). The guidelines are based on the minimum recommended requirements (Level A) of the Web Content Accessibility Guidelines (WCAG) 2.0, which cover a wide range of recommendations for making Web content accessible.

For more detailed information about the WCAG 2.0. Visit: http://www.w3.org/WAI/WCAG20/quickref/


Accessibility when using digital media

Recommendation: All non-text content such as images, audio and video/animation should have a text alternative

Images

If you are using images in your online teaching and learning materials you should ensure that the images are tagged with text information – usually a title and a description and sometimes ‘Alt’ text. This text information can then be read by a screen reader for the visually impaired. It is important that the information clearly describes what the image shows.

A Blackboard example

When embedding and image in a Blackboard page add an image description and a title where prompted.

image alt text

A non-Blackboard example

In this instance, text information about the image has been added where appropriate

wordpress image alt text

Audio

If you are using audio recordings in your online teaching and learning materials:

1. You should include a transcript of the audio for the hearing impaired

See the example at: http://celt.our.dmu.ac.uk/effective-practice/elt-case-studies/using-audio-feedback-to-students/

2. Ensure that there are controls by which the user can pause the playback

3. Ensure that there is a volume control

For example

audio controls

Most online audio playback plugins have default pause/play controls and volume controls.

Video

If you are using videos or animations in your online teaching and learning materials:

1. You should include a transcript or captions for the hearing impaired

For an example of a video with a separate transcript see: http://celt.our.dmu.ac.uk/effective-practice/elt-case-studies/audio-recording-lecture/

For an example of a video with integrated captions see: http://celt.our.dmu.ac.uk/example-of-video-transcript/

2. Ensure that there are controls by which the user can pause the playback

3. Ensure that there is a volume control

For example

video playback controls

Most online video playback plugins have default pause/play controls and volume controls.

Other considerations when using time-based media (audio or video/animation)

  • If your audio or video contains spoken text with background music – ensure that the background music can be muted separately to the spoken text, or that the background music is at least 20db below the level of the spoken text.

In this example the background music is too loud making the spoken text difficult to understand

In this example the background music has been reduced to 20db below the level of the spoken text

 

  • Be mindful of not using video for teaching and learning in such a way that makes it difficult for a visually impaired person to achieve the same learning outcomes (as a non-visually impaired student) just by listing to the audio soundtrack of the video.

Other general recommendations and guidelines

  • For text, ensure that colour is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

For example – try to avoid this kind of thing:

The use of red text in the following paragraph indicates the key themes. The use of green text indicates the key argument.

Etiam sit amet ornare arcu. Praesent eleifend neque orci, id consectetur augue viverra ut. Mauris dictum lectus augue, a consectetur metus ornare nec. Maecenas tempor est in libero ultrices, ac pretium erat porttitor. Sed vulputate nibh dapibus vehicula finibus. Maecenas tincidunt lorem tortor, eget vulputate nisl gravida eget. Fusce id interdum odio. Vestibulum pellentesque vitae tellus ac faucibus. Donec sit amet ipsum quam. Integer dapibus ornare purus, aliquet efficitur massa cursus eu. Sed lacinia varius egestas. Nunc tincidunt ornare consectetur. Praesent sed purus iaculis, porta neque in, scelerisque nisi.

  • Try to limit the use of coloured text and coloured backgrounds.

For example – avoid this kind of thing

Etiam sit amet ornare arcu. Praesent eleifend neque orci, id consectetur augue viverra ut. Mauris dictum lectus augue, a consectetur metus ornare nec. Maecenas tempor est in libero ultrices, ac pretium erat porttitor. Sed vulputate nibh dapibus vehicula finibus. Maecenas tincidunt lorem tortor, eget vulputate nisl gravida eget. Fusce id interdum odio. Vestibulum pellentesque vitae tellus ac faucibus. Donec sit amet ipsum quam. Integer dapibus ornare purus, aliquet efficitur massa cursus eu. Sed lacinia varius egestas. Nunc tincidunt ornare consectetur. Praesent sed purus iaculis, porta neque in, scelerisque nisi.

 Always try to use black and white, or hues of black and white (e.g. dark grey/light grey) for text and text backgrounds.

  • Ensure that any web pages on which you are presenting content can be changed via the web browser such as:
    • altering the contrast, brightness and background colour
    • text can be re-sized/zoomed
  • Do not design content in a way that is known to cause seizures. In particular the use of content that flashes. As a recommendation, web pages should not contain anything that flashes more than three times in one second.
  • When creating hyperlinks ensure that there is a title given for the hyperlink. For example – hover your cursor over this hyperlinkIn Blackboard when creating hyperlinks in pages you can add a title in the hyperlink editor window

    blackboard hyperlink
    This is how the hyperlink appears in Blackboard when the cursor is hovered over the link

    blackboard hyperlink


General accessibility information concerning Blackboard

Blackboard is configured in such a way as to present its basic content in an accessible format.

However, one thing to be aware of is when using the Mashup function to embed YouTube videos in a Blackboard page, as there is no transcript or subtitles automatically provided with the video.

YouTube does have an automated subtitling system that can be activated by toggling the Subtitles/CC button when viewing the video in the YouTube site.

toggle youtube captions

importantHowever, be aware that the automated subtitling in YouTube is not always accurate. Some YouTube videos have manually added accurate subtitles, whereas others haven’t and have left it up to the automated system.

A brief note about online assessments

If you are using summative or formative online tests or quizzes which include images, video, animation or audio, you must ensure that any questions that include such content can be presented in an accessible and inclusive format. No particular student(s) should be advantaged or disadvantaged in their ability to access and complete the test to the best of their ability. This may require creating an alternate test for any students on your module who have an identified learning difference. Academic staff are advised to consult with their Faculty Disability Co-ordinator if there are students on their module with identified learning differences that may require alternate assessment formats.


This document has been created in reference to the Web Content Accessibility Guidelines (WCAG) 2.0