On each web page, information must not be conveyed only by shape, size or position. Is this rule followed?
A user who enlarges their page to 400% loses the spatial context of the layout. A screen reader user does not perceive size variations or element positioning. For both profiles, an instruction like "click the rounded button" or a form whose required fields are only in bold represents inaccessible information: the form disappears with the visual context.
This criterion applies to four types of content: text, images, temporal media (video, audio), and non-temporal media (diagrams, infographics). In each case, if information is conveyed by the form of an element, by its relative size, or by its position on the page, it must also be available through another means: explicit text, an aria-required attribute, a caption, or a long description.
The principle test: disable CSS and re-read the document. If information disappears with the formatting, it fails. This criterion does not address color, covered by other RGAA criteria, but only geometric form, size, and spatial position.
4 tests to detect if information relies solely on shape or position
Text alternative to shape information
- Identify text whose information relies on form, size, or position: required mention indicated only by bold, warning signaled by smaller font, section described as "the block on the right".
- For each case, verify that a textual or programmatic alternative conveys the same information without resorting to visual presentation (label "(required)",
aria-required="true"attribute, explicit section name). - If each piece of information is accessible through a means other than visual presentation, the test is passed.
Image alternative to shape information
- Identify images whose information depends on form (triangular icon for an alert), size (larger element to indicate priority), or position (arrow indicating a direction without a text label).
- For each image, verify that the
altattribute, anaria-label, or a caption independently conveys the information without reference to the visual characteristic. - If this applies to all affected images, the test is passed.
Alternative to shape information (temporal media)
- Identify temporal media (videos, audio content with visual support) that convey information through the form, size, or position of an element: "press the large button", "select the round icon at the bottom".
- Verify that an alternative (transcript, audio description, enriched captions) retranscribes this information without depending on visual presentation.
- If this applies to each temporal media, the test is passed.
Alternative to shape information (non-temporal media)
- Identify non-temporal media (graphics, diagrams, static infographics) whose information relies on form (type of curve), size (height of histogram bars), or position (legend associated with an element by visual proximity).
- Verify that the
altattribute or a long description (viaaria-describedbyor a link to a dedicated page) retranscribes the data without relying on visual representation. - If this applies to each non-temporal media, the test is passed.
Examples
❌ Non-compliant : Required fields indicated only by bold
<form>
<!-- CSS applied: .required { font-weight: bold; } -->
<!-- No legend explains what bold means -->
<label class="required"><strong>Last name</strong></label>
<input type="text" name="lastname">
<label class="required"><strong>First name</strong></label>
<input type="text" name="firstname">
<label>Preferred name</label>
<input type="text" name="usage">
<button type="submit">Send</button>
</form>The information "required field" is conveyed only by visual formatting (bold). A screen reader user or someone with CSS disabled cannot distinguish required fields from optional fields. Test 10.9.1 fails.
✅ Compliant : Required fields with asterisk, text legend, and aria-required
<form>
<p>Fields marked with an <abbr title="required">*</abbr> are required.</p>
<label for="lastname">Last name <abbr title="required" aria-label="(required)">*</abbr></label>
<input type="text" id="lastname" name="lastname" aria-required="true">
<label for="firstname">First name <abbr title="required" aria-label="(required)">*</abbr></label>
<input type="text" id="firstname" name="firstname" aria-required="true">
<label for="usage">Preferred name</label>
<input type="text" id="usage" name="usage">
<button type="submit">Send</button>
</form>The asterisk is accompanied by a text legend and an aria-label readable by screen readers. The aria-required="true" attribute conveys the required nature programmatically, regardless of visual presentation. The information is available through three vectors: formatting, text, and DOM.
❌ Non-compliant : Navigation instruction referencing only position
<p>To access the course list, use the links in the column on the right.</p>
<nav aria-label="Available courses">
<ul>
<li><a href="/courses/html">HTML Fundamentals</a></li>
<li><a href="/courses/css">Advanced CSS</a></li>
</ul>
</nav>The instruction "column on the right" assumes the user perceives the overall layout. On mobile, with a screen reader, or with a custom stylesheet, the notion of "right" loses all meaning. This is a failure of test 10.9.1.
✅ Compliant : Navigation instruction referencing the section title
<p>To access the course list, consult the "Available courses" section below.</p>
<nav aria-label="Available courses">
<h2>Available courses</h2>
<ul>
<li><a href="/courses/html">HTML Fundamentals</a></li>
<li><a href="/courses/css">Advanced CSS</a></li>
</ul>
</nav>The instruction references the section title, a stable text landmark independent of any layout. This approach corresponds to WCAG technique G96: combining a textual and non-sensory location indicator. Understanding does not depend on sight or spatial context.
Tips and pitfalls
⚠️ The asterisk without a legend systematically fails
This is the most frequent error encountered in form audits. Many interfaces use the asterisk (*) to indicate required fields without explaining its meaning on the page. Without a text legend such as "Fields marked * are required", the asterisk remains a visual symbol with no alternative: test 10.9.1 fails.
⚠️ Graphics: alt="Chart" is not enough
A pie chart or histogram conveys proportions by the size and position of its elements. If the alt attribute only says "Sales distribution", the numerical data remains inaccessible. The alternative must retranscribe the values: "Sales distribution: France 45%, Germany 30%, others 25%". This is the most underestimated point of test 10.9.4.
💡 Disable CSS to test in 30 seconds
The Web Developer extension (Firefox, Chrome) allows you to disable all stylesheets with a single click. Then browse the document: if information about state, hierarchy, or navigation disappears with the formatting, this is a direct warning signal for criterion 10.9.
⚠️ Color is not covered by criterion 10.9
Criterion 10.9 covers geometric form, size, and position. If information is conveyed only by color (red field for an error, green badge for success), other RGAA criteria apply. Both issues can coexist on the same element, but they are subject to separate evaluations.
⚠️ Help pages and tutorials are also in scope
Guides that explain how to use the interface are subject to test 10.9.1. An instruction like "click the pencil-shaped icon to edit" fails if the icon does not carry an accessible label describing the action ("Edit") and not its form. The description must cite the control's label, not its visual silhouette.
Frequently asked questions
How to manually test RGAA criterion 10.9 without specialized tools?
Two complementary approaches. First, disable CSS and read the document: information must remain comprehensible. Next, search the text for terms like "left", "right", "round", "square", "large", "small": each occurrence is a sensory instruction to verify. For images and media, check that alternatives describe data, not just content type.
In which cases does the asterisk * satisfy RGAA criterion 10.9 for required fields?
Yes, under two cumulative conditions: a text legend in the form explains the symbol ("Fields marked * are required"), and the fields carry aria-required="true" or the HTML required attribute. An asterisk alone, without a legend, is a failure of test 10.9.1. With legend but without aria-required, criterion 10.9 is satisfied, but other form-related criteria may remain at issue.
What is the difference between RGAA criterion 10.9 and criterion 10.10?
Criterion 10.9 verifies that an alternative exists: is the information accessible by a means other than form, size, or position? Criterion 10.10 verifies that this alternative is relevant: does it actually convey the information completely? A graphic with alt="Sales chart" can theoretically satisfy 10.9 if numerical data are available elsewhere on the page, but it fails 10.10 because the alternative is too vague to be useful.
How does RGAA criterion 10.9 apply to icons without visible text?
Yes, if it conveys information. A triangular icon indicating an alert must have an alt or aria-label that describes the alert ("Warning: deadline exceeded"), not the form ("triangle"). Writing alt="alert triangle" fails test 10.9.2: the form is described, but the actual information is not.
How does RGAA criterion 10.9 apply to PDF documents attached to a page?
Yes. Any document accessible from a web page falls within the scope of RGAA, including PDFs. A user guide PDF that says "click the square button" without citing the button's label constitutes a failure of this criterion in that document. In practice, PDFs are audited separately, but the same rules apply to them.