Accessible microcopy in images, links, and buttons

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.

Harvard University Center for the Environment Fully Funded Fellowship in  USA - ASEAN Scholarships

alt-text=“Harvard University” 

alt-text=“The New York Times”

Images that are links

Alt text for images that are links should describe the destination.

alt-text=“edX Home”

Images that are buttons

Alt text for images that are buttons should describe the purpose or action of the button.

alt-text=“Menu”

alt-text=“Close”

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 cover

But 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?

 

 

 

alt-text=”Four people raising their hands in celebration”

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


Further work to be done

How can engineering and design partner to ensure that these elements are built properly to increase accessibility for our screen reader users?
Can we add review of these elements formally into our QA process? What do we do today?