More examples and documents [HERE]
Content anchors:
- Documents
- Basic ARIA Page Markup
- Basic ARIA TAB Markup
- Basic label & input markup
- Input tooltips with no javascript
- Accordion based on Foundation 6
- Search Form
##Documents
A role or type attribute be added to the IMG element's collection of attributes, which would provide the sort of generic information that the current draft of HTML5 specifies should be contained in curly brackets as the value for alt -- for example:
- type="logo"
- role="layout" or type="layout"
- role="link" or type="link"
- role="button" or type="button"
- banner - banner contains the prime heading or internal title of a page.
- complementary - secondary indicates that the section supports but is separable from the main content of resource
- contentinfo - contentinfo has meta information about the content on the page or the page as a whole
- definition - definition indicates the definition of a term or concept
- main - main acts as the main content of the document
- navigation - navigation indicates a collection of items suitable for navigating the document or related documents
- note - note indicates the content is parenthetic or ancillary to the main content of the resource
- search - search indicates that the section provides a search facility
- presentation - An element whose implicit native role semantics will not be mapped to the accessibility API.
- menubar - A presentation of menu that usually remains visible and is usually presented horizontally.
| HTML 5 | ARIA Role |
|---|---|
<header> |
role="banner" |
<nav> |
role="navigation" |
<main> |
role="main" |
<footer> |
role="contentinfo" |
<aside> |
role="complementary" |
<section> |
role="region" * |
<article> |
role="article" * |
none |
role="search" |
<form> |
role="form" |
Strong winds expand fires ignited by high temperatures ...
###Basic ARIA page markup:
<header class="header" role="banner">
<div class="logo">
<a href="/" title="site title"><img src="#" type="logo" alt="site logo" /></a>
</div>
<nav role="navigation" aria-label="Main menu">
<ul>
<li>Put navigation here</li>
</ul>
</nav>
</header>
<main class="main_container" role="main">
<section class="section" role="region" id="section-1">
<article class="article" role="article"></article>
<article class="article" role="article"></article>
<article class="article" role="article"></article>
</section>
<section class="section" role="region" id="section-2">
<article class="article" role="article"></article>
<article class="article" role="article"></article>
<article class="article" role="article"></article>
</section>
</main>
<aside role="complementary">
<form role="form" class="form"></form>
</aside>
<footer class="footer" role="contentinfo">© Copyright Query Solutions 2016</footer>###Basic ARIA tab interface
<ul role="tablist">
<li role="presentation">
<a href="#section1" tabindex="0" role="tab" aria-controls="section1" aria-selected="true">Section 1</a>
</li>
<li role="presentation"><a href="#section2" tabindex="-1" role="tab" aria-controls="section2">Section 2</a></li>
<li role="presentation"><a href="#section3" tabindex="-1" role="tab" aria-controls="section3">Section 3</a></li>
</ul>
<section id="section1" role="tabpanel">...</section>
<section id="section2" role="tabpanel" aria-hidden="true">...</section>
<section id="section3" role="tabpanel" aria-hidden="true">...</section>###Basic label & input markup
<label for="name">Name:</label>
<input id="name" type="text" name="textfield">###Accessible input tooltips with no javascript
<form action="">
<fieldset>
<legend>Login form</legend>
<div>
<label for="username">Your username</label>
<input type="text" id="username" aria-describedby="username-tip" required />
<div role="tooltip" id="username-tip">Your username is your email address</div>
</div>
<div>
<label for="password">Your password</label>
<input type="text" id="password" aria-describedby="password-tip" required />
<div role="tooltip" id="password-tip">Was emailed to you when you signed up</div>
</div>
</fieldset>
</form>input:focus + [role="tooltip"] {
display: block;
position: absolute;
top: 100%;
}<ul class="accordion" data-accordion role="tablist">
<li class="accordion-item is-active">
<!-- The tab title needs role="tab", an href, a unique ID, and aria-controls. -->
<a href="#panel1d" role="tab" class="accordion-title" id="panel1d-heading" aria-controls="panel1d">Accordion 1</a>
<!-- The content pane needs an ID that matches the above href, role="tabpanel", data-tab-content, and aria-labelledby. -->
<div id="panel1d" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel1d-heading">
Panel 1. Lorem ipsum dolor
</div>
</li>
</ul>###Search Form
<form action="…">
<div role="search">
<input type="search" aria-label="Search"> <button type="submit">Search</button>
</div>
</form>###DropDown Menu Examples here
More information about 'role' tags
More information about 'aria-live'