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.

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

CSS: handing the a11y of anchor positioning #545

Open
scottaohara opened this issue May 10, 2024 · 6 comments
Open

CSS: handing the a11y of anchor positioning #545

scottaohara opened this issue May 10, 2024 · 6 comments

Comments

@scottaohara
Copy link
Member

briefly spoke about this with @aleventhal today (cc @mfreed7)

from what i understand there have been talks about creating an aria-details relationship, similar to the one defined for popovers, if authors were to use CSS anchor positioning to associate elements with one another.

this may be useful / help provide a baseline of information for instances where an author has decided to 'tether' one element to another in the UI, but not provide any meaningful semantics to programmatically communicate this relationship.

if this were to be done, would expect this to have similar logic to popovers, where the aria-details relationship is not exposed if the elements are direct accessibility siblings to each other. Additionally, it might make sense to not expose this relationship depending on the roles of the elements that are associated. e.g., if someone were to use a role=tooltip and/or had an aria-describedby association already made, then the aria-details association would likely just be extra noise - so maybe don't do that then.

also, might be worth reiterating that if someone were to use an aria-details="" on one of the elements, that the details relationship should be considered null - as that should be considered a signal from the author that they do not want there to be a details relationship, for whatever reason.

@aleventhal
Copy link
Collaborator

aleventhal commented May 13, 2024 via email

@smhigley
Copy link

That makes sense to me. I think it'd be good to expand the list of cases where the relationship would not be added -- does this list make sense to you two?:

  • aria-labelledby
  • aria-describedby
  • aria-details (would this be excluded just with an empty string, or for any existing details relationship?)
  • aria-owns

@aleventhal
Copy link
Collaborator

aleventhal commented May 28, 2024 via email

@smhigley
Copy link

@aleventhal sorry, I think I should've been more specific 😅. I didn't mean if the anchor had any aria-labelledby/aria-describedby at all, but specifically if it already had that relationship with the anchored element. In that case, I think it would be good to not make the anchored element into both the label and the details of the anchor.

My thought behind aria-owns is similar to excluding it for siblings -- if the anchored element is already a child or owned element of the anchor, then it probably doesn't also need a details relationship. I suppose that could get a little iffy for containers with a lot of content, though (also not sure how common that is).

@aleventhal
Copy link
Collaborator

aleventhal commented May 28, 2024 via email

@spectranaut
Copy link
Contributor

Discussed in today's meeting: https://www.w3.org/2024/05/30-aria-minutes.html#t06

@jnurthen jnurthen removed the Agenda label Jun 25, 2024
aarongable pushed a commit to chromium/chromium that referenced this issue Sep 24, 2024
Anchor positioning is a new CSS feature that allows elements to be
positioned relative to other elements on a web page.

To make this feature accessible, an aria-details relationship is created
between the anchor element and the related positioned element to convey
the elements' association with each other. More specifically, detailsIds
will be set on the anchor element to the id of the positioned element.

If there are multiple anchors for an element, it is likely the anchors
are used for layout purposes. To avoid creating extra noise for AT, we
only add an aria-details relationship if there is a one to one mapping
of anchor to positioned element.

[1] w3c/html-aam#545

Change-Id: I7ee03ed5404bf4ed55a66e8f4aac7e2f17508b9d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5774305
Reviewed-by: Anders Hartvoll Ruud <[email protected]>
Reviewed-by: Ian Kilpatrick <[email protected]>
Commit-Queue: Jocelyn Tran <[email protected]>
Reviewed-by: Aaron Leventhal <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1359411}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants