Accessibility problem: Screen reader not reading part of the app

AllenDailey1

Hello, can anyone help me with an accessibility problem?  My organization has to meet web accessibility standards very soon.  One element of accessibility is that apps must be readable by screen readers. 

When examining the accessibility of one of our apps made with Instant Apps (Zone Lookup template), I discovered that a screen reader, NVDA, won't read my "custom result text."  When I hover my mouse over a word in that text, it reads the word, but not the whole text. Hitting the tab key to move through all elements on the screen does not make the text get read.

The unreadable text is outlined in red in this screenshot:

 

How can I fix this, so that a screen reader can read the "custom result text"?

The app is public, so you can try it out and see what I mean.  Here is the URL:
https://slocounty.maps.arcgis.com/apps/instant/lookup/index.html?appid=df5f4c61eb4e46fb98cf39b01f170781

To get to the results screen, first type in an address in the search bar.  Here's a valid address you can enter:
976 Osos St., San Luis Obispo

khutchins

Those elements are plain text, not interactive, so tabbing with a keyboard won't focus them,  that's expected behavior. For non-interactive content like the text before and after your results, screen readers handle it through their own navigation commands rather than keyboard tab focus.

I tested on Mac using the built-in VoiceOver screen reader and confirmed that your pre- and post-results text is being read correctly. You can access it either by using the VoiceOver command to start reading from a specific location on the page, or by using the VoiceOver item navigation shortcuts (VO + Left/Right arrows).

This article gives a solid overview of how paragraph text works with screen readers — might be helpful context:

https://www.perkins.org/resource/reading-efficiently-screen-reader-reading-paragraphs/#:~:text=Many%20reading%20assessments%20number%20the,or%20add%20several%20random%20words.