mary.codes

All non-text content must also be available in text that can be parsed by the browser (not images). It can be read, spoken by screen readers, used by Braille readers, etc.

1.1.1 - Non-text Content

alt attribute

Each piece of non-text content should have a text descriptor of some sort either on the HTML tag or associated nearby.

In deciding what text to include in the alternative, it is often a good idea to consider the following questions:

• Why is this non-text content here?
• What information is it presenting?
• What purpose does it fulfill?
• If I could not use the non-text content, what words would I use to convey the same function and/or information?

Decorative, transparent, or images that have no meaning should be given the attribute alt="" so they're not read by screen readers.

Image alt attributes actually help SEO because search engine robots only read text content. However, they should be written with accessibility in mind first.

CSS background images have no way of adding alt text. Because of this, background-image shouldn't be used for any images that convey important information. But it is good for adding decorative images that should be ignored by screen readers, because background images will disappear if CSS is turned off.

Image maps use an img tag with map and area tags. The img gets an alt attribute and so do each of the area tags. The img alt attribute describes the image as a whole, and the area alt attributes explain what clicking each area does.

Combine an image and text inside of a link tag. The img gets alt="" because the text in the link already describes the image.

aria-label

Used to provide a text label for one of the following types of items:

• Interactive elements
• Landmark elements
• Elements that have an explicit widget role
• iframe and img elements

The aria-label attribute will override the alt and label attributes, and may be overridden by aria-labelledby. If the label is visible, use aria-labelledby, otherwise, use aria-label.

aria-labelledby

The aria-labelledby attribute is the id of an element that has a visible text label on the page. It associates existing descriptive text with a non-text element.

This attribute overrides all other naming attributes.

Long description

One way of creating a long description for content that needs more explanation, like a chart or audio transcript, is to put the text adjacent to the non-text element. The alt text for the non-text element will direct the reader to the following text. Having a link immediately following the non-text content that goes to the long description is also acceptable.

img elements have a longdesc attribute that accepts a URL or id that links to a long description of the image content.

Disclaimer:

These are my notes taken as I'm studying the WCAG 2.1 specification. As I've been trying to read and understand the specification, I've been led down links upon links as I've tried to understand the reasoning behind and implementation of various WCAG 2.1 requirements.

I am not an expert. I am the furthest thing from an expert in accessibility, but I wanted to share my notes as I work through the documentation.

I hope to condense all this information into something useful for myself, and to hopefully make it accessible and usable to others. These notes are no substitute for the actual, changing WCAG specification, and may become out of date at some point.