primer
[a11y] Reduce `Heading`s in components
Issue raised
As part of an accessibility audit, the following issue (internal link) came up: Reduce the use of Headings throughout the page.
Most issues could be resolved, but two Primer Brand components don't support this reduction.
Suggestion
- Replace the semantic
h4s of "What's Included" inPricingOptions. I think there is another effort to allow the text to be changed. - Allow
FAQitems to acceptdiv. Currentlyasprop only allowsh1-h6.
Urgency
Not urgent, and might need a discussion first. If we wanna move forward, there might be more components where removing (or making it optional) of Headings might be preferred.
I think these are good questions to ask, as there are quite a lot of headings on that page and it would be good to see if we can trim any of the components down a bit to help with it.
I see the "What's included" section of PricingOptions as being a slightly different pattern to the FAQ component; PricingOptions features a disclosure, whereas FAQ is an accordion.
According to the Accordion Authoring Practices Guide:
Each accordion header button is wrapped in an element with role heading that has a value set for aria-level that is appropriate for the information architecture of the page.
My reading of that is to say that the heading is recommended in an accordion, meaning we shouldn't remove the headings from the individual FAQ.Item components, however I'm happy to stray from this if we have internal guidance that recommends otherwise.
In comparison, the Disclosure APG have no such guidance, so I think just a simple details/summary here is fine and we're safe to offer a way to remove the heading from the "What's included" disclosure, or just completely remove the h4 and not even allow it to be set.
Any thoughts @danielguillan @rezrah?
This makes sense to me. The only caveat is that even if the "What's new" section is more of a disclosure pattern, it is actually built using our internal Accordion component. So, we may need to fully refactor it.
