Girl Develop It is here to provide affordable and accessible programs to learn software through mentorship and hands-on instruction.
Some "rules"
Source: WebAIM Screen Reader Survey, February 2014 opens in a new window
Semantic structure is one of the most important usability features for screen reader users, as it helps them more easily understand and navigate the page structure. Headings also help all your users can and understand content. Read more about headings opens in a new window.
// Headings should not skip levels until h1-h4 have been established
<h1>Most important</h1>
<h2>Next most important</h2>
<h3>Third most important</h3>
<h4>Other heading</h4>
Tip: use the Firefox Web Developer Toolbar to inspect headings. Look under Information > View Document Outline.
The HTML5 Document Outline
opens in a new window
by the Paciello Group
<label for="name-field">Label</label>
<input type="text" id="name-field" name="name-field">
<label for="name-field">Label</label>
<input type="text" id="name-field"
name="name-field" placeholder="Type your name" />
<a href="goofy.html">Goofy page<a>
<a href="http://disney.com" target="_blank"
title="Link opens in a new window"
class="external-link">
Disney.com
<span class="offscreen">
opens in a new window
<span>
</a>
For links that open in new windows, an offscreen span
inside the link is most reliable for screen readers, but title=""
can also be used.
The tabindex attribute explicitly defines the tab order for focusable elements (typically links and form controls) within a page. It can be used to define whether elements should be focusable. (WebAIM opens in a new window)
<h1 tabindex="0">Focusable Heading<h1>
<a href="#" tabindex="-1">Link focusable only by script</a>
<div tabindex="1">Div tabbable in new order<div>
Note: tabindex
values higher than 0 require managing the entire page's tab order. Use with caution!
/* Hide only visually, but have it available for screenreaders.
Copied from HTML5 Boilerplate*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.reallyHidden {
display: none;
visibility: hidden;
}
.notHidden {
display: block;
visibility: visible;
}
Explore keyboard navigation with content that is hidden and offscreen
What is WAI-ARIA, what does it do for me, and what not? opens in a new window
What does this thing do?
<form role="search">
The current condition of this particular thing
<input aria-disabled="true">
The nature of the thing
<input aria-required="true">