WCAG Guideline 1.1: Text Alternatives
Today’s episode focuses on the first and an extremely important guideline of WCAG, “Text Alternatives,” and shares some useful HTML tips for developers.
A lot more on the subject can be found in the following resources:
Enjoy your read!
Under the WCAG principle “Perceivable,” this guideline ensures that for all non-text content (i.e., visual and audio) in a web document, text equivalents are made available.
Why is text so important?
The power of electronic text lies in its capacity to be rendered reliably in all other sensory formats relevant to web interaction (i.e., visually by text viewers or print, auditorily through synthesized speech, or tactilely by braille displays for example).
The following sections provide a few essential techniques for meeting this guideline.
Never omit the ‘alt’ attribute
Treat the alt attribute on the HTML <img> element as mandatory. For images that convey important information, provide a short, sufficiently descriptive text. For decorative images however, provide an empty string.
Wrong (No alt attribute):
<img src="bg-pattern.png" />Correct (alt attribute with empty value, for a decorative image):
<img src="bg-pattern.png" alt="" />Example of an informational image:
Wrong (Insufficient description):
<img src="dogs.jpg" alt="Dogs" />Correct (Sufficient description):
<img
src="dogs.jpg"
alt="Two shepherd dogs trotting in a green field. The older one has a long branch in its mouth."
/>Label your buttons!
As buttons are interactive elements engaged to perform useful actions, they must have an accessible name, especially icon buttons! Otherwise screen reader users will only hear “Button,” and will have no idea of its function.
Wrong (No accessible name):
<button type="button" class="btn-icon">
<i class="fa-solid fa-bars"></i>
</button>Correct (Labelled with aria-label):
<button
aria-label="Menu"
type="button"
class="btn-icon"
>
<i class="fa-solid fa-bars"></i>
</button>Alternatively (Visually hidden text element provided):
<button type="button" class="btn-icon">
<i
aria-hidden="true"
class="fa-solid fa-bars"
></i>
<span class="fa-sr-only">
Menu
</span>
</button>Looks complicated? It’s not so much. We will look more into ARIA attributes and accessible names in later episodes.
Meanwhile, you can check out the resources provided in the caption for more information and techniques to meet this guideline.
I’ll leave you with a quote from the official HTML specification about alt attributes:
One way to think of alternative text is to think about how you would read the page containing the image to someone over the phone, without mentioning that there is an image present. Whatever you say instead of the image is typically a good start for writing the alternative text.
Up next…
Continuing the series, we will be looking at the next guideline, “1.2 — Time-based media,” in the upcoming episode. Stay tuned!
Stay tuned for more!
Thanks for reading! Found this helpful? Be sure to leave a like and share!
Social accounts:
This article was written as an accessible alternative to the post shared on my LinkedIn account.
