WebAIM - Web Accessibility In Mind

E-mail List Archives

Accessible tab generation using HTML5 and content preloading

for

From: Bryan Garaventa
Date: Nov 14, 2012 6:59PM

In case it's of interest.

The ARIA Tab generator now supports semantic configuration via HTML5, optional ARIA and non-ARIA implementations, optional preloading of external tab panels and images, and property overrides.

This is a significant update to the Tab Generator, which uses HTML5 attributes within the tab elements, so that external resource paths can be specified, or internal DOM nodes used as tab panels instead. Hidden text roles can also be controlled in this manner to provide accessible names for tab panel sections for screen reader users, the insertion point can be specified, and a default tab panel can be set to open automatically, all using HTML5 within the tab element markup.

You can see this in action at
http://whatsock.com/modules/aria_tabs_menu_modules/demo.htm
Where two flavors of tab generation are demonstrated, ARIA and Non-ARIA. This is controlled by setting the Boolean parameter for useARIA to true in the invocation statement at
http://whatsock.com/modules/aria_tabs_menu_modules/js/aria_tabs_module.js
which can be seen as applied for the demo page at
http://whatsock.com/modules/aria_tabs_menu_modules/js/setup.js
where 'preload' and 'preloadImages' are passed as configuration properties. This is the same preload functionality that was recently added to the Modal, Popup, and Tooltip modules.

The ARIA implementation pulls content from an external file, and preloads both HTML markup and images in advance to prevent any rendering delays when switching between tabs. All of the resource paths, tab panel hidden text role names, default panel opening, and insertion point settings are included within the HTML markup for each tab via the HTML5 'data-' attribute.

The same is true for the Non-ARIA implementation, except that the IDs for specific DOM nodes contained within the same page are set as tab panel contents instead.

In this case, high quality images were used to test the preloading feature, ranging between 200kb and 400kb in size per image, which isn't likely for standard tab panels. This makes a good test case however, to ensure proper functionality.

The reason there are two implementation types, is in case of a need to ensure IE6 compatibility, which can be achieved using the Non-ARIA method. The ARIA implementation has a nicer feel to it though, and was tested successfully using:
* JAWS 11 through 14 using IE 8 and 9 and Firefox.
* NVDA using IE 8 and 9 and Firefox.
* Voiceover using Mac and iOS Safari.

So here are the rules:

* Elements that are using the ARIA Tab implementation must include role=tab on the tab element, and role=tablist on the surrounding container tag.

* Any element that is a tab element should not include any other active elements (A or Button tags, etc.)

I know this last seems weird, but I've recently seen the following used: <div role=tab tabindex=0> <h3> <a href=#> Tab Name </a> </h3> </div>

To ensure accessibility, the only active element for a tab control should be the DOM node of that tab, and nothing else.

This is true as a general rule as well. Active elements should never contain other active elements that perform different actions, since these will not work reliably for keyboard and screen reader users.

The following HTML5 attributes are supported on each tab element:

data-role : (Optional) Specifies a custom name for the tab content panel, such as "Business Tab", which will be announced to screen reader users as "Business Tab Start" and "Business Tab End". The text for Start and End can be changed too by passing custom accStart and accEnd property values through the invocation statement as overrides. The role defaults to "Tab" if not assigned.

data-src : Specifies an external resource path where tab panel content can be loaded or preloaded from. Syntax: "path/file.html#containerId"

data-internal : Specifies the ID attribute value of a DOM node in the same page to use as tab panel content. This takes precedence over data-src if assigned.

data-insert : Specifies the ID attribute value of a container element where tab panels will be inserted.

data-defaultopen : Specifies whether a specific tab should open automatically.

Lastly, the new source code has been added to the AccDC API download at WhatSock.com, which includes the Modified BSD License for business integration.