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

Additional accessibility guidance for popover #8714

Closed
scottaohara opened this issue Jan 12, 2023 · 3 comments
Closed

Additional accessibility guidance for popover #8714

scottaohara opened this issue Jan 12, 2023 · 3 comments
Labels
topic: popover The popover attribute and friends

Comments

@scottaohara
Copy link
Collaborator

Now that #8221 has been merged, I've drafted the two following notes (edits welcome) that I think need to be included for popover and the popover target attributes sections:

for popover:

The popover attribute is a global attribute to allow authors flexibility in ensuring popover functionality can be applied to the most appropriate semantic element which represents the content of the popover. Authors can use the popover attribute on generic elements, such as div, or author defined custom elements, but it will generally be recommended that authors also ensure proper accessibility semantics are also provided to these generic elements, by also specifying the appropriate ARIA roles and properties.

for the popover target attributes section:

To help ensure a popover will be programmatically exposed in a logical reading order to users of assistive technology, it is strongly recommended for most use cases that authors include their popover following its triggering element in the DOM.

in addition to the above note, I'd also want to adjust the examples to also reflect this guidance. The popover ideally would come after the button element. Additionally, at least one of the examples would also use a non-generic element (a list or an article, for example). Maybe one of the examples could also have an ARIA role to match the guidance of the note. If we want to leave one of the examples as is, I'd be happy to include another to demonstrate this, instead.

I'm happy to make the PR for this, but would just request any preferences as to where these notes (particularly the one i mentioned as being for the popover attribute) would best fit in the flow of each section's content.

cc @mfreed7, @josepharhar, @aleventhal, @domenic

Thanks

@aleventhal
Copy link

ecommended that authors also ensure proper accessibility semantics

Should we say where authors can find examples of this? I think we specifically mean setting the role, perhaps we should say that. We could consider listing an incomplete set of commonly used roles in popups, such as diallog, group, listbox, etc.

@josepharhar
Copy link
Contributor

The PR was reverted and reopened, you can see the latest version here: https://whatpr.org/html/8717/popover.html

any preferences as to where these notes (particularly the one i mentioned as being for the popover attribute) would best fit in the flow of each section's content

Domenic knows best but I suppose that putting the "The popover attribute is a global attribute to allow authors flexibility" paragraph after the "All HTML elements may have the popover content attribute set" paragraph sounds good, and the "To help ensure a popover will be programmatically exposed" paragraph could go after the "The popover target attributes allow certain types of buttons" paragraph.

in addition to the above note, I'd also want to adjust the examples to also reflect this guidance

If you could do that in your followup PR that would be awesome!

@scottaohara
Copy link
Collaborator Author

appreciate the responses. will look to do that asap

scottaohara added a commit to scottaohara/html that referenced this issue Jan 27, 2023
closes whatwg#8714

- adds two notes for the popover attribute and its target attributes to provide author guidance to ensure best accessibility practices for their popovers.
- modifies the popover examples to ensure the popover follows the triggering element in the DOM reading order.  This is NOT a requirement, but it will often be the way it SHOULD be done.  though, i am not sure we want to make that a proper ‘should’ - hence it’s being added as a note.
@annevk annevk added the topic: popover The popover attribute and friends label Feb 16, 2023
@annevk annevk closed this as completed in dbe5f6c Mar 20, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
topic: popover The popover attribute and friends
Development

Successfully merging a pull request may close this issue.

4 participants