Accordion Accessibility - add additional header CSS for screen readers

[DarrenLloyd__DOIT]

Add CSS to the "calcite-accordion-item" which will allow screen readers to recognize the header in the accordion. Adding role="heading" level="2" is a solution that works for our requirements but needs to be added individually to each accordion.

Example

<calcite-accordion-item expanded="true" heading="Past Events" role="heading" level="2" style="background-color:##E3ECF1; color:#ffffff; border-bottom:0px solid #a6a6a6">

Testing Tools: Apple iPhone 12 Mini with VoiceOver; Samsung Galaxy S9 with TalkBack; native mobile accessibility settings; Windows Desktop with Chrome Browser and Accessible Color Picker extension; Firefox Browser; standard QWERTY keyboard; NVDA Screen Reader; JAWS Screen Reader; aXe DevTools; ANDI Section 508 Accessibility Checker; iOS Desktop with Safari Browser with Voiceover enabled.

[KlaraSchmitt]

Hello,

The calcite-accordion-item is part of Esri's Calcite Design system, which is designed to be highly configurable, so that any Esri application can use it. As you note, the heading role and level HTML attributes are already supported by calcite-accordion-item, but because the component is intended to be flexible, it is not always presumed that accordion headers will be headings. (For instance, Hub uses accordions on our search filters and we were told during an accessibility audit that those should not be headings and we have subsequently updated.)

I understand it may be a nuisance to have to apply the HTML attributes individually to each of your accordions within your Hub Site or Hub Page, but even if we added the role="heading" to the default accordion item, levels would still have to be set individually, since we cannot know where in the site/page heading hierarchy a customer has placed their accordions. So at the moment, the calcite-accordion-item in Hub uses the default configuration set by the design system. But it sounds like you have a solution that works for you, even if it requires a tad bit more configuration than you'd like.

[DarrenLloyd__DOIT]

Thanks @KlaraSchmitt 

Is there a place for Esri products accessibility helpful hints? 

[KlaraSchmitt]

@DarrenLloyd__DOIT 

Are you familiar with our Accessibility resource page? It links to a number of blog posts about accessibility and our products: https://www.esri.com/en-us/accessibility/resources

Or if you're looking for more documentation on what is possible within the Calcite Design System, this is the documentation for that: https://developers.arcgis.com/calcite-design-system/components/