On each web page, information must not be conveyed by shape, size or position alone. Is this rule implemented in a relevant way?
A screen reader user hears « press the triangular button to save ». They cannot see the buttons. This instruction is unusable. This criterion does not merely verify that an alternative exists (that is the role of criterion 10.9): it requires that this alternative be relevant, meaning it actually conveys the information in all viewing contexts and for all users.
A relevant alternative names the target by its text label or functional role. « Click the green button in the top right » combines three flaws: color, position, relative size. None of these cues are conveyed by a screen reader. The relevant phrasing: « click the Submit button ».
For images and media, the alternative must express the information itself, not the visual device that carries it. If arrows of different sizes indicate priority levels, the relevant alt lists these levels plainly. It does not say « diagram with arrows of varying sizes ». The alternative must replace, not describe.
4 tests to confirm that a means other than shape allows identification
Relevance of shape/size alternative (text)
- Identify in the page any text whose meaning depends solely on form (bold, italic, underline used as the only semantic signal), size or position.
- For each case, verify that the proposed alternative conveys the same information without relying on these visual cues. Example: « fields in red are mandatory » is not relevant if no other indicator signals the requirement. « Mandatory fields are marked with an asterisk (*) » is relevant.
- Test in multiple contexts: screen reader, 400% zoom, high contrast mode.
- If each alternative is relevant for all users, the test is validated.
Relevance of shape/size alternative (image)
- Identify images whose informative content relies on the form, size or position of visual elements (icons of different shapes indicating a status, graph bars indicating values, directional arrows…).
- For each image, verify that the alternative (attribute
alt,aria-label, or long description) expresses the actual information conveyed by these forms, sizes or positions. The alternative must not merely describe the visual device. - If each alternative is relevant in all viewing contexts, the test is validated.
Relevance of shape/size alternative (temporal media)
- Identify temporal media (videos, animations) where information is conveyed solely by the form, size or position of on-screen elements (e.g., an icon that changes shape to indicate a state, a cursor positioned left or right to represent a choice).
- Verify that the transcript, captions or audio description associated with it appropriately retake this information, explicitly naming the information rather than describing the visual device.
- If each alternative is relevant, the test is validated.
Relevance of shape/size alternative (non-temporal media)
- Identify non-temporal media (interactive SVG, maps, infographics, vector diagrams) where information is conveyed by the form, size or position of their components.
- Verify that each text alternative (via
alt,aria-label, long description, or associated caption) expresses the information itself, independent of the visual representation. A caption that states « taller bars correspond to higher values » is not relevant; a caption that lists the numerical values is. - If each alternative is relevant in all viewing contexts, the test is validated.
Examples
❌ Non-compliant : Navigation instruction referencing only form and position
<p>To submit your file, press the large round button at the bottom right of the page.</p>
<button type="submit" style="border-radius: 50%; width: 80px; height: 80px;">✓</button>The instruction cites only size (« large »), form (« round ») and position (« bottom right »). A screen reader user navigating by tab has access to none of these cues. The button itself carries no accessible text label, constituting a double failure.
✅ Compliant : Navigation instruction with relevant alternative
<p>To submit your file, click the « Send my file » button at the bottom of the page.</p>
<button type="submit">Send my file</button>The instruction references the button by its exact text label. A screen reader user can locate this button by its name when navigating by form elements. The match between the instruction and the button label guarantees a relevant alternative in all contexts.
❌ Non-compliant : Image alt text describing form rather than information
<img src="schema-priorites.png" alt="Diagram with arrows of different sizes">The alt describes the visual device (arrows, different sizes) but not the information it conveys. A screen reader user knows there are arrows of different sizes, but does not know what these sizes mean. The criterion 10.10 fails even if 10.9 is satisfied (an alternative exists).
✅ Compliant : Image alt text expressing information conveyed by forms
<img src="schema-priorites.png" alt="Priority levels: Critical (5 items), High (12 items), Standard (28 items). Levels are represented by arrows of increasing size.">The alt begins with the actual information (the values and their ranking), then may mention the visual representation as supplementary. A user without vision has the same data as one who sees the diagram. The order of information matters: the essential first.
Tips and pitfalls
⚠️ Confusing presence and relevance of an alternative
Criterion 10.9 asks if an alternative exists. Criterion 10.10 asks if it is relevant. An aria-label="status icon" satisfies 10.9 (a label exists) but fails 10.10 (it describes the form, not the information conveyed). This is the most frequent error in audits on this criterion.
⚠️ Graph captions that describe size
In a pie chart, a text caption like « the green portion is larger » perpetuates dependence on color and size. The relevant caption states « Category A: 62% ». The numerical value is the information; the size of the slice is merely its visual representation.
💡 Test without CSS to detect failures quickly
Disable the page's CSS styles (Web Developer extension or devtools). If information disappears or becomes incomprehensible (e.g., a « mandatory » field signaled only by a red border), the alternative is not relevant. This test detects the majority of failures on 10.10.1 in seconds.
⚠️ Instructions in embedded documents
A PDF embedded via <iframe> or <embed> may contain instructions like « see the table at the top of page 3 ». Criterion 10.10.4 (non-temporal media) applies. The relevance of the alternative must be evaluated in the context of the embedded document, not merely the framing HTML page.
⚠️ Spatial indications that constitute the information itself
A map that indicates « the station is 200 m north of the museum » uses position as information, but the text alternative « 200 m north » is relevant because it expresses the spatial relationship in text. The criterion does not prohibit mentioning a position; it prohibits position-based visuals being the only vector of information without an accessible text equivalent.
Frequently asked questions
What is the concrete difference between RGAA criterion 10.9 and 10.10?
Criterion 10.9 verifies that an alternative means of retrieving the information exists (presence). Criterion 10.10 verifies that this means is relevant (quality). A button with aria-label="triangular button" satisfies 10.9 but fails 10.10: the label describes the form, not the function. Both criteria are evaluated independently.
How do you assess the relevance of a visual alternative during an RGAA audit?
Ask yourself this question: if someone read the alternative aloud to you without showing you the visual content, would you understand the information? If not, the alternative is not relevant. For text instructions, mentally replace the visual reference with « [REDACTED] » and verify whether the sentence remains actionable.
Why is an alt describing the visual structure first before the information valid in RGAA?
Yes, provided that the information is complete and accessible from the beginning of the alt. « Bar chart: 2024 sales by quarter — Q1: 120k, Q2: 135k, Q3: 148k, Q4: 162k » is relevant. The mention of the chart type is incidental; the numerical values are essential.
Why are icons without visible text in an interface subject to RGAA 10.10?
Yes, as soon as they convey information. A button containing only a « play triangle » icon must have aria-label="Play". Relevance is evaluated on the function communicated; the form represented is only its visual vector. Criterion 10.10.1 applies to inline SVG or text icons, 10.10.2 to <img> icons.
How does RGAA 10.10 apply to tables where cell position conveys information?
A properly structured HTML table with <th>, scope or headers restores cell position programmatically to screen readers. Position is not « visual-only » in this case. Conversely, a table simulated with CSS-positioned <div> without associated HTML semantics falls under criterion 10.10.1.