WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Detlev Fischer
Date: Aug 6, 2015 9:52AM

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
>
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of
> Detlev Fischer
> Sent: Thursday, August 06, 2015 8:55 AM
> To: <EMAIL REMOVED>
> Subject: [WebAIM] tabpanel mark-up, possible effect of role=presentation
>
> Hi,
>
> I have a question for screen reader users. Curently I am testing a site that
> uses what appears to be a properly marked-up tabpanel: two tabs with role tab,
> content in two divs with role tabpanel. The tabs are technically skip links to
> the associated tabpanel divs. These two tab links sit inside li elements with
> role=presentation. The site also use aria-selected on the tabs and
> aria-hidden=true and display=none on the hidden tabpanel.
>
> Now my question: when navigating with arrow keys in NVDA and JAWS (Firefox),
> both screen readers do not read the tabs - they skip straight to the tabpanel
> content below. I fist though this might be due to role=presentatino on the li
> elements, but this role should not apply to the a elements inside the li
> elements, if I correctly understand the ARIA semantics.
>
> Tabbing through content will focus and rtead the tabs, but fail to read the
> tabpanel content when arrowing doen after activation (just a visible scroll
> effect).
> Could well be that I am not using the screen readers correctly. Or is this due
> to known screen reader bugs?
> Unfortunately I cannot point you to the site (behind a login).
>
> Any ideas?
>
> --
> 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
>
> > > http://webaim.org/discussion/archives
> > > > > >