nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Creating Accessible StoryMaps

ChadLeftwich

I'm not sure if this is a question to be added here or if it would be better suited for the Accessibility section of the community forum, but I'm working on making a StoryMap Accessible to anyone who uses a screen reader. I'm having a bit of difficulty and I think It's with the fact that I've used the sidecar option to house sets of pictures and text. Only the first image and its alt text is read aloud by screen readers, and the text is skipped completely.

Do I need to remove the sidecars and include only the images and text to make the StoryMap accessible?

Encuentra más publicaciones etiquetadas con

Accesibilidad

Accepted answers

AbbyE_Esri

Hi @ChadLeftwich ,

It looks like NaturalReader doesn't read alternative text, but instead, only visible text. Using a tool like VoiceOver on Mac or Narrator on Windows will allow you to actually tab over or select media and hear its alternative text read aloud. Using the story referenced above, I am able to have the alternative text read to me:

Let me know if using your operating system's screen reader system and selecting that media works for you.

--Abby

All comments

ChadLeftwich

Abby, the Windows Narrator worked for me as well. Thank you for your help in figuring this out!

AbbyE_Esri

Hi @ChadLeftwich ,

Let me know if using your operating system's screen reader system and selecting that media works for you.

--Abby

ChadLeftwich

Abby, I have added alternative text and attribution. I also have links below some images that provide URLs that are not spoken by the Google Chrome speech reader or others I've tried, including Natural Reader.

I have been viewing ("reading") it in a published format.

Here's an example showing both attribution and alt text for an image, and it being skipped over by Natural Reader, only reading the text provided within the sidecar's text boxes.

AbbyE_Esri

Hi @ChadLeftwich ,

Thanks for including that context. When I use the Chrome speech reader on the story you sent, it reads all of the slide narration to me. I am not hearing any image alt text however, did you have added attribution to the images within the sidecar at the minute? The screen shot you sent is of the builder, just want to check if you are testing the speech in Preview mode or on the published story as well, since that is how readers will be accessing the story?

Feel free to send a video with recorded audio of the text reader and I can compare what we are hearing.

--Abby

ChadLeftwich

Abby, I'm using the Google Chrome screen reader extension. The pictures are on separate slides but only the first image of each is recognized and read.

I'm iterating through each entry on the page using the tab key, maybe it's possible that I'm using the screen reader incorrectly as opposed to having set up the StoryMap wrong?

For example, if each of these images are on separate slides, only the first is read.

This is the StoryMap I'm attempting to make accessible.

AbbyE_Esri

Hi @ChadLeftwich ,

My screen reader is reading the text and attribution from all slides in a sidecar. Are you adding those pictures and text on different slides, or all on a single slide within a sidecar? What browser and screen reader are you currently utilizing to test?

Thanks!

--Abby

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.