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
<rdar://problem/99637511>
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?