1

I have a website which is displayed inside a webview in an Android app. I am testing accessibility using Talkback to navigate the screen. When I arrive at a list item, the full contents is is read out before stopping (which is what I want) but there is no pause between reading out the h2 and the p so it sounds un-natural. Is there an easy way to add a pause so it's not all read out together?

The only thing I can think of is to add an aria-label onto the li where I could add the same contents but add a full stop.

<ul>
    <li>
        <a href="/">
          <h2>Header</h2>
          <p>Description</p>
        </a>
    </li>
    <li>
        <a href="/">
          <h2>Header</h2>
          <p>Description</p>
        </a>
    </li>
</ul>
David Spence
  • 7,999
  • 3
  • 39
  • 63
  • could you put a full stop in a span with a class which sets the font to white? – jperry1147 Sep 07 '18 at 13:18
  • @jperry1147 Yea I thought of that too. I'm able to put a full stop in a span with a class like bootstrap's sr-only. I just don't like adding extra html markup to add a pause... But I might have to. – David Spence Sep 07 '18 at 14:15
  • Related question: https://stackoverflow.com/questions/15883778/pausing-in-a-screen-reader-for-accessibility – Beau Smith Dec 01 '22 at 22:41

1 Answers1

3

In general, you don't want to add pauses in your code. Screen reader users are used to the way it works and can navigate by element, word, or character if need be.

If you still want to track things down, you can try using NVDA (free screen reader) and turn on the speech viewer tool. (When NVDA is running, press Ins+N to get the menu, navigate to Tools, then select Speech Viewer.) Then navigate to your list and you can see what is being read. I know this debugging scenario is on a PC running NVDA and your original question asked about Talkback on Android, but it might help. I'm not familiar with Talkback so am not sure if it has a speech viewer type tool.

Can you also navigate to your page outside of the webview to see how talkback handles it by itself?

Screen readers naturally pause when they hit punctuation. So a period or comma will cause it to pause. If you really needed a pause when reading, you could inject a visually hidden comma (so sighted users don't see it but screen reading software does). One drawback to that, though, is that braille users will "feel" the comma.

<h2>Header</h2>
<span class="sr-only">,</span>
<p>Description</p>

You can google the "sr-only" class. It's pretty common and visually hides the text. You could put the <span> inside the <h2> if you want, or inside the <p>, or by itself.

But again, I would not recommend adding specific pauses to your text.

slugolicious
  • 15,824
  • 2
  • 29
  • 43
  • 1
    Talkback does indeed have a speech viewer. It's enabled under: Settings > Accessibility > Vision > Talkback Settings > Talkback > Developer Settings > Display Speech Output. It doesn't provide a "log" type history like NVDA, it's more like the speech viewer on macOS VoiceOver, only showing the last utterance. – andrewmacpherson Sep 08 '18 at 09:28
  • Will talkback read everything in your web page one by once page loads? – user3260487 Sep 18 '18 at 10:12