Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[css-anchor-position-1] Move Accessibility Implications section #11024 #11027

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

[css-anchor-position-1] Move Accessibility Implications section #11024 #11027

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
97 changes: 54 additions & 43 deletions css-anchor-position-1/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1273,49 +1273,6 @@ 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 box
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 Expand Up @@ -2237,6 +2194,60 @@ using existing JS APIs (such as {{Element/getBoundingClientRect()}}).
-->


<!-- Big Text: a11y

███▌ █▌ █▌ █ ▐▌
▐█ ▐█ ██▌ ██▌ ▐▌ █
█▌ █▌ █ █▌ █ █▌ █ ▐▌
█▌ █▌ █▌ █▌ ▐▌█
█████▌ █▌ █▌ █▌
█▌ █▌ █▌ █▌ █▌
█▌ █▌ █████▌ █████▌ █▌
-->

Accessibility Implications {#accessibility}
==========

It's important to remember that Anchor Positioning
does not automatically establish any semantic relationship
between a positioned box
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: cssom

███▌ ███▌ ███▌ ███▌ █ █
Expand Down