Tabpanels contain role=document elements

When testing with Windows 7 + Firefox (though sometimes other browsers) that when using the Tab key to navigate to the active tabpanel, that JAWS will announce the accessible name of the tabpanel, but will not have left forms mode. Wrapping the contents of the tabpanel in a role=document has been reported to "fix" this issue...

Tab Widget Example with role=document


No explicit default was set, so per standard functionality this first tabpanel will be shown by default.

Here's a link just to test keyboard tabbing. (it's odd talking about tabs, and tabs.)


This is an example of a heading being used to populate the tab's label, while also not removing heading from the tabpanel. This is done by adding the value "keep" to data-atabs-heading.

There are two headings here

The tab is getting its label from the data-atabs-tab-label. The heading is kept in the tabpanel because it does not have the data-atabs-heading attribute.

It wouldn't make much sense

If the contents of a tabpanel contain additional sub headings, it wouldn't make sense to remove the initial heading from the tabpanel. Doing so would create a gap in the heading structure.