Bug 244881
| Summary: | AX: Heading element are not exposed in VoiceOver rotor when they are inside a button | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Sylvain Gamel <code> |
| Component: | Accessibility | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW | ||
| Severity: | Major | CC: | andresg_22, tyler_w, webkit-bug-importer |
| Priority: | P2 | Keywords: | InRadar |
| Version: | Safari 15 | ||
| Hardware: | All | ||
| OS: | All | ||
Sylvain Gamel
When a heading element is inside a button (for example when implementing some collapsible panel) like bellow:
<button type="button">
<h2>Some title</h2>
</button>
Then the heading element will not be seen as an heading by VoiceOver.
- you don't see it in the list of headings exposed by the rotor
- you cannot navigate to it when using heading navigation
This is a major issue as heading structure is widely used by screenreader users to navigate in documents.
Example implementation: https://codepen.io/sylvaingml/pen/NaNMdj
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Radar WebKit Bug Importer
<rdar://problem/99637511>
Tyler Wilcock
I believe this is because the children of buttons are presentational, i.e. not supposed to be exposed by the user agent.
https://www.w3.org/TR/wai-aria/#button
https://www.w3.org/TR/wai-aria/#childrenArePresentational
This behavior is implemented here:
https://github.com/WebKit/WebKit/blob/b86ae1a3bfa93a5cb1359c3370a32a3adeb5507e/Source/WebCore/accessibility/AccessibilityNodeObject.cpp#L489
Firefox matches our behavior, Chrome does not (it exposes the heading). I do understand the usecase...maybe worth starting a discussion on https://github.com/w3c/aria/issues?