Accessible microcopy in images, links, and buttons
- Adam Butterworth (Deactivated)
This content is translated from Carla Duarte’s presentation, Microcopy and Accessibility
Most of these examples may be simple and self explanatory. These simple scenarios can be, and usually are, left up to engineers because engineers are expected to have a basic understanding of accessibility requirements.
Some examples are a bit more complex, and can potentially be detrimental to the accessible user experience if handled poorly.
In either case, there is a concern regarding consistency (tone, tense, vocabulary, etc.). Thus, the need for microcopy guidelines and a partnership with the design team to get it right for our users!
General rules of thumb for images
All images must have alt text
Alt text should be less than 250 characters
Avoid “Image of” or “Graphic of” because screen readers will state the image’s role on the page
Logos
Alt text for logos or other images with text can simply be the text within the image.
 |  |
|
|
Images that are links
Alt text for images that are links should describe the destination.
|
Images that are buttons
Alt text for images that are buttons should describe the purpose or action of the button.
|
|
Semantic Icons
A semantic icon is an icon used to convey meaning.
Example: A green check mark means complete, while a gray check mark means incomplete. A blind user would not have this context, so their experience would be different than that of a sighted user.
Solution: Include screen reader only text (sr-only) to describe the scenario. In this scenario, the text would read “Incomplete assignment, How Unconscious Bias Affects Work (1 Question)”
It is important to be aware of where sr-only text is placed.
Example: In this scenario, the text would read “Incomplete assignment, How Unconscious Bias Affects Work (1 Question).” Something to consider is that screen reader users tend to tab through links quickly to find what they want. At a fast pace, the page might sound like “Incom-, Comple-, Incompl-, Inc-” (i.e. increasing the time it takes for the user to hear the assignment title, causing frustration)
Solution: Lead with the assignment title, and follow with the status of the assignment through sr-only text. The page would then read “How Unconscious Bias Affects Work (1 Question), incomplete assignment.”
Decorative Images
Example |
Mickey Spillane, American thriller writer, master of 'hard boiled' style and best-known for his private detective Mike Hammer. Of the thirteen Hammer novels, it is the 1950 'My Gun Is Quick that remains my favourite. |
The empty alt string seems logical, whereas <alt="bullet"> would add nothing meaningful. But deciding on alternative text for this next example might prove to be a little trickier… Realistically, I could use any of the following selection of alt attributes;
1. My Gun Is Quick
2. My Gun Is Quick by Mickey Spillane
3. My favourite book is My Gun Is Quick by Mickey Spillane
4. The My Gun Is Quick book coverBut here too, I part company with the W3C and I lean towards using an empty alt string. None of the above choices will enhance a non-visual user's understanding of my content and using alt text in this instance will slow down a screen-reader user's progress through my document. However the W3C does allow for this view when it says,
... any page element that needs to be described fully to a visitor who can't actually see it.
Andy Clarke
https://stuffandnonsense.co.uk/archives/accessible_alternatives.html
Other non-text Imagery
The W3 has more specific examples of images or content that qualifies as “non-text.” https://www.w3.org/WAI/WCAG21/Understanding/non-text-content
We might argue that knowing what this image is enhances the user experience. We’d probably want to consult with Jeff Witt on this, but would this fall on design or engineering?
|
|
|
|
Links
Screen readers tend to navigate the page by focusable elements, so it is important to consider the text of the clickable link element. (Note: Text that is underlined in this presentation will represent a clickable link element)
Avoid “Click here to register for Intro to Computer Science”
Instead, try “Register for Intro to Computer Science”
“Read more” links can be handled differently. Here’s an example to understand why: https://a11y-style-guide.com/style-guide/section-general.html#kssref-general-read-more
Note: Styling here is not the concern. The concern is around the clickable element. While not necessarily ideal, developers could technically style the first scenario to underline the words “Click here”, while wrapping the entire phrase in a link element. To sighted users, the underline may be more visually appealing. The mouse would also be able to click on any part of that sentence (impacting hover state behavior as well). To screen reader users, they would still get the full context.
Specific examples from W3:
A link contains text that gives a description of the information at that URL
A page contains the sentence "There was much bloodshed during the Medieval period of history." Where "Medieval period of history" is a link.A link is preceded by a text description of the information at that URI
A page contains the sentence "Learn more about the Government of Ireland's Commission on Electronic Voting at Go Vote!" where "Go Vote!" is a link.Both an icon and text are included in the same link
An icon of a voting machine and the text "Government of Ireland's Commission of Electronic Voting" are combined to make a single link. The alt text for the icon is null, since the purpose of the link is already described by the text of the link next to the icon.A list of book titles
A list of books is available in three formats: HTML, PDF, and mp3 (a recording of a person reading the book). To avoid hearing the title of each book three times (once for each format), the first link for each book is the title of the book, the second link says "PDF" and the third says, "mp3."News article summaries
A Web page contains a collection of news articles. The main page lists the first few sentences of each article, followed by a "Read more" link. A screen reader command to read the current paragraph provides the context to interpret the purpose of the link.
https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context
Buttons and links
Buttons will generally follow the same pattern as links. The more context in the button text, the better. We can also add screen reader only text within a button to continue an explanation of the action being taken.
Link without sr text <button>
Configure
</button> | Link with sr text <button>
Configure
<div class=”sr-only”>
edX discussion forum
</div>
</button> |
Additional Resources
This is a comprehensive checklist for a variety of web accessibility elements:
https://media.dequeuniversity.com/public/en/docs/deque_web_accessibility_checklist.pdf