Fixing Accessibility Scan Errors in a StoryMap

[CaitlynDavey]

Hi, I'm trying to get my agency's StoryMaps into compliance with WCAG 2.2 AA.
I'm currently doing accessibility scans based on WCAG 2.0 and getting some recurring errors. Are any of these fixable?

1) the contrast for text & background of embedded cards is too low. But if I try to edit the secondary background color in the custom template, I get a red circle with a line through it. Is this something I can change?  Editing to add that I found a post saying this is not an option. Can I edit the text color, in that case?

2) "ARIA commands must have an accessible name (7): The focusable div elements (<div class="jsx-261254637 reparent-wrapper contracted" role="button" tabindex="0"> that have button role attributes are not labeled."
I'm not sure what is triggering this flag. Is this something a user can change or is it an inherent element of the app?

3) "Interactive controls must not be nested: The map of slider button (<div role="button" tabindex="0" aria-label="Move the slider left and right using the arrow keys">) is nested inside of a focusable div element that has a button role attribute." 
Is this something a user can change or is it an inherent element of the app?

Also, is there a WCAG 2.2 StoryMap issue checklist of issues and best practices anywhere? This would be hugely helpful and go along way toward promoting our continued use of StoryMaps.

Any and all thoughts and recommendations are welcome!

[AbbyE_Esri · Accepted solution]

Hi @CaitlynDavey , Thanks for  sending over your accessibility questions!

For #1, at the moment, authors are not able to change the secondary background color. However, this is something that we are hoping to allow customization for in the near future. I will keep you updated on this, but for now, making the Text color a bit darker/lighter should allow for a higher contrast between the text and background. 

For #2, it's a bit harder to tell where in your item this is coming from.. Do you happen to have some inline images, a swipe element with images within it, or map tour images within your story? Based on the next point, I'm assuming you may have a swipe element.

For #3, this swipe slider was recently updated to allow proper focusable navigation on the slider element. Is this a live evaluation, or was this feedback from an accessibility check a couple of months ago?

Thanks for your patience on this response, and let me know if changing that text color for #1 works as a temporary solution!

--Abby

[CaitlynDavey]

Thank you for your response, Abby!

The StoryMap is using a custom template made by Marketing, to which we have aligned the colors of all of our graphics and Tableau embeds, so changing the font color isn't an easy fix, but may suffice for now. Thanks for considering the background color change! Anything that improves customization within the StoryMap features is appreciated.

And yes, this is working off a scan from about a month ago. Great to hear the accessibility of the slider function has been improved since then. Thank you very much!!