<summary> elements do not mix well with headings: they can obscure the semantics for screen readers preventing them from being exposed to the heading order (i.e. not navigable).
While the content model of <summary> states that it takes “phrasing content, optionally intermixed with heading content”, how this gets translated to accessibility APIs is not very clear. <summary> has no corresponding ARIA role in HTML-AAM. In some cases it’s treated like a button and a button’s contents are presentational.
In practice, NVDA has no issues, but JAWS has significant issues (last time I tested either of these in the past year): the headings are excluded from the heading navigation which is significant since heading navigation is overwhelmingly the most popular way screen reader users navigate and discover content on a page (at least according to the WebAIM screen reader survey).
As a rule we should guide consumers to use <details> only for content where headings are not used. For cases where <details> are used, then they can use the MzpDetails component.
One case in documentation, we should update to not use headings: https://github.com/mozilla/protocol/blob/a583eb7e240f7d449fef7f29a03b0cc090b10b9a/components/00-basic-elements/details/details.html
<summary>elements do not mix well with headings: they can obscure the semantics for screen readers preventing them from being exposed to the heading order (i.e. not navigable).While the content model of
<summary>states that it takes “phrasing content, optionally intermixed with heading content”, how this gets translated to accessibility APIs is not very clear.<summary>has no corresponding ARIA role in HTML-AAM. In some cases it’s treated like a button and a button’s contents are presentational.In practice, NVDA has no issues, but JAWS has significant issues (last time I tested either of these in the past year): the headings are excluded from the heading navigation which is significant since heading navigation is overwhelmingly the most popular way screen reader users navigate and discover content on a page (at least according to the WebAIM screen reader survey).
As a rule we should guide consumers to use
<details>only for content where headings are not used. For cases where<details>are used, then they can use theMzpDetailscomponent.One case in documentation, we should update to not use headings: https://github.com/mozilla/protocol/blob/a583eb7e240f7d449fef7f29a03b0cc090b10b9a/components/00-basic-elements/details/details.html