WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Exposing the selected state of buttons


From: Srinivasu Chakravarthula
Date: Nov 22, 2019 3:00AM

Hello Sudheer,
Are you using a <tabpanle> for this? if so, you can expose state for
selected tab. If you are using navigation mark-up, I think you can think of
using "current" role.


Srinivasu Chakravarthula - Twitter: http://twitter.com/CSrinivasu/
Website: http://www.srinivasu.org | http://serveominclusion.com

Let's create an inclusive web!

Senior Accessibility Program Manager, Watermark

On Fri, Nov 22, 2019 at 3:20 PM Sudheer Babu < <EMAIL REMOVED> > wrote:

> Hi All,
> In one of our application, we have navigation list in the header which
> contains buttons and selecting any button shows the relevant content as per
> the selection and the button will be shown in selected state.
> Here's the visual layout of it
> [image: image.png]
> Now, please help me with the appropriate aria attributes to be used to make
> the screen reader announce the selected state of these buttons.
> <li class="main-navbar__link">
> <button onclick="buttonClick(event, 'action1')" class="main-navbar__button
> main-navbar__button-- main-navbar__button--complete">
> <img class="main-navbar__button-icon" src="
> https://icon-library.net/icon/icon-svg-27.html"
> alt="icon1">Button1</button>
> </li>
> Appreciate your help on this matter!
> Thanks,
> Sudheer
> > > > >