Accessibility: Describing Elements
Author: Phil Chambers | Screen Readers
I have been experimenting recently with the ability to add additional explanation text to a visual element such as an image with a lot going on. The purpose of this is to improve the learning experience for poeple using screen readers.
The problem
I work with a lot of subject matter experts who send me content for their courses to build on an LMS. Precisely zero of the courses we build are entirely text. They contain images, videos, interactives, and more. With elements like images, we have alternative text, which provides… 100-150 characters.
Hmm. Not too much to work with, is it? What other options do we have?
Using ARIA Attributes
Most of the work I do involves building content on the LMS Canvas by Instructure. There is an allowed list of elements and attributes - some others work but most of them are either ignored or stripped from the code once you click the ‘save’ button.
Luckily for us, Canvas does allow a few of the Accessible Rich Internet Applications (ARIA) which we can use to work our way around the limitations of presenting visual content to learners with the allowed HTML elements.
The set Canvas provides on their allow list document is:
labelledby, atomic, busy, controls, describedby, disabled, dropeffect, flowto, grabbed, haspopup, hidden, invalid, label, labelledby, live, owns, relevant, autocomplete, checked, disabled, expanded, haspopup, hidden, invalid, label, level, multiline, multiselectable, orientation, pressed, readonly, required, selected, sort, valuemax, valuemin, valuenow, valuetext
My current usage
I am by no means an expert on all of these - nor am I certain if this is indeed a full list of compatible attributes. The few I have used on Canvas to date are:
labelledby
Use aria-labelledby to link something to its label later on in the page. The purpose of this is to provide an essential label for the item. For a longer description, use aria-describedby.
<div aria-labelledby="interactive">
<h2 id="interactive">Interactive Element 1</h2>
<p>...</p>
</div>
describedby
Much like aria-labelledby, this attribute links to the id of something for the purposes of describing it. For this example, we will use an image. It is different from aria-labelledby because a description gives users more extended information than a label. This can be done quickly with <span> tags. For example:
<p><img src="yourImage.jpg" aria-describedby="image_desc">
<br>
<span id="image_desc">This is a description of the image. Whatever you put in here is visible to everyone, but this particular section of the text is now linked as the description for the screen reader.</span>
You would then continue on with the rest of the text, giving a more detail, and users who are not using screen readers would just see this a regular paragraph of text.<br></p>
If you wanted to embed an image; a longer description of the image with the aria-describedby attribute like the one above; and then the citation for the image, just add the citation underneath before you close the paragraph tag:
Image from <a href="https://thesite">The source</a>. Copyright, etc etc.</p>
hidden
aria-hidden will prevent the screen reader for reading anything within that element (or parent element). If you have a part of the page that just would not work being read aloud by a screen reader, you can add this attribute to remove it. Just make sure to include something else to make up for whatever you are hiding - or try to find a solution that works for every user.
flowto
This one is interesting because it allows you to suggest an alternative logical reading order for the page based on the id of the element. Use it when the main article or piece of content comes after another piece of content, for specific layout reasons. For example: perhaps you have included a navigation section or element of less importance at the top of the page (that can be glanced at by sighted users).
<h2 id="introduction" aria-flowto="start">Introduction</h2>
<div id="reminder" aria-flowto="end">Weekly Reminder
<p>Your weekly reminder is...</p>
</div>
<div id="start" aria-flowto="reminder">
<p>Welcome to the first part of the course!</p>
</div>
<div id="end">
<p>You reached the end!</p>
</div>
More to explore
There are plenty more that I would like to try on Canvas. Many of these would benefit from being incorporated into code/page templates, or added to a text expander - if you use one - to quickly add accessible attributes to your course pages.