Skip to content

Instantly share code, notes, and snippets.

@tBaxter
Created April 23, 2015 18:56
Show Gist options
  • Save tBaxter/790e11e27fd0d6f48faf to your computer and use it in GitHub Desktop.
Save tBaxter/790e11e27fd0d6f48faf to your computer and use it in GitHub Desktop.
<nav>
<ul role="tablist" class="tab-type"> <!-- we can use the role tablist rather than data-tabs -->
<li><!-- see note 1 -->
<a href="#panel1" role="tab" aria-controls="panel1" aria-selected="true">Tab 1< /a><!--see notes 2, 3 and 4 -->
</li>
<li><a href="#panel2" role="tab" aria-controls="panel2" aria-selected="false">Tab 2< /a></li><!-- see note 5 -->
</ul>
</nav>
...
<section id="panel1" role="tabpanel">
...
</section>
<section id="panel2" role="tabpanel"><!-- see note 6 -->
...
</section>
Note 1:
role=presentation is not appropriate here. It is defined as "presentation (role): An element whose implicit native role semantics will not be mapped to the accessibility API.
The intended use is when an element is used to change the look of the page but does not have all the functional, interactive, or structural relevance implied by the element type, or may be used to provide for an accessible fallback in older browsers that do not support WAI-ARIA." (http://john.foliot.ca/aria-hidden/#pr)
In the example case, they used a broken link with an empty href and an inline onclick event, because they wanted to make pandas said. In our case, it is still a functional anchor link.
Brett makes an alternate case: it's applied to the LI because we do not want the LI to be percieved as a LIST item. For me, jury is out. I'd like to see some more references.
Note 2:
We can and should use aria-selected instead of .active
Note 3:
role=tab is needed to note the tab within tablist. The question then is whether we feel it would be better on the link or LI. I think link.
http://www.w3.org/TR/wai-aria/roles#tab
Note 4:
We need aria controls (http://www.w3.org/TR/wai-aria/states_and_properties#aria-controls) but it's redundant given the href. Would we want JS to assign these (as well as role=tab), making the markup the dev has to do easier, and less likely to get wrong.
Note 5:
We have to set aria-selected-=false, as if it is not present (undefined) it is interpreted as "not selectable". I definitley think we may want to do this programmatically.
http://www.w3.org/TR/wai-aria/states_and_properties#aria-selected
Note 6:
For non-active panels, set aria-hidden=True via JS rather than hide. Make sure the attribute is set to display: none (and we'll need to test that.)
@bjankord
Copy link

Thanks Henry for looking into the presentation role. This was my gist of why someone would use it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment