WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Exposing the selected state of buttons

for

From: Aditya
Date: Nov 22, 2019 5:38AM

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