The essentials of digital accessibility - Taking Orientation Online

Laptop open on a wooden blank table next to a cell phone, notebook, and water glass

A version of this post was initially co-written with Joanna Lake for an EDCI 565 project

I learned a ton about digital accessibility throughout the process of designing UVic’s Pre-Arrival Program, and one of the key lessons is that designing with accessibility in mind is much easier than having to retrofit or provide alternate materials later! So here are a few things to keep in mind.

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. Text-based content must be set up correctly in order to maximize its accessibility.

Headings

First and foremost, use headings to break up your text. This helps literally everybody. Headings allow people to quickly skim your content, understand the structure, and see how things connect. For people using screen readers, headings allow them to easily move from section to section.

Headings must be created using the text styles and tags within your word processing software or the WYSIWYG editor of your website or learning management system. Headings are not created by making text bold, capitalized, or underlined.
Heading 1 is generally only used once in a document/post, and that’s for the title (unless, or course, there is a specific text style or tag 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 can be super helpful to provide students with additional content, or content in a different format. There are a few tips and tricks for creating accessible hyperlinks.

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. It can also be helpful to indicate that a hyperlink links to a video, if that is not already clear within the text.

Additional resources for accessible text

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, including those with visual impairments.

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

Alt-text

All images used need to have alt-text that describes the photo. The alt-text will be read aloud by a screen-reader, and will also show up if the image is unable to load.

Alt-text should describe the image in as much detail as required for a visually impaired person to achieve the goal of the image. Prioritize important details, and leave out any fluff that doesn’t enhance the experience.
Avoid using flowery language. Focus on describing the physical aspects of your image, and use plain language.
Avoid starting your alt-text with “a picture of” or “an image of,” as the audience will already be aware that it’s a picture being described. I will, however, often start the alt-text of a graphic or a screenshot with “graphic of” or “screenshot of,” as that adds additional information not already provided.
Keep your alt text as short as possible. People generally don’t need a novel!
Use proper names when it’s a well-known person, place, or thing, or if the proper name is part of the context of the overall content.
Avoid using acronyms

Infographics

Infographics have become a popular way of conveying large amounts of information, but can be quite inaccessible to users with a visual impairment. The text written on an image, often called flattened text, cannot be read by a screen reader. It’s almost impossible to write alt-text for an infographic that accurately captures all the information portrayed. The best approach would be to avoid infographics altogether, but if you feel you must use the format, consider breaking the information up into multiple smaller graphics instead of combining it in one large graphic (think presentation slides, or an Instagram carousel post). This way, alt-text can be written in smaller, bite sized pieces.

GIFs

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

All GIFs also require alt-text, and should follow the guidelines outlined above.
Set GIFs to 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!
Avoid GIFs with lots of blinking and/or flashing lights and colours

Additional resources for accessible images

Accessible video

As video has both visual and auditory elements, it can present a number of accessibility barriers for students. Videos should always be captioned.

If you’re hosting your video on YouTube, the platform will automatically caption your video, which is incredibly convenient. However, they don’t input punctuation, often don’t correctly capture names of places or people, and in general, are rarely 100% accurate. You will always need to edit the automatically generated captions.
Make sure your captions line up with the timing of the audio. It can be very confusing and jarring if the captions are audio are out of sync if someone is choosing to refer to both.
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, such as clapping or a ringing phone.
Do not refer to things being shown on screen without explaining them. Avoid saying phrases like “as you can see here,” as some of your audience may not be able to see what you are referring to, and will miss out on what you are trying to convey.
Don’t set a 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.
In any text that introduces the video, it can be helpful to indicate the length of the video, so that those using a screen reader can know what to expect.

Additional resources for accessible video

Accessible audio

Students who are deaf or hard of hearing, or students who are English language learners, may find audio content, such as podcasts, inaccessible. If you’re creating content in an audio format, 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 access 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, and have minimal to no unnecessary background noise.
Audio should never be set to autoplay.

Accessibility and colour

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 that 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 (like buttons), don’t rely solely on the colour to indicate it’s an interactive element. Include alternative indicators such as underlining or asterisks.
When creating graphs or diagrams, don’t rely solely on colour to distinguish between data points. Change patterns, textures, and other elements as well.
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 (sorry, Christmas).

Additional resources about using colour

Accessible interactions

When designing learning activities, it’s likely that some of them are going to require interaction. You may have students answering multiple choice questions, selecting from a dropdown menu, drag-and-dropping to match different items or reorder items, and more. It’s important that all of these interactions are accessible, which often means that you need to be able to complete the task using just a keyboard.

Ensure that any interactive activity you create can be completed using just a keyboard. Not everyone has the dexterity to use a computer mouse, and people using screen readers navigate using their keyboard.
Ensure that the clickable area is fairly large, and easily distinguishable from adjacent clickable areas. People with limited dexterity may struggle if the clickable area is small.
Keep in mind that drag-and-drop style activities are often (although not always) inaccessible to folks using a screenreader. If you can come up with a different activity type, that’s ideal. However, sometimes a drag-and-drop style activity best meets the learning outcomes. It’s possible to create an alternative activity for folks using a screenreader; just make sure that you give the option for users to choose that activity before they begin to navigate the main activity.

Featured image by Bram Naus on Unsplash