AnsweredAssumed Answered

Accessibility with Story Maps

Question asked by aanderson@amherst.edu on Mar 15, 2019

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”

 

8) “Skipped heading level”

 

You get the idea. Wave can be used to elaborate.

 

Thanks,

 

— Andy Anderson

Outcomes