@@ -2412,24 +2412,37 @@ using existing JS APIs (such as {{Element/getBoundingClientRect()}}).
24122412Accessibility Implications {#accessibility}
24132413==========
24142414
2415- It's important to remember that Anchor Positioning
2415+ Advisement: CSS Anchor Positioning does not create, delete, or alter any accessibility bindings between elements.
2416+ Authors must use appropriate markup features to control such bindings.
2417+
2418+ Because it can be used in many different ways
2419+ for many different use cases,
2420+ CSS Anchor Positioning
24162421does not automatically establish any semantic relationship
24172422between a positioned box
2418- and any of its anchors,
2419- because it can be used in many different ways.
2420- Authors must not rely solely on a <em> visual</em> connection
2421- implied by the positioning
2422- to link elements together semantically;
2423- without additional help,
2424- the elements often have <em> no</em> meaningful DOM relationship,
2425- making them difficult or impossible to use in non-visual user agents,
2426- like screen readers.
2423+ and any of its anchors.
2424+ For example, the <em> visual</em> anchoring relationship in a design
2425+ might be between an element and its <em> semantic</em> anchor,
2426+ or it might connect the element to an ancestor, sibling, or descendant of the semantic anchor,
2427+ depending on the desired visual effect.
2428+ Siimilarly, a design might opt out of a visual anchoring relationship even while there is a semantic one,
2429+ or vice versa.
2430+
2431+ Authors must not rely on the visual connections
2432+ implied by CSS positioning
2433+ to link elements together semantically.
2434+ Without appropriate markup,
2435+ the elements linked visually have <em> no</em> meaningful DOM relationship--
2436+ which if there <em> is</em> a meaningful relationship,
2437+ can make them difficult or impossible to use in non-visual user agents,
2438+ like screen readers,
2439+ or in non-graphical navigation modes,
2440+ such as tab navigation.
24272441
24282442Many features on the web platform,
24292443both existing and upcoming,
2430- allow establishing such connections explicitly,
2444+ allow establishing semantic connections explicitly,
24312445so that non-visual user agents can also benefit.
2432-
24332446For example, the [[HTML#the-popover-attribute|Popover API in HTML]]
24342447automatically links the invoker button
24352448to the popover element,
@@ -2445,13 +2458,17 @@ ARIA features such as
24452458the <a href="https://w3c.github.io/aria/#aria-details"><code>aria-details</code></a>
24462459or <a href="https://w3c.github.io/aria/#aria-describedby"><code>aria-describedby</code></a> attributes
24472460on an anchor element
2448- can provide this information
2449- in a slightly more manual fashion;
2450- in concert with the <{html-global/role}> attribute on the positioned element,
2451- non-visual user agents
2452- can tell their users about the relationship between the elements
2461+ can create connections
2462+ in a slightly more manual fashion.
2463+ In concert with the <{html-global/role}> attribute on the positioned element,
2464+ it allows non-visual user agents
2465+ to tell their users about the relationship between the elements
24532466and let them automatically navigate between them.
24542467
2468+ However, authors should not overuse such features either,
2469+ since overburdening the page with extra, unnecessary semantic connections can also
2470+ make the page difficult to comprehend.
2471+
24552472
24562473
24572474<!-- Big Text: cssom
0 commit comments