-
Notifications
You must be signed in to change notification settings - Fork 27
HTML Popover Attribute A11y Proposal (manual and auto)
Table of Contents
- Summary
- Important considerations
- Heuristics over explicit semantics
- Triggers, anchoring and reading order
- Manual popups
- Auto popups
This document describes accessibility solutions for the proposed popup API (popup attribute).
Please read the popup Popup API Explainer before reading or commenting on this document.
Additional links: Chromestatus Demo More demos from Scott O'Hara A11y issues in GH
- The popup API is currently incomplete:
- The attributes to trigger popups automatically from user input (popuptoggletarget or popupshowtarget) are currently only supported on button elements, but this support is expected to expand in later versions, e.g. to text inputs. When it does, we will need to make adjustments to keyboard behaviors such as ensuring that triggering elements are in the tab order.
- Hint popups and popuphovertarget have been deferred in the interests of shipping something useful sooner. However, once they are added, they will bring their own a11y considerations.
- This discussion requires adding the concept of a minimum role to HTML-AAM. A minimum role assures that an element won't be exposed as a "generic", which blends in with the page. This concept is important for other discussions on how to expose generic elements when they’ve been given properties important to accessibility. E.g., tabindex, contenteditable, and possibly in regards to naming.
There are currently 2 types of popup: manual and auto. These values are not semantic, but produce behaviors that look and behave like common patterns. Therefore, the approach taken here is to use heuristics to build accessibility around the most likely pattern and allow the author to modify from there.
Semantic HTML elements may be specified in the future that encapsulate various popup behaviors, e.g. <tooltip> or <notification>. The proposed <selectmenu> is also being implemented using popup behaviors.
A popup can be associated with a triggering button via the popuptoggletarget or popupshowtarget attribute (pointing from the trigger to the popup).
- A triggering element that can open the pop-up should automatically support the equivalent of the aria-expanded property. The value should be true if any associated popups are open.
- Note that the aria-haspopup equivalent property is not exposed, because it would be redundant, and provides less useful information than aria-expanded.
Manual popups are simply elements that show up in the top layer and are controlled by the page. The main use cases we know of are a toast / notification, and persistently visible content such as modeless dialogs that need to overlay other content.
- Minimum role of group, to prevent the contents from blending into the rest of the page. TBD: develop alternate platform mechanisms in each platform API for exposing the fact that an element is a manual popup, e.g. object attribute ispopup:true. This would be helpful in cases where the popup already has its own strong role.
- Announcements for new popups:
- When focus goes inside the popup, there is no need for an additional announcement of the popup, as moving focus there is enough.
- Else, when triggered by page load, default to not announcing the popup, or include in initial page load summary (e.g. this page has 5 headings, 4 landmarks and 3 popups).
- Else, announce the popup with at minimum the title of the popup. If the verbosity indicates instructions to be read, the AT should inform the user that F6 will navigate to the popup (Ctrl+F6 on Mac).
- NOTE: author guidance would be necessary to indicate what popup=manual should be used on. For example, a popup=manual may be used on a <dialog> element, a role=region/article, or possibly even a generic <div> (thus ideally being exposed as a role=group).
- F6 (Ctrl+F6 on Mac) cycles to these, with the most recent popup first.
- Escape does not automatically close, just as light dismiss is not automatically supported (use popup=auto for this behavior).
Auto popups can exist only 1 at a time. They are automatically dismissed if another auto popup is shown, or if the user navigates away.
- Similar to manual popups, use a minimum role of group, to prevent the contents from blending into the rest of the page.
- Would commonly be expected to be used on elements with roles that are current token values for aria-haspopup. Can be used with other roles as well, such as range slider popup invoked by a volume button.
- Tab order repair: all of the tab stops inside of the popup should be inserted after the trigger, and before what the original tab stop after the trigger.
- Escape key dismisses, even if the auto popup does not currently have focus. pop_up_a11y.md Displaying pop_up_a11y.md.