-2

Please visit the link for better understanding - https://search.verizonwireless.com/onesearch/search/?q=upgrade%20device

There are two buttons named "List view and Grid view", when the user activates the list view button the screen reader user is receiving the message [by voice] Grid view/list view" instead of "List view activated". what is the correct method to give alert for the screen reader user that the button [ both list and grid view] is activated successfully? does ARIA alone ould do this?

I've tried ARIA role=alert but is not working.

Ramshif Richu
  • 1
  • 3
    Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a **Stack Snippet**. Although you have provided a link, if it was to become invalid, your question would be of no value to other future SO users with the same problem. See [**Something in my website/example doesn't work can I just paste a link**](http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it). – Paulie_D Jul 22 '19 at 11:00

2 Answers2

0

You can use role="alert" (or preferably role="status" for this, because you're not announcing an error) to give the screen-reader user a "live" voice-update. It only works, however, if the element with role="status" is already present on the page, when you insert the text into it. Preferably it's present on page load, because there is a bug in some browsers that prevents them from listening for this element, unless it was there from the start.

Tobias Christian Jensen
  • 152
  • 10
0

I think the wrong UI elements are being used. Grid and list are mutually exclusive so this should be a radio group of two buttons. As each radio button is selected, the screen reader will automatically announce the change if they are defined semantically using either

  • <input type="radio">
  • or
  • role="radio" and role="radiogroup" and aria-selected

So role="status" is not necessary (and would be overkill if used).

slugolicious
  • 15,824
  • 2
  • 29
  • 43
  • Thanks. So changing these buttons to radio buttons would make the job simpler right? – Ramshif Richu Jul 24 '19 at 15:19
  • Re-reading the original question, this sounds like the proper solution. Making the buttons have the right semantics to convey what's changed is preferable. I would advice, however, against having radiobuttons that look like buttons, so I'd work on the design of this as well. Another way to go could be using tabs that look like tabs, as that could also sound like what the questioner is aiming for. – Tobias Christian Jensen Jul 24 '19 at 15:32
  • `"So changing these buttons to radio buttons would make the job simpler right? "` - yes – slugolicious Jul 25 '19 at 22:47