Hi, I just read this article about the accessibility features in Story Maps:
Improve accessibility of your Story Map by adding alternative text
Unfortunately despite your valued efforts, we’re finding a lot of holes, enough so that we’re getting pushback on using Story Maps in any official way.
In general, when we run a Story Map Journal through Wave on Chrome or Firefox:
WAVE Chrome & Firefox Extensions
a ton of issues pop up, for example on one Story Map Journal it lists 19 errors. I haven’t gone through them in detail, but a couple of basic things I noticed were:
1) Many unclosed or interleaved tags, e.g.
<button class="scroll" tabindex="-1" style="background: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255)); display: inline-block;">
<div class="scrollInner" data-toggle="tooltip" data-original-title="" title="">
</button>
2) The use of aria-label= isn’t being read by Jaws, according to our accessibility tester. Perhaps this is because it’s missing the role=img attribute=value pair.
<div class="mainMediaContainer" tabindex="0" aria-label="Picture of Someone">
<div class="imgContainer" data-src="https://www.arcgis.com/sharing/rest/content/items/1879858f33fb43eea23cba31a0500a6c/resources/JcDaQhsg__1550934726405__w440.jpg">
<button class="visible-on-focus return-to-content bottom">
Return to narrative
</button>
</div>
Accessible Rich Internet Applications (WAI-ARIA) 1.1
ARIA: img role - Accessibility | MDN
3) Tables used for layout purposes
4) “Linked image missing alternative text”
5) “Missing form label”
6) “Empty form label”
7) “Empty heading”
😎 “Skipped heading level”
You get the idea. Wave can be used to elaborate.
Thanks,
— Andy Anderson
