Difference between revisions of "ARIA Tabs"
Jump to navigation
Jump to search
| Line 1: | Line 1: | ||
== ARIA Tabs Demo == | == ARIA Tabs Demo == | ||
| + | <html lang="en"> | ||
| + | <link rel="stylesheet" type="text/css" href="/index.php?title=ARIA_Tabs_CSS.css&action=raw&ctype=text/css" /> | ||
| − | + | <script type="text/javascript" src="/images/b/b5/Jquery-1.8.3.min.js"></script> | |
| − | + | <script type="text/javascript" src="/images/7/72/Acc.dc.api.js"></script> | |
| − | + | <script type="text/javascript" src="/images/9/9c/Aria_tabs_module.min.js"></script> | |
| − | <script type="text/javascript" src="/images/b/b5/Jquery-1.8.3.min.js"></script> | + | <script type="text/javascript"> |
| − | <script type="text/javascript" src="/images/7/72/Acc.dc.api.js"></script> | ||
| − | <script type="text/javascript" src="/images/9/9c/Aria_tabs_module.min.js"></script> | ||
| − | <script type="text/javascript"> | ||
$A.bind(window, 'load', function(){ | $A.bind(window, 'load', function(){ | ||
| Line 53: | Line 52: | ||
<div class="Body"> | <div class="Body"> | ||
| − | + | <div class="intro tac"> | |
| − | <div class="intro tac"> | ||
| − | |||
<!-- The tab list container element must include the attribute role="tablist", and all tab item nodes must include the attribute role="tab" to ensure accessibility for screen reader users. | <!-- The tab list container element must include the attribute role="tablist", and all tab item nodes must include the attribute role="tab" to ensure accessibility for screen reader users. | ||
Additionally, both the tab list container element and all tab item nodes must include unique ID values. | Additionally, both the tab list container element and all tab item nodes must include unique ID values. | ||
| Line 83: | Line 80: | ||
<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 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 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> | ||
| − | </li> | + | </li> |
| − | + | <li> | |
| − | <li> | + | <a role="tab" href="#" id="xTab3id" class="accTab tab3" data-internal="tab3content" data-role="Tab" data-insert="tabInsertId"> |
| − | <a role="tab" href="#" id="xTab3id" class="accTab tab3" data-internal="tab3content" data-role="Tab" data-insert="tabInsertId"> | ||
<span>Attractions</span> | <span>Attractions</span> | ||
| − | </a> | + | </a> |
| − | </li> | + | </li> |
| − | + | <li> | |
| − | <li> | + | <a role="tab" href="#" id="xTab4id" class="accTab tab4" data-internal="tab4content" data-role="Tab" data-insert="tabInsertId"> |
| − | <a role="tab" href="#" id="xTab4id" class="accTab tab4" data-internal="tab4content" data-role="Tab" data-insert="tabInsertId"> | ||
<span>Contact</span> | <span>Contact</span> | ||
</a> | </a> | ||
| − | </li> | + | </li> |
| − | |||
</ul> | </ul> | ||
<div class="content" id="tabInsertId"></div> | <div class="content" id="tabInsertId"></div> | ||
| − | + | <div class="desc"> | |
| − | <div class="desc"> | + | <p> |
| − | <p> | + | The tab controls are keyboard accessible. |
| − | The tab controls are keyboard accessible. | + | </p> |
| − | </p> | + | <p> |
| − | <p><pre> | + | <pre> |
| − | Set focus on the tab control. | + | Set focus on the tab control. |
| − | Press the Arrow keys to move focus between tabs. | + | Press the Arrow keys to move focus between tabs. |
| − | Press Home or End to move to the first or last tab. | + | 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 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. | + | Press the Spacebar to open (or optionally toggle if configured) the selected tab. |
| − | Mouse users can click the desired tab as usual. | + | Mouse users can click the desired tab as usual. |
| − | </pre></p> | + | </pre> |
| + | </p> | ||
</div> | </div> | ||
| − | |||
</div> | </div> | ||
| − | |||
</div> | </div> | ||
| Line 133: | Line 124: | ||
<div id="tab1content"> | <div id="tab1content"> | ||
| − | <div> | + | <div> |
| − | <button>United</button> | + | <button>United</button> |
| − | <button>Virgin</button> | + | <button>Virgin</button> |
| − | <button>Southwest</button> | + | <button>Southwest</button> |
| − | </div> | + | </div> |
</div> | </div> | ||
<div id="tab2content"> | <div id="tab2content"> | ||
| − | <div> | + | <div> |
| − | <a href="#">Motel6</a> | + | <a href="#">Motel6</a> |
| − | <a href="#">Marriott</a> | + | <a href="#">Marriott</a> |
| − | <a href="#">Hyatt</a> | + | <a href="#">Hyatt</a> |
| − | </div> | + | </div> |
</div> | </div> | ||
<div id="tab3content"> | <div id="tab3content"> | ||
| − | <div> | + | <div> |
| − | <button>World Famous Pez Museum</button> | + | <button>World Famous Pez Museum</button> |
| − | <a href="#">Not much else really</a> | + | <a href="#">Not much else really</a> |
| − | </div> | + | </div> |
</div> | </div> | ||
<div id="tab4content"> | <div id="tab4content"> | ||
| − | <div> | + | <div> |
| − | <form> | + | <form> |
| − | <label for="pName"> Name: </label> | + | <label for="pName"> Name: </label> |
| − | <input type="text" id="pName" name="pName" /> | + | <input type="text" id="pName" name="pName" /> |
| − | <br /> | + | <br /> |
| − | <label for="pEmail"> Email: </label> | + | <label for="pEmail"> Email: </label> |
| − | <input type="text" id="pEmail" name="pEmail" /> | + | <input type="text" id="pEmail" name="pEmail" /> |
| − | </form> | + | </form> |
| − | </div> | + | </div> |
</div> | </div> | ||
Revision as of 23:39, 9 November 2014
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.