Skip to content

Commit

Permalink
[css-anchor-position] Add some a11y guidance. #9356
Browse files Browse the repository at this point in the history
  • Loading branch information
tabatkins committed May 2, 2024
1 parent a800e86 commit 47c20c6
Showing 1 changed file with 42 additions and 0 deletions.
42 changes: 42 additions & 0 deletions css-anchor-position-1/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -1161,6 +1161,48 @@ were ''visibility: hidden'',
regardless of what their actual 'visibility' value is.


Accessibility Implications {#accessibility}
--------------------------

It's important to remember that Anchor Positioning
does not automatically establish any semantic relationship
between a positioned element
and any of its anchors,
because it can be used in many different ways.
Authors must not rely solely on a <em>visual</em> connection
implied by the positioning
to link elements together semantically;
without additional help,
the elements often have <em>no</em> meaningful DOM relationship,
making them difficult or impossible to use in non-visual user agents,
like screen readers.

Many features on the web platform,
both existing and upcoming,
allow establishing such connections explicitly,
so that non-visual user agents can also benefit.

For example, the Popover API in HTML
automatically links the invoker button
to the popover element,
including automatically adjusting tabbing order;
it <em>also</em> establishes the invoker button
as the [=implicit anchor element=] for the popover,
making it easy to use Anchor Positioning as well.

In more general cases,
ARIA features such as
the <a href="https://w3c.github.io/aria/#aria-details"><code>aria-details</code></a>
or <a href="https://w3c.github.io/aria/#aria-describedby"><code>aria-describedby</code></a> attributes
on an anchor element
can provide this information
in a slightly more manual fashion;
in concert with the <{html-global/role}> attribute on the positioned element,
non-visual user agents
can tell their users about the relationship between the elements
and let them automatically navigate between them.



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

Expand Down

0 comments on commit 47c20c6

Please sign in to comment.