Created
April 15, 2018 15:27
-
-
Save Biboswan/64691b34406da9123774cbf9ccb5601d to your computer and use it in GitHub Desktop.
tablepanels with aria
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Tabpanels with ARIA design pattern</title> | |
| <link rel="stylesheet" type="text/css" href="css/basic.css"> | |
| <link rel="stylesheet" type="text/css" href="css/tabpanels.css"> | |
| <script src="js/jQuery.js"></script> | |
| <script type="text/javascript"> | |
| $(function(){ | |
| var index = 0, tabs = $('a.tab'); | |
| tabs.bind( | |
| { | |
| keydown: function(ev){ | |
| var k = ev.which || ev.keyCode; | |
| if (k >= 37 && k <= 40){ | |
| if (k == 37 || k == 38){ | |
| if (index > 0) | |
| index--; | |
| else | |
| index = tabs.length - 1; | |
| } | |
| else if (k == 39 || k == 40){ | |
| if (index < (tabs.length - 1)) | |
| index++; | |
| else | |
| index = 0; | |
| } | |
| $(tabs.get(index)).click(); | |
| ev.preventDefault(); | |
| } | |
| }, | |
| click: function(ev){ | |
| index = $.inArray(this, tabs.get()); | |
| setFocus(); | |
| ev.preventDefault(); | |
| } | |
| }); | |
| var setFocus = function(){ | |
| tabs.attr( | |
| { | |
| tabindex: '-1', | |
| 'aria-selected': 'false' | |
| }).removeClass('selected'); | |
| $('.tabcontent').addClass('hidden'); | |
| $(tabs.get(index)).attr( | |
| { | |
| tabindex: '0', | |
| 'aria-selected': 'true' | |
| }).addClass('selected').focus(); | |
| $($(tabs.get(index)).attr('href')).removeClass('hidden'); | |
| }; | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <h1>Tabpanels with ARIA design pattern</h1> | |
| <p>These tabpanels are created using the <code><ul></code>, <code><li></code>, and <code><div></code> elements, with scripting to provide the expected behaviour. Additional semantic information is provided with <a href="https://www.w3.org/TR/wai-aria/">ARIA</a>.</p> | |
| <h2>Example</h2> | |
| <div class="example"> | |
| <ul role="tablist" id="tabs"> | |
| <li role="presentation"><a role="tab" aria-selected="true" aria-controls="tabpanel1" id="tab1" href="#tabpanel1" class="tab selected">Blanco</a></li> | |
| <li role="presentation"><a role="tab" aria-selected="false" aria-controls="tabpanel2" id="tab2" href="#tabpanel2" class="tab" tabindex="-1">Reposado</a></li> | |
| <li role="presentation"><a role="tab" aria-selected="false" aria-controls="tabpanel3" id="tab3" href="#tabpanel3" class="tab" tabindex="-1">Jovan</a></li> | |
| </ul> | |
| <div role="tabpanel" aria-labelledby="tab1" id="tabpanel1" class="tabcontent"> | |
| <p>Blanco tequila is...</p> | |
| </div> | |
| <div role="tabpanel" aria-labelledby="tab2" id="tabpanel2" class="tabcontent hidden"> | |
| <p>Reposado tequila is...</p> | |
| </div> | |
| <div role="tabpanel" aria-labelledby="tab3" id="tabpanel3" class="tabcontent hidden"> | |
| <p>Jovan tequila is...</p> | |
| </div> | |
| </div> | |
| <h2>Notes</h2> | |
| <p>The <a href="https://www.w3.org/TR/wai-aria/roles#tablist"><code>tablist</code></a>, <a href="https://www.w3.org/TR/wai-aria/roles#tab"><code>tab</code></a>, and <a href="https://www.w3.org/TR/wai-aria/roles#tabpanel"><code>tabpanel</code></a> roles expose the <code><ul></code>, <code><a></code>, and <code><div></code> elements as a collection of tabs and corresponding tabpanels in the accessibility tree.</p> | |
| <p>The <a href="https://www.w3.org/TR/wai-aria/roles#presentation"><code>presentation</code></a> role prevents the <code><li></code> elements from being mapped in the accessibility tree.</p> | |
| <p>The <a href="https://www.w3.org/TR/wai-aria/states_and_properties#aria-selected"><code>aria-selected</code></a> attribute indicates which tab is currently selected.</p> | |
| <p>The <a href="http://w3c.github.io/html/editing.html#the-tabindex-attribute"><code>tabindex</code></a> attribute ensures that only the currently selected tab is included in the tab order.</p> | |
| <p>The <a href="http://w3c.github.io/html/editing.html#the-hidden-attribute"><code>hidden</code></a> attribute hides all but the currently displayed tabpanel from view.</p> | |
| <p>The <a href="https://www.w3.org/TR/wai-aria/states_and_properties#aria-controls"><code>aria-controls</code></a> attribute establishes a relationship between each tab and its corresponding tabpanel.</p> | |
| <p>The <a href="https://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby"><code>aria-labelledby</code></a> attribute reuses the name of the tab as the accessible name of the corresponding tabpanel.</p> | |
| <p>The <code>click</code> and <code>keydown</code> event listeners capture the expected mouse and keyboard events for activating the tabs.</p> | |
| </body></html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment