Alternatives, contrast and keyboard

Three accessibility requirements: a text alternative suited to an image's role, text contrast (4.5:1 and 3:1) and keyboard navigation (tab order, visible focus, skip link, keyboard trap).

27 cards
5 topics
Free

Study this deck

The outline, topic by topic

Each topic is weighted the way the exam weighs it.

Concepts
Questions
Sort and link
The numbers
Scenarios

A few cards from the deck

Text alternative: what is it?
Show the answer
Text that serves the same purpose as non-text content, for whoever cannot see it: in HTML, an image's alt attribute.
It conveys the function or information, not the looks: for an image link, write where the link goes, not "blue arrow".
Which alt value suits this icon, placed next to the text "Print" inside the same link?

```html
<a href="/imprimer">
<img src="imprimante.svg" alt="?">
Imprimer
</a>
`
- alt=""
- alt="Printer"
- alt="Print"
- No alt attribute at all
Show the answer
alt=""
The link text already says everything: the icon is redundant, so decorative. An alt of "Print" would read "Print Print"; with no attribute, the reader may read out the file name.
On a keyboard, the … key moves forward one focusable element and … moves back.
Show the answer
On a keyboard, the Tab key moves forward one focusable element and Shift+Tab moves back.
Links with an href, buttons and form fields are focusable by default; a div is only focusable if it is given a tabindex.
Decorative image: what is it?
Show the answer
An image that adds no information and serves no function; it is hidden from screen readers with an alt attribute that is present but empty.
alt="" is deliberate: with no attribute at all, the screen reader often reads out the file name ("border-ornament-02.png").

Study this deck