E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 15 (In chronological order)

From: Sudheer Babu
Date: Fri, Nov 22 2019 2:50AM
Subject: Exposing the selected state of buttons
No previous message | Next message →

--00000000000073d9e80597ec58b1
Content-Type: text/plain; charset="UTF-8"

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

--00000000000073d9e80597ec58b1
Content-Type: image/png; name="image.png"
Content-Disposition: inline; filename="image.png"
Content-Transfer-Encoding: base64
Content-ID: <ii_k39ynojf0>
X-Attachment-Id: ii_k39ynojf0

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
gg==
--00000000000073d9e80597ec58b1--

From: Patrick H. Lauke
Date: Fri, Nov 22 2019 2:58AM
Subject: Re: Exposing the selected state of buttons
← Previous message | Next message →

On 22/11/2019 09:50, Sudheer Babu wrote:
[...]
> Now, please help me with the appropriate aria attributes to be used to make
> the screen reader announce the selected state of these buttons.

aria-selected="true"

--
Patrick H. Lauke

www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke

From: Patrick H. Lauke
Date: Fri, Nov 22 2019 2:59AM
Subject: Re: Exposing the selected state of buttons
← Previous message | Next message →

On 22/11/2019 09:58, Patrick H. Lauke wrote:
> On 22/11/2019 09:50, Sudheer Babu wrote:
> [...]
>> Now, please help me with the appropriate aria attributes to be used to
>> make
>> the screen reader announce the selected state of these buttons.
>
> aria-selected="true"
>

Actually, goodness...I need more coffee this morning.

aria-pressed="true"

--
Patrick H. Lauke

www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke

From: Srinivasu Chakravarthula
Date: Fri, Nov 22 2019 3:00AM
Subject: Re: Exposing the selected state of buttons
← Previous message | Next message →

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 ADDRESS 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
> > > > >

From: Sudheer Babu
Date: Fri, Nov 22 2019 3:13AM
Subject: Re: Exposing the selected state of buttons
← Previous message | Next message →

@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 ADDRESS 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 ADDRESS 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
> > > > > > > > > >
> > > > >

From: Detlev Fischer
Date: Fri, Nov 22 2019 3:15AM
Subject: Re: Exposing the selected state of buttons
← Previous message | Next message →

It is possible that I am missing something but a quick test seems to
indicate that on <button>, aria-pressed is better supported than
aria-selected.

See
http://3needs.org/en/testing/code/button-states.html

In NVDA,
- IE will render both (selected / pressed)
- Firefox will just render pressed
- Chrome will just render pressed
- Edge ( 42.17134.1038.0) will just render pressed

Detlev

Am 22.11.2019 um 10:58 schrieb Patrick H. Lauke:
> On 22/11/2019 09:50, Sudheer Babu wrote:
> [...]
>> Now, please help me with the appropriate aria attributes to be used
>> to make
>> the screen reader announce the selected state of these buttons.
>
> aria-selected="true"
>

--
Detlev Fischer
Testkreis
Werderstr. 34, 20144 Hamburg

Mobil +49 (0)157 57 57 57 45

http://www.testkreis.de
Beratung, Tests und Schulungen für barrierefreie Websites

From: Sudheer Babu
Date: Fri, Nov 22 2019 3:19AM
Subject: Re: Exposing the selected state of buttons
← Previous message | Next message →

Thanks Detlev!, you are right..Aria-selected works well on tab panels
aria-pressed seems to be working fine but just don't want the button to be
announced as "toggle buttons"

On Fri, Nov 22, 2019 at 3:45 PM Detlev Fischer < = EMAIL ADDRESS REMOVED = >
wrote:

