'Make a screenreader pause in between paragraphs and divs

I've been trying to add accessibility to my angular web application, but the output from the screenreader seems confusing to me. Is there a way to make a screenreader (I am using NVDA) pause inbetween reading lines from my page? Example from the html:

<footer aria-label="Page Information">
  <div id="versionFooter">
    <p>
      <img id="logo" src="assets/images/xy.svg" alt="Brand Logo"/>
    </p>
    <div class="displayVersion" aria-label="Version Information">
      <p id="backendVersion">
        Backend Version: {{backendVersion.getString()}}
      </p>
      <p id="frontendVersion">
        Frontend Version: {{frontendVersion.getString()}}
      </p>
    </div>
  </div>
</footer>

And the output from Screen reader is:

"Page Information contentinfo landmark  Brand Logo Image" 
"Backend Version: 1.2.2  Frontend Version:" 
"1.1.1"

With each quoted line representing a line the Screenreader reads without pause as soon as I prompt the next line with my keyboard. Now if it worked out as I imagined it, it should read:

"Page Information contentinfo landmark"
"Brand Logo Image"
"Version Information"
"Backend Version: 1.2.2"
"Frontend Version: 1.1.1"

Again with each line waiting for the next keyboard prompt.

How do I get the Screenreader to pause in between the paragraphs, and why does it not register the div with aria-label?

htmlaccessibilitywai-ariascreen-readersnvda


Solution 1:[1]

I'm not seeing that behavior. I copied your code exactly and put a <button> before and after your code so that I'd have something to focus on before your block of code. I put my focus on the button and I then used the down arrow with NVDA and heard:

Firefox: "Page Information content info landmark Brand Logo"

Chrome: "Page Information content info landmark graphic Brand Logo"

(Note, I didn't hear "image" after the <img> on Firefox.)

The next down arrow announced:

"Backend Version: {{backendVersion.getString()}}"

(It was the same on Firefox and Chrome. I don't have angular so the getString() didn't resolve and the screen reader just announced it as is.)

I'm not sure what key you were using to navigate or if you changed any of your NVDA settings that might affect things but in general, you don't to force NVDA to read a certain way. NVDA users are used to things being read a certain way so you shouldn't mess with that. NVDA will often read the entire contents of a container when navigating with the down arrow key (assuming you were using that key) so forcing breaks between elements by adding "dummy" elements could make it worse, especially for Braille users.

Note that your aria-label="Version Information" will most likely not be read because aria-label attributes on non-semantic elements (such as <div> and <span> elements) are typically ignored unless you have a role on your element too. See the 3rd last bullet point on "Practical Support: aria-label, aria-labelledby and aria-describedby"

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 slugolicious

Related Questions