Skip to content

Commit 47c20c6

Browse files
committed
[css-anchor-position] Add some a11y guidance. w3c#9356
1 parent a800e86 commit 47c20c6

File tree

1 file changed

+42
-0
lines changed

1 file changed

+42
-0
lines changed

css-anchor-position-1/Overview.bs

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1161,6 +1161,48 @@ were ''visibility: hidden'',
11611161
regardless of what their actual 'visibility' value is.
11621162

11631163

1164+
Accessibility Implications {#accessibility}
1165+
--------------------------
1166+
1167+
It's important to remember that Anchor Positioning
1168+
does not automatically establish any semantic relationship
1169+
between a positioned element
1170+
and any of its anchors,
1171+
because it can be used in many different ways.
1172+
Authors must not rely solely on a <em>visual</em> connection
1173+
implied by the positioning
1174+
to link elements together semantically;
1175+
without additional help,
1176+
the elements often have <em>no</em> meaningful DOM relationship,
1177+
making them difficult or impossible to use in non-visual user agents,
1178+
like screen readers.
1179+
1180+
Many features on the web platform,
1181+
both existing and upcoming,
1182+
allow establishing such connections explicitly,
1183+
so that non-visual user agents can also benefit.
1184+
1185+
For example, the Popover API in HTML
1186+
automatically links the invoker button
1187+
to the popover element,
1188+
including automatically adjusting tabbing order;
1189+
it <em>also</em> establishes the invoker button
1190+
as the [=implicit anchor element=] for the popover,
1191+
making it easy to use Anchor Positioning as well.
1192+
1193+
In more general cases,
1194+
ARIA features such as
1195+
the <a href="https://w3c.github.io/aria/#aria-details"><code>aria-details</code></a>
1196+
or <a href="https://w3c.github.io/aria/#aria-describedby"><code>aria-describedby</code></a> attributes
1197+
on an anchor element
1198+
can provide this information
1199+
in a slightly more manual fashion;
1200+
in concert with the <{html-global/role}> attribute on the positioned element,
1201+
non-visual user agents
1202+
can tell their users about the relationship between the elements
1203+
and let them automatically navigate between them.
1204+
1205+
11641206

11651207
<!-- Big Text: a-size()
11661208

0 commit comments

Comments
 (0)