WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Exposing the selected state of buttons

for

From: Sudheer Babu
Date: Nov 22, 2019 3:13AM

@Srinivasu, no tabpanel role is used, aria-current is the one I'm thinking
too. But, seems like NVDA is not announcing the aria-current in Browse mode
and announces it as current only in Focus mode, am I missing anything?

@Patrick - doesn't the aria-pressed make the screen reader announced the
button as "toggle button"?

btw, thanks for your answers really appreciate it!

On Fri, Nov 22, 2019 at 3:31 PM Srinivasu Chakravarthula <
<EMAIL REMOVED> > wrote:

> 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.
>
> Regards,
>
> 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
> > > > > > > > > >
> > > > >