0

I am using the below markup ,

<ul>
 <li class="country-region-items double-col-region-width"><button aria- 
 label="Europe" class="region-name cs-label fwrd-arrow">Europe</button></li>

 <li class="country-region-items double-col-region-width"><button aria- 
 label="America" class="region-name cs-label fwrd-arrow">America</button></li>
</ul>

Screen reader is reading out "List with two items,list item Europe button", How can i restrict it to read only as "Europe" ?

Ps:I dont want to change the HTMl structure.

Sanjay B
  • 213
  • 1
  • 3
  • 11
  • I know nothing about screen-reader setup, but wouldn't somebody using one need to know that it's a button they can "click", rather than just a static item in a list? – freefaller Apr 17 '18 at 07:38
  • Why do you want to prevent it? Isn’t the button supposed to be used? – unor Apr 18 '18 at 07:38

3 Answers3

2

Yes, you can remove the "list-ness" of the list by using role="presentation", but it's highly discouraged. I presume there's a reason a list was used in the first place - because you wanted to group related items together. If so, then that same semantic information should be presented to screen readers too and the list shouldn't be "hidden".

If the items are not related, then a list shouldn't be used.

If the list is being used for styling purposes, that's an inappropriate use of lists too.

But in the end, you can do what you want with

<ul role="presentation">
 <li class="country-region-items double-col-region-width"><button aria- 
 label="Europe" class="region-name cs-label fwrd-arrow">Europe</button></li>

 <li class="country-region-items double-col-region-width"><button aria- 
 label="America" class="region-name cs-label fwrd-arrow">America</button></li>
</ul>
slugolicious
  • 15,824
  • 2
  • 29
  • 43
0

Why do you want to restrict it? The announcements of the semantics are provided by the screen reader to convey the UI.

Steve Faulkner
  • 2,572
  • 15
  • 17
0

If you want the screen reader to only announce "Europe" or "America" in your code example above, you'd have to use role="presentation" on all the elements, including the buttons:

<ul role="presentation">
    <li class="country-region-items double-col-region-width" role="presentation">
        <button aria-label="Europe" class="region-name cs-label fwrd-arrow" role="presentation">Europe</button>
    </li>
    <li class="country-region-items double-col-region-width" role="presentation">
        <button aria-label="America" class="region-name cs-label fwrd-arrow" role="presentation">America</button>
    </li>
</ul>

This only worked with NVDA 2021 when I tested it in Chrome; it didn't work with JAWS 2022 as JAWS still announces the "button" role. (Interestingly, NVDA didn't appear to recognise the alias role="none", whereas JAWS ignored role="none" and role="presentation" for the <button> tag but allowed them for the <ul> and <li> tags).

But, as slugolicious points out, what you're trying to do violates the purpose of accessibility, which is to provide the same semantic page information to assistive technology users as to non-AT users. So, while I've shown how you can achieve the desired effect (well, with NVDA) I'd strongly caution against doing this in your code.

George Chapman
  • 462
  • 2
  • 9
  • I'm assuming when the OP said "How can i restrict it to read only as "Europe"" that they didn't mean they didn't want to hear "button". If you literally only heard "Europe" that would be a WCAG 4.1.2 issue. I'm pretty sure the original intent was just to remove the "list" part of the announcement, although it's not completely clear. In any event, there are lots of issues in the OP that go against good accessibility practices. – slugolicious Mar 29 '22 at 04:39
  • @slugolicious I thought to provide what the OP was asking for, i.e., that it's possible to entirely mute the "list" and "button" portions of text, but not advisable. – George Chapman Mar 29 '22 at 06:46