> It is possible that I am missing something but a quick test seems to
> indicate that on <button>, aria-pressed is better supported than
> aria-selected.
>
> See
> http://3needs.org/en/testing/code/button-states.html
>
> In NVDA,
> - IE will render both (selected / pressed)
> - Firefox will just render pressed
> - Chrome will just render pressed
> - Edge ( 42.17134.1038.0) will just render pressed
>
> Detlev
>
> Am 22.11.2019 um 10:58 schrieb Patrick H. Lauke:
> > On 22/11/2019 09:50, Sudheer Babu wrote:
> > [...]
> >> Now, please help me with the appropriate aria attributes to be used
> >> to make
> >> the screen reader announce the selected state of these buttons.
> >
> > aria-selected="true"
> >
>
> --
> Detlev Fischer
> Testkreis
> Werderstr. 34, 20144 Hamburg
>
> Mobil +49 (0)157 57 57 57 45
>
> http://www.testkreis.de
> Beratung, Tests und Schulungen für barrierefreie Websites
>
> > > > >

From: Aditya
Date: Fri, Nov 22 2019 5:38AM
Subject: Re: Exposing the selected state of buttons
← Previous message | Next message →

Sudheer,

If the buttons have a stare change after activation and only one button is selected at a time, it makes the tabs.

Ex:
<div role=tabpanel>
<button id =tab1 role=tab aria-selected=true aria-controls=id_tabpanel>
...more tabs....
</div >


Sent from my iPhone

> On Nov 22, 2019, at 4:19 AM, Sudheer Babu < = EMAIL ADDRESS REMOVED = > wrote:
>
> Thanks Detlev!, you are right..Aria-selected works well on tab panels
> aria-pressed seems to be working fine but just don't want the button to be
> announced as "toggle buttons"
>
> On Fri, Nov 22, 2019 at 3:45 PM Detlev Fischer < = EMAIL ADDRESS REMOVED = >
> wrote:
>
>> It is possible that I am missing something but a quick test seems to
>> indicate that on <button>, aria-pressed is better supported than
>> aria-selected.
>>
>> See
>> http://3needs.org/en/testing/code/button-states.html
>>
>> In NVDA,
>> - IE will render both (selected / pressed)
>> - Firefox will just render pressed
>> - Chrome will just render pressed
>> - Edge ( 42.17134.1038.0) will just render pressed
>>
>> Detlev
>>
>>> Am 22.11.2019 um 10:58 schrieb Patrick H. Lauke:
>>>> On 22/11/2019 09:50, Sudheer Babu wrote:
>>>> [...]
>>>> Now, please help me with the appropriate aria attributes to be used
>>>> to make
>>>> the screen reader announce the selected state of these buttons.
>>>
>>> aria-selected="true"
>>>
>>
>> --
>> Detlev Fischer
>> Testkreis
>> Werderstr. 34, 20144 Hamburg
>>
>> Mobil +49 (0)157 57 57 57 45
>>
>> http://www.testkreis.de
>> Beratung, Tests und Schulungen für barrierefreie Websites
>>
>> >> >> >> >>
> > > >

From: Mark Magennis
Date: Mon, Dec 09 2019 5:07AM
Subject: Re: [EXTERNAL]Exposing the selected state of buttons
← Previous message | Next message →

Sudheer,

Be particularly careful if any of your users are likely to be using IE11. aria-pressed hardly works in IE11. JAWS reads the state only when aria-pressed=true, not when it is false, and doesn't announce state changes (when you press the button). NVDA only reads the state and announces state changes when aria-pressed=true, not false.

JAWS/Firefox doesn't work well either. Like NVDA/IE11, it only reads the state and announces state changes when aria-pressed=true, not false. I haven't looked to see what happens in Chrome.

For these reasons, my company's Toggle Button coding pattern doesn't use aria-pressed. There are other ways to reliably give a similar experience. A pity, because aria-pressed should be perfect for toggle buttons.

Mark

Mark Magennis
Skillsoft | mobile: +353 87 60 60 162
Accessibility Specialist

From: Birkir R. Gunnarsson
Date: Mon, Dec 09 2019 6:50AM
Subject: Re: [EXTERNAL]Exposing the selected state of buttons
← Previous message | Next message →

IE11 can't be helped I think, the browser is no longer being updated.
For the rest, we need to file issues, this pattern needs to be
supported going forward.


