Do not let text alternatives fall out of date
F20 is a documented failure filed under two rules, non-text content and name, role and value, so it covers stale alt text and stale accessible names alike. The test is one sentence and worth memorizing. If the text can no longer be used in place of the content without losing information or function, it has stopped being an alternative. Nothing about that turns on scripting. Three shapes produce it. A chart image updated to October with alt text still describing September. Home page photographs rotating daily while their alt text stays put. A script swapping an image source and leaving the alt attribute behind. The first two need no JavaScript at all, and they are what ordinary marketing sites produce, which is why a code review never finds them.
How we find it in an audit
Reviewers interact with every dynamic image and every icon control and listen to what the name becomes. A play button that still says Play after playback started is the same failure as a stale chart. Then we go at it from the other direction, comparing alt text against images that get replaced on a schedule, which is a content job rather than a code one. Automated tools see one moment in time and can confirm alt text exists. Whether it is still true is a question about two moments.
How affected users experience it
The cruelty of this failure is that it looks like it works. There is alt text. It is descriptive, it is well written, and it belongs to an image that is no longer there. A blind reader gets September's numbers presented as October's and has no reason to doubt them, because nothing sounds broken. On a control it costs an action rather than a fact. The button says Play, so they press it, and the thing they were listening to stops.
Passes vs. fails
Passes
slide.src = slides[i].url;
slide.alt = slides[i].description;
// The same edit that changes the picture changes the words.Fails
slide.src = slides[i].url;
// slide.alt still describes slide 1, three slides later.How this gets tested
The W3C publishes test rules that define what a checker looks for here.
- Element marked as decorative is not exposedA tool can check this
- Image accessible name is descriptiveA tool finds candidates, you decide
- Image button has non-empty accessible nameA tool can check this
- Image has non-empty accessible nameA tool can check this
- Link has non-empty accessible nameA tool can check this
- Object element rendering non-text content has non-empty accessible nameA tool can check this
- SVG element with explicit role has non-empty accessible nameA tool can check this
- Image not in the accessibility tree is decorativeA tool can check this
- ARIA attribute is defined in WAI-ARIAA tool can check this
- ARIA state or property has valid valueA tool can check this
- Element with role attribute has required states and propertiesA tool can check this
- Form field has non-empty accessible nameA tool can check this
- Role attribute has valid valueA tool can check this
- ARIA state or property is permittedA tool can check this
- Button has non-empty accessible nameA tool can check this
- Element with aria-hidden has no content in sequential focus navigationA tool can check this
- Element with presentational children has no focusable contentA tool can check this
- Menuitem has non-empty accessible nameA tool can check this
- Summary element has non-empty accessible nameA tool can check this
- Iframe element has non-empty accessible nameA tool can check this
- Iframe elements with identical accessible names have equivalent purposeA tool finds candidates, you decide
The other techniques filed under this rule
39 guides on this site are filed under 1.1.1 Non-text Content. W3C documents this one as a failure of that rule, so it describes a way the rule gets broken rather than a way to pass it.
- ARIA6sufficientName icon-only controls with aria-label
- ARIA9sufficientAssemble one label from several text pieces
- ARIA10sufficientName images and charts with aria-labelledby
- ARIA15sufficientLink complex images to longer descriptions
- C9sufficientPut decorative images in CSS backgrounds
- G68sufficientDescribe the purpose of live-only streams
This guide is our interpretation of W3C technique F20: Failure of Success Criterion 1.1.1 and 4.1.2 due to not updating text alternatives when changes to non-text content occur. W3C publishes its techniques as guidance rather than as the standard, and says so on every one of them. The success criterion is what conformance is measured against, and a technique is one documented way to meet it.