How to stop NVDA reading out list number(1 of 2) for a HTML element present in an array

Question

I'm using NVDA screen reader for my accessibility testing. In the same, I have 2 buttons/links which are part of a context menu and thus are present inside an array say "Submit" and "Delete". Now one of the buttons has aria-label="Submit Button". And NVDA is reading "Submit Button 1 of 2". I just want to make sure that NVDA doesn't read 1 of 2. Please help with the same.

Answer 1

NVDA doesn't know anything about arrays or the language you're using to code in. What it does know about is semantic HTML elements. So if you have your buttons or links inside of a list ( <ul> or <ol> ) or if the buttons are natively part of a group such as a radio button group ( <input type="radio" name="groupName"> ), then it's absolutely correct for NVDA to announce the item number within the set.

You can also get "1 of 2" announced if you're using ARIA attributes such as aria-setsize and aria-posinset , but those attributes aren't heavily used so I'm guessing it's not that.

Hearing "1 of 2" is a fantastic feature of screen readers to give the user an idea of how big a set is and which item they're on in the set. Sighted users get that information with their eyes. You don't want to take that feature away unless you are misusing a grouping feature and the button isn't really part of a group.

Examples of different ways to get the group position announced.

Using lists

<ul style="list-style: none;">
  <li>
    <button>first button</button>
  </li>
  <li>
    <button>second button</button>
  </li>
  <li>
    <button>third button</button>
  </li>
</ul>

Instead of using a real <ul> , I could use role="list" and role="listitem" and get the same type of "1 of 2" messages.

Using radio buttons

<label>
  <input type="radio" name="groupName">
  first button
</label>
<br>
<label>
  <input type="radio" name="groupName">
  second button
</label>
<br>
<label>
  <input type="radio" name="groupName">
  third button
</label>

Using ARIA sets

<div aria-setsize="3">
  <button aria-posinset="1">first button</button>
  <button aria-posinset="2">second button</button>
  <button aria-posinset="3">third button</button>
</div>

Note that different screen readers may announce groups of things differently. Some will say "1 of 2", some might just say it's a group (without the number). It also depends how you navigate to the button, whether via TAB or the up/down arrow keys to walk the DOM.

But the lesson here is that if you have a group of things and it's properly coded, then you want the screen reader to announce the group info. If your buttons are not really part of a group but you're still hearing group info, then you have a bug in your code. It may help if you can post some of your code.