How to create accessible content

This post was originally posted on Remote Teaching Resources as part of an EDCI 565 assignment. It was co-written with Joanna Lake.

Despite the fact that we all spend a lot of time living in a digital world, we’re taught rather little about digital accessibility. As a result, some digital content (websites, blogs, PDFs, Word documents, videos, etc.) is inaccessible.

This blog post contains videos that allow able-bodied educators to experience various barriers to accessibility, accessibility guidelines to mitigate each barrier, and a downloadable “Accessibility Checklist” for educators.

>> Download our Accessibility Checklist for Educators (PDF) <<

Accessible Images

Images can add a lot of value to digital content. Not only can they add visual interest, but they can also convey information and enhance comprehension for students. However, it’s important to ensure that all students can gain value from the images you choose to use. The following video (1:26) demonstrates how inaccessible images may appear to some students.

Alt-Text

If your digital content includes images, make sure you have written alt-text for all images displayed. On the internet, adding alt-text is almost always an option you are presented with when uploading a photo (and this includes on social media!).

  • Avoid starting your alt-text with “a picture of,” as the audience will already be aware that it’s a picture being described.
  • Your alt-text should describe the image in a way that helps your audience understand the purpose of the image. For example, your alt-text for a photo of a panda bear eating bamboo, may differ depending on context.
“Panda bear” may be appropriate alt-text if the image accompanies a short description of pandas on a website about animals native to Asia.
“Panda bear eating bamboo shoots” may be more appropriate alt-text if the image accompanies a description of what pandas eat.

Image Quality

Ensure that you are using high-quality images. Test your images before including in your resource to ensure they will not become pixelated when enlarged.

GIFs

GIFs have exploded in popularity over the past few years, and can add some fun and flair to digital content. However, if not implemented with care, GIFs can cause seizures and other responses for photosensitive individuals, such as those with epilepsy.

  • Set GIFs to stop or pause after five seconds. This allows students to experience the GIF, but eliminates constantly changing imagery. This helps photosensitive individuals, but also eliminates ongoing distractions for everyone!
  • Include alt-text with all GIFs, following the alt-text guidelines outlined above.
  • Avoid GIFs with lots of blinking and/or flashing lights and colours.

Accessible Multimedia

As multimedia, such as video and audio podcasts, become more popular in the classroom, it’s important that we ensure steps are being taken to make media accessible to all.

Video

As video has both visual and auditory elements, it can present a number of accessibility barriers for students. The following video (1:37) demonstrates how videos may appear to some students.

If you are creating a video, make sure your video has captions. If you are showing a video (in a class, for example), make sure you turn on the captions for the people watching.

  • If you’re hosting your video on YouTube, the platform will automatically caption your video (which is super convenient). However, they don’t input punctuation, and they’re not always 100% accurate, so you will need to go in and make edits.
  • Make sure your captions line up with the timing of the audio. It can be very confusing and jarring if the captions and audio are out of sync.
  • Make sure you caption all audio, not just dialogue. Other sounds that are relevant to the video should be noted in the caption as well (e.g. clapping, a ringing phone).
  • Don’t set video to auto-play. People who use screen readers navigate content by listening, and sound playing while the page loads will interfere with the user experience. Autoplay can also be problematic for people interacting with your content in public spaces.

Audio

Students who are deaf or hard of hearing, or students who are English language learners, may find audio content, such as podcasts, inaccessible to them. The following video (1:15) demonstrates how audio may present itself to some students.

If you’re creating content in an audio format, such as recording a podcast, it’s important to keep the following accessibility considerations in mind:

  • Include a transcript along with the audio. This will allow students who are deaf or hard of hearing to enjoy your content, and will also allow all students to skim the content, or use the search function, if they want to revisit a certain part of the podcast.
  • Audio should be clear, set at a consistent volume, with minimal to no unnecessary background noise 
  • Audio should never be set to autoplay, as users using screenreaders navigate content by listening, and sound playing while a page loads will interfere with their experience. 

Accessible Text

Text is a common way that information is conveyed to students, whether it’s through worksheets, notes on a subject, web pages or blog posts. The following video (1:50) demonstrates how some students might experience text-based content.

Headings

First and foremost, use headings to break up your text. This helps everybody. Headings allow people to quickly skim your content. They also allow people using screen readers to easily navigate your content.

  • Headings are not created by making text bold, capitalized, or underlined. You need to use the text styles and tags. In any word processing software, the text styles are generally found in the top ribbon. When creating content on websites and blogs, the text styles can generally be found in the top ribbon of the editor as well.
  • Heading 1 is generally used only once in a document/post, and that’s for the title.
  • Don’t skip heading levels. If your section header is heading two, then your sub-section should use heading three, and so on.

Hyperlinks

Hyperlinks are abundant in the digital world, and quite frankly, they’re super helpful when done in a way that is accessible.

  • The text of your hyperlink should be written in a way so that you can read only the hyperlinked text, and still understand what you’ll find behind the link. Hyperlinking phrases like “click here” or “learn more” should be avoided.
  • In general, don’t hyperlink a full URL. Typically, they aren’t fun to read and don’t always provide a good indication of what you’ll find. There are times when hyperlinking a full URL is valid, but use it sparingly.
  • In general, don’t set your hyperlinks to open in a new window or tab. They should be set to open in the window/tab you are currently in for several reasons:
    • Novice web users may not realize that a new tab has been opened, or might have difficulties switching between multiple open tabs. This difficulty is often enhanced when using a mobile phone.
    • For those who rely on assistive technologies like screen readers, links that open in new tabs can be disorienting and break up navigational flow for the user. 
  • For hyperlinks that link to non-HTML content, such as a link to a PDF, Word document, or PowerPoint presentation, indicate the content type within the hyperlink text.

Colour & Accessibility

We all like colour, because it makes things pretty. However, colour doesn’t always make content accessible.

  • When using colour, make sure the colour-contrast between the foreground and the background is high (i.e. between the text and the background). This doesn’t just mean make sure you can easily read the text; use a colour-contrast checker to double-check that everyone will be able to easily read the text.
  • Colour can be very stimulating for those with sensory needs. While colour can certainly add value to content, be careful about overusing colour, or using too many different colours within the same piece of content.
  • When using colour for interactive elements, make sure you include alternative indicators such as underlining or asterisks. Don’t rely solely on the colour to indicate it’s an interactive element.
  • Avoid using red-on-green and green-on-red when creating content, as the two colours will be indistinguishable for those with red/green colourblindness. 

Featured image, accessibility checklist and all videos were created by Nicole Crozier and Joanna Lake

Nicole Crozier

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back to top