Difference between revisions of "ARIA Tabs"

From Level Access Web Labs
Jump to navigation Jump to search
 
(3 intermediate revisions by the same user not shown)
Line 1: Line 1:
== ARIA Tabs Demo ==
+
== ARIA Tabs Demo AccDC==
  
<html>
+
<html lang="en">
<link rel="stylesheet" type="text/css" href="/index.php?title=ARIA_Tabs_CSS.css&action=raw&ctype=text/css" />
+
  <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/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/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/9/9c/Aria_tabs_module.min.js"></script>
<script type="text/javascript">
+
  <script type="text/javascript">
 
$A.bind(window, 'load', function(){
 
$A.bind(window, 'load', function(){
  
Line 53: Line 53:
  
 
<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 81:
  
 
<ul class="tabs clearfix" role="tablist">
 
<ul class="tabs clearfix" role="tablist">
 
+
  <li>
<li>
+
    <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">
<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 aria-label="hotels (aria-label)" 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 125:
  
 
<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>
  

Latest revision as of 13:31, 20 October 2015

ARIA Tabs Demo AccDC

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.
    

Dependencies