On 12/9/19, Mark Magennis < = EMAIL ADDRESS REMOVED = > wrote:
> Sudheer,
>
> Be particularly careful if any of your users are likely to be using IE11.
> aria-pressed hardly works in IE11. JAWS reads the state only when
> aria-pressed=true, not when it is false, and doesn't announce state changes
> (when you press the button). NVDA only reads the state and announces state
> changes when aria-pressed=true, not false.
>
> JAWS/Firefox doesn't work well either. Like NVDA/IE11, it only reads the
> state and announces state changes when aria-pressed=true, not false. I
> haven't looked to see what happens in Chrome.
>
> For these reasons, my company's Toggle Button coding pattern doesn't use
> aria-pressed. There are other ways to reliably give a similar experience. A
> pity, because aria-pressed should be perfect for toggle buttons.
>
> Mark
>
> Mark Magennis
> Skillsoft | mobile: +353 87 60 60 162
> Accessibility Specialist
>
>
>

From: glen walker
Date: Mon, Dec 09 2019 8:47AM
Subject: Re: [EXTERNAL]Exposing the selected state of buttons
← Previous message | Next message →

Whether one works better than the other (aria-selected vs aria-pressed),
make sure you understand which attribute is allowed based on the role of
the element.

https://www.w3.org/TR/html53/dom.html#allowed-aria-roles-states-and-properties

As Patrick alluded to in the first response to this question last month, he
originally said aria-selected but then quickly fixed that to aria-pressed.
If you look at the table in the URL given above and navigate down to the
"button" row, you'll see aria-expanded and aria-pressed (in addition to
global ARIA attributes) are the only ones allowed on a button.

As far as which browser/screen reader combinations it works on, absolutely
follow Birkir's advice and file issues if it doesn't work.

From: Mark Magennis
Date: Mon, Dec 09 2019 9:23AM
Subject: Re: [EXTERNAL]Exposing the selected state of buttons
← Previous message | Next message →

Birkir,

I'm afraid I'm one of these lazy people who grumble about defects but never file them as issues. You've prompted me to change my ways. Could you tell me, where do I file issues with JAWS, NVDA, and VoiceOver? And presumably if I find thst the defect is in the accessibility tree, I should file it against the browser? Where do I do that for Firefox, Chrome, and Safari?

I know there's no point in filing issues against IE11 but is it possible to view its accessibility tree? Does it even have one?

Mark

Mark Magennis
Skillsoft | mobile: +353 87 60 60 162
Accessibility Specialist

From: Patrick H. Lauke
Date: Mon, Dec 09 2019 9:57AM
Subject: Re: [EXTERNAL]Exposing the selected state of buttons
← Previous message | Next message →

On 09/12/2019 16:23, Mark Magennis wrote:
> Birkir,
>
> I'm afraid I'm one of these lazy people who grumble about defects but never file them as issues. You've prompted me to change my ways. Could you tell me, where do I file issues with JAWS, NVDA, and VoiceOver?

https://github.com/FreedomScientific/VFO-standards-support/issues
https://github.com/nvaccess/nvda/issues
https://bugs.webkit.org/

> And presumably if I find thst the defect is in the accessibility tree, I should file it against the browser? Where do I do that for Firefox, Chrome, and Safari?

https://developer.paciellogroup.com/blog/2014/06/filing-bugs/

> I know there's no point in filing issues against IE11 but is it possible to view its accessibility tree? Does it even have one?

While a bit out of date, you could use something like aViewer to see
what IE11 exposes https://developer.paciellogroup.com/resources/aviewer/

P
--
Patrick H. Lauke

www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke

From: Mark Magennis
Date: Mon, Dec 09 2019 10:56AM
Subject: Re: [EXTERNAL]Exposing the selected state of buttons
← Previous message | Next message →

Thanks Patrick.

Mark

Mark Magennis
Skillsoft | mobile: +353 87 60 60 162
Accessibility Specialist

From: Birkir R. Gunnarsson
Date: Mon, Dec 09 2019 1:54PM
Subject: Re: [EXTERNAL]Exposing the selected state of buttons
← Previous message | No next message

Thanks Patrick ;)


On 12/9/19, Mark Magennis < = EMAIL ADDRESS REMOVED = > wrote:
> Thanks Patrick.
>
> Mark
>
> Mark Magennis
> Skillsoft | mobile: +353 87 60 60 162
> Accessibility Specialist
>
>
>