Select to view content in your preferred language

StoryMap accessibility scan issues

613
2
Jump to solution
11-22-2024 04:12 PM
Labels (3)
KaraG
by
Regular Contributor

I ran a scan from accessibe.com on the pages in a StoryMap collection that I've created for my agency. It returned a number of errors that I don't think I'm able to fix because they involve the underlying code. I'm not sure which of these are actually critical versus recommended. If anyone has any insight on the following and if I'm able to do anything about them from my end, I'd appreciate it. 

  1. Link attached to my agency's logo in header opens in new tab without label in code, and I don't see a way to change it to open in the same window from the theme I created
  2. "Keyboard focus should have a noticeable outline" (no code snippet provided)
  3. "Every page should include hidden links that allow skipping blocks"
  4. Unable to add alt text to images on collection main page
  5. "Non-functional icons/spacers should be excluded from assistive technology" ; code snippet: 
    1. <span class="jsx-2895599137 card-title" > </span>
  6. "Iframe elements should be labeled or titled" ; code snippets:
    1. <iframe loading="lazy" role="application" src="https://storymaps.arcgis.com/stories/ad543b0d4ec645cfbac0005255f28ea2" tabindex="-1" allow="autoplay;geolocation;microphone" sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-popups...
    2. <iframe loading="lazy" role="application" src="https://storymaps.arcgis.com/stories/31a671be6fed429180f9099e8ffd578e" tabindex="-1" allow="autoplay;geolocation;microphone" sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-popups...
  7. "Titles should have a consistent hierarchy" ; code snippet:
    1. <h1></h1>
  8. "Figure elements should have text or be excluded from assistive technology (Figure elements used to display images should have a role="none" attribute, and the image itself should provide a description using the "alt" attribute.)" ; code snippet: 
    1. <figure class="jsx-1654292749 jsx-4281434020 media-wrapper with-caption"><div class="jsx-1654292749 jsx-4281434020 media-wrapper-children"><div class="jsx-1501363848 jsx-929991880 parent"><div class="jsx-1501363848 jsx-929991880 reparent-wrapper cont...
  9. "The HEAD element should include a title element with the name of the page"
    1. Is this because I have the cover hidden? 

 

Also, I tried using keyboard navigation along with a screen reader, and the swipe images that I have in my story did not respond to the arrow keys (but do work without the screen reader) - is there another shortcut or keys I should be using instead? 

 

Thank you!

0 Kudos
1 Solution

Accepted Solutions
ShaneONeill_144
Esri Contributor

I would suggest getting in touch with your local Esri Distributor and ask them to investigate this further for you

View solution in original post

0 Kudos
2 Replies
ShaneONeill_144
Esri Contributor

I would suggest getting in touch with your local Esri Distributor and ask them to investigate this further for you

0 Kudos
OwenGeo
Esri Notable Contributor

@KaraG - I would agree with @ShaneONeill_144 that getting in touch with your local distributor or account manager would be a good approach here. There isn't enough information about most of these issues provided here to provide a definitive response, so more discussion/info is needed.

However, I can provide information about some of these issues...

2 - Keyboard focus should have a noticeable outline -- In an update coming later next week, we will introduce a new style for the keyboard focus indicator. Please retest this later in the month.

4 - Unable to add alt text to images on collection main page - The images on the collection cover are considered decorative and do not require alt text.

Swipe keyboard navigation issue - We have addressed this in a recent release. Please retest.

Owen Evans
Lead Product Engineer | StoryMaps
0 Kudos