ARIA Tab Pannel Example

About our product

Notes:

Although the code is short and simple, it is fully accessible. This example uses:

1. aria-selected to show what tab is selected
2. aria-controls to show the relationship between tabs and tab panels
3. aria-hidden, to hide the unselected tab panel
4. When an tab is selected the following states are toggled: aria-selected in both tab elements and aria-hidden on both tab panels.
5. CSS selectors are used to bind aria-hidden and CSS display:none.
6. CSS selectors are used to bind aria-selected and the classes for selected or non selected tab panels.
7. Keyboard accessibility is given by adding the enter key to the basic click event in the jquery code.
8. The tabs can also toggle using the left and right arrow keys (as a jquery function)
9. Note that often only the active tab is in the tabbing order. However, in this example both tabs are always in the tabbing order. I felt this pattern worked better for this context.

Author: Lisa Seeman