RE: Use of tablist role for tabbed content

Hi,
this visual layout difference is true if the container for Tablist does not include Tabpanel containers embedded within it and rendered inline with the triggering elements.

The accessibility related reasons why the old ARIA Tab markup guidance for Accordions was removed in the APG 1.1 update are documented in the bug at
https://www.w3.org/Bugs/Public/show_bug.cgi?id=26254


Using ARIA Tab markup for Accordions does introduce important accessibility issues for various disability types.



Bryan Garaventa
Accessibility Fellow
SSB BART Group, Inc.
bryan.garaventa@ssbbartgroup.com
415.624.2709 (o)
www.SSBBartGroup.com

From: Sean Murphy (seanmmur) [mailto:seanmmur@cisco.com]
Sent: Wednesday, May 24, 2017 6:16 PM
To: Paul Sandwell <paul.sandwell@heathwallace.com>; Thierry Koblentz <thierry.koblentz@gmail.com>; Bryan Garaventa <bryan.garaventa@ssbbartgroup.com>
Cc: w3c-wai-ig@w3.org
Subject: RE: Use of tablist role for tabbed content

All,

From a screen reader users point of view, it doesn’t really matter if the tab strip is visually horizontal or vertical layout. As long as they know the Label, role, value and state  of the element and there is a consistent keyboard navigation. As desktop apps use both visual layouts and it doesn’t impact the screen reader user usage of the control (element).

Sean Murphy
Accessibility Software engineer
seanmmur@cisco.com<mailto:seanmmur@cisco.com>
Tel: +61 2 8446 7751       Cisco Systems, Inc.
The Forum 201 Pacific Highway
ST LEONARDS
2065
Australia
cisco.com

 Think before you print.
This email may contain confidential and privileged material for the sole use of the intended recipient. Any review, use, distribution or disclosure by others is strictly prohibited. If you are not the intended recipient (or authorized to receive for the recipient), please contact the sender by reply email and delete all copies of this message.

From: Paul Sandwell [mailto:paul.sandwell@heathwallace.com]
Sent: Thursday, 25 May 2017 12:42 AM
To: Thierry Koblentz <thierry.koblentz@gmail.com<mailto:thierry.koblentz@gmail.com>>; bryan.garaventa@ssbbartgroup.com<mailto:bryan.garaventa@ssbbartgroup.com>
Cc: w3c-wai-ig@w3.org<mailto:w3c-wai-ig@w3.org>
Subject: Re: Use of tablist role for tabbed content

Excellent article Thierry! This is the direction I started to lean towards (the demo definitely saved me having to build it to try it out!).

However now I'm beginning to wonder, as horizontal tabs are probably more of visual design consideration, would it make sense to treat is as an accordion for a screen reader user? (Similar to the point Bryan made in a separate response, something like this: http://whatsock.com/tsg/Coding%20Arena/ARIA%20and%20Non-ARIA%20Accordions/ARIA%20Accordion%20(Internal%20Content)/demo.htm).

I fear that it's a little pointless to tell the SR user that they're interacting with a set of tabs when there's a simpler implementation to go with. Or would this thinking make the tablist role completely redundant?

On 23 May 2017 at 18:32, Thierry Koblentz <thierry.koblentz@gmail.com<mailto:thierry.koblentz@gmail.com>> wrote:
For what it is worth, this is a different take on Tab List/Panels: http://cssmojo.com/tab-panel-the-right-way/


Demo: http://codepen.io/pankajparashar/full/oJEAF/


--
Thierry Koblentz
Sent with Airmail


On May 23, 2017 at 02:42:28, Paul Sandwell (paul.sandwell@heathwallace.com<mailto:paul.sandwell@heathwallace.com>) wrote:
Hi all,

Recently I've been doing research on how to tackle accessibility for a typical set of "tabbed content", where are page with lots of content is split into smaller tabs. I believe this may have come up in the past but I have a few additional concerns.

I understand that the WAI-ARIA design pattern is the most preferred approach (https://www.w3.org/TR/wai-aria-practices/#tabpanel) as it's used to emulate native OS behaviour. This is great, however:

  *   How well does this translate to mobile devices? What about larger touch only devices?
  *   Wouldn't the change in keyboard behaviour confuse an inexperienced sighted keyboard user?
Is it that we may be using the tablist role incorrectly? Tablist sounds like it's more suited to creating rich web applications (similar to menubar). Maybe we should be using a simpler aria-expanded="true|false" style approach for content based tabs instead?

Any thoughts?

Thanks in advance,
Paul

--

Paul Sandwell

UI Team Lead
HeathWallace
Email: paul.sandwell@heathwallace.com<mailto:paul.sandwell@heathwallace.com>
Phone: +44 (0)118 9561 757
LinkedIn: https://www.linkedin.com/profile/view?id=79070203


HeathWallace Ltd, 5-9 Merchants Place, Reading, RG1 1DT, UK

The information in this message is intended only for the individual or entity to whom it is addressed. It may contain privileged and confidential information that is exempt from disclosure by law and if you are not an intended recipient, you must not copy, distribute or take any action in reliance on it. Any dissemination of this communication is strictly prohibited. If you have received this message in error, please notify info@heathwallace.com<mailto:info@heathwallace.com>.

Warning: Computer viruses may be transmitted or downloaded on to your computer system via email communication. HeathWallace operate antivirus software.

However it is the recipient's responsibility to take any action necessary to prevent computer viruses being transmitted in this way. HeathWallace disclaim all responsibility which arises directly or indirectly from such transmission or computer viruses.

Registered in England: 4343367

Registered address: 5-9 Merchants Place, Reading, RG1 1DT



--

Paul Sandwell

UI Team Lead
HeathWallace
Email: paul.sandwell@heathwallace.com<mailto:paul.sandwell@heathwallace.com>
Phone: +44 (0)118 9561 757
LinkedIn: https://www.linkedin.com/profile/view?id=79070203


HeathWallace Ltd, 5-9 Merchants Place, Reading, RG1 1DT, UK

The information in this message is intended only for the individual or entity to whom it is addressed. It may contain privileged and confidential information that is exempt from disclosure by law and if you are not an intended recipient, you must not copy, distribute or take any action in reliance on it. Any dissemination of this communication is strictly prohibited. If you have received this message in error, please notify info@heathwallace.com<mailto:info@heathwallace.com>.

Warning: Computer viruses may be transmitted or downloaded on to your computer system via email communication. HeathWallace operate antivirus software.

However it is the recipient's responsibility to take any action necessary to prevent computer viruses being transmitted in this way. HeathWallace disclaim all responsibility which arises directly or indirectly from such transmission or computer viruses.

Registered in England: 4343367

Registered address: 5-9 Merchants Place, Reading, RG1 1DT