Difference between revisions of "ARIA Tabs"
Jump to navigation
Jump to search
| Line 81: | Line 81: | ||
<ul class="tabs clearfix" role="tablist"> | <ul class="tabs clearfix" role="tablist"> | ||
<li> | <li> | ||
| − | <a role="tab" href="#" id="xTab1id" class="accTab tab1" data-internal="tab1content" data-role="Tab" data-insert="tabInsertId" data-defaultopen="true"> | + | <a aria-label="flights (aria-label)" role="tab" href="#" id="xTab1id" class="accTab tab1" data-internal="tab1content" data-role="Tab" data-insert="tabInsertId" data-defaultopen="true"> |
<span>Flights</span> | <span>Flights</span> | ||
</a> | </a> | ||
</li> | </li> | ||
<li> | <li> | ||
| − | <a role="tab" href="#" id="xTab2id" class="accTab tab2" data-internal="tab2content" data-role="Tab" data-insert="tabInsertId"> | + | <a aria-label="hotels (aria-label)"role="tab" href="#" id="xTab2id" class="accTab tab2" data-internal="tab2content" data-role="Tab" data-insert="tabInsertId"> |
<span>Hotels</span> | <span>Hotels</span> | ||
</a> | </a> | ||
Revision as of 23:10, 28 February 2015
ARIA Tabs Demo
The tab controls are keyboard accessible.
Set focus on the tab control.
Press the Arrow keys to move focus between tabs.
Press Home or End to move to the first or last tab.
Press any letter or number to jump to a tab starting with that character or digit.
Press the Spacebar to open (or optionally toggle if configured) the selected tab.
Mouse users can click the desired tab as usual.