W3C home > Mailing lists > Public > w3c-wai-ig@w3.org > April to June 2017

RE: Use of tablist role for tabbed content

From: Bryan Garaventa <bryan.garaventa@ssbbartgroup.com>
Date: Tue, 23 May 2017 16:43:25 +0000
To: Paul Sandwell <paul.sandwell@heathwallace.com>, "w3c-wai-ig@w3.org" <w3c-wai-ig@w3.org>
Message-ID: <BN6PR03MB2785B27FC0C81EE633CB766F98F90@BN6PR03MB2785.namprd03.prod.outlook.com>
The ARIA Tablist pattern does work well across both desktop and mobile, however what you are describing sounds more like an Accordion control, is that correct?

An Accordion construct is much easier to implement and doesn’t require an advanced keyboard paradigm.

An example of this code is included in the archive at

(View the Accordion folder in Examples)

The following screen reader test page documents the majority of such widgets as these for testing across desktop and mobile devices

Accordions are numbers 4 and 5, and Tabs are number 19.

All the best,

Bryan Garaventa
Accessibility Fellow
SSB BART Group, Inc.
415.624.2709 (o)

From: Paul Sandwell [mailto:paul.sandwell@heathwallace.com]
Sent: Tuesday, May 23, 2017 2:33 AM
To: w3c-wai-ig@w3.org
Subject: Use of tablist role for tabbed content

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 Sandwell

UI Team Lead
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
Received on Tuesday, 23 May 2017 16:44:00 UTC

This archive was generated by hypermail 2.3.1 : Tuesday, 23 May 2017 16:44:02 UTC