WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: tabpanel mark-up, possible effect of role=presentation

for

From: Birkir R. Gunnarsson
Date: Aug 6, 2015 10:25AM

Be mindful of using aria-hidden="false" as it may override things
inside the tabpanel that are supposed to be hidden.
<div role="tabpanel" aria-hidden="false">
<div id="userOpinionSecret" style="display: none">WE know this user,
he is not popular</div>
</div>
Users, at least of some screen readers, will see tthis text, because
aria-hidden="false" overrides display: none;
If you are using display: none type class to hide inactive tabpanels
you do not need to add aria-hidden to that.
I have passed tabbed interfaces where all tabs are in focus order,
though I have recommended full implementation as strong best practice.
Jaws treats tabs as comboboxes (you can get to them using keyboard
shortcut "c") and it makes sense in a way, but only if arrow key
navigation is enabled.
I would be surprised if adding aria-controls solves the issue, though
I hope it does.



On 8/6/15, Detlev Fischer < <EMAIL REMOVED> > wrote:
> Hi,
> thanks to Jon and Leonie and Birkir for your quick and helpful suggestions!
>
> The main deviation from the recommended pattern is that on reaching the
> tablist, arrow navigation is not used to navigate between tabs - tabs are
> indeed reached by tabbing to them, and enter on the focused tab updates the
> tabpanel content. (We actually have at times recommended that behaviour to
> avoid a situation where users not familiar with the tab pattern and
> switching to arrowing may miss content inside not active tabpanels.)
>
> Jon: the tabs themselves do not have aria-hidden on them, and they are the
> ones that are not read by the screenreader when arrowing through content...
>
> What is missing in the current mark-up of tabs is actually the
> "aria-controls" attribute referencing the respective tabpanels. So adding
> that might make a difference.
>
> Birkir: the ol holding the li elements witn role=presentation indeed carries
> role=tablist.
>
> --
> Detlev Fischer
> testkreis c/o feld.wald.wiese
> Thedestr. 2, 22767 Hamburg
>
> Mobil +49 (0)1577 170 73 84
> Tel +49 (0)40 439 10 68-3
> Fax +49 (0)40 439 10 68-5
>
> http://www.testkreis.de
> Beratung, Tests und Schulungen für barrierefreie Websites
>
> Jonathan Avila schrieb am 06.08.2015 16:30:
>
>> Detlev, perhaps aria-hidden is not being updated in time for the screen
>> reader
>> to see the updated content.
>>
>> Jonathan
>>
>> --
>> Jonathan Avila
>> Chief Accessibility Officer
>> SSB BART Group
>> <EMAIL REMOVED>
>> Phone 703.637.8957
>> Follow us: Facebook | Twitter | LinkedIn | Blog | Newsletter
>>
>>
>>