HTML and CSS Reference
In-Depth Information
The Treehouse website has a great video that covers all these screen readers in a bit more detail:
ht-
HTML5 Semantic Markup
In order for screen readers to operate effectively, they need to be able to identify key areas on the page, such as
the navigation or main content section. HTML5 aims to make this task easier with the introduction of new semantic
markup.
The new HTML5 elements such as
<header>
,
<nav>
, and
<article>
can help computer programs identify the
location of key content on a web page. As the HTML5 specification explicitly defines what sort of content should be
contained within these elements, computer programs can make an educated guess that a
<nav>
element on a
page contains the navigation links, for example.
In theory, this concept works great, but in reality many screen readers are not yet harnessing the full potential of
these new semantic elements. Instead, many screen readers rely on something called
WAI-ARIA landmark roles.
WAI-ARIA is an accessibility standard that was developed before HTML5 existed. The landmark roles defined in
this specification do essentially the same job as the new HTML5 semantic elements; however, instead of using
special element tags, they use
role
attributes on standard HTML elements. For this topic, you focus on using
pure HTML5 to define the key areas on your pages. (You already did this when you created the page templates us-
ing HTML5 elements.) Some screen readers don't have fantastic support for the pure HTML5 approach yet, but it
is getting better.
If you are interested in learning more about WAI-ARIA landmark roles, check out Opera's guide at
ht-
Making Web Forms Accessible
Web forms can pose a problem for users who rely on screen readers. If your forms are not accessible, it can be hard
for users to navigate through your form fields or actually input data. This section shows you two ways to make your
web forms more accessible to users with disabilities.
Using Labels
One of the best ways to make your web forms more accessible is to make sure that you use labels with all your form
controls. Chapter 5 looks at labels more in-depth, but here's a quick refresher.
You use the
<label>
elements
for
attribute to assign an
<input>
element using the ID of that
<input>
ele-
ment, like this:
<label
for="name"
>Name:</label>
<input type="text" name="name"
id="name"
>
Using labels offers two accessibility benefits. First, although users with visual impairments may not be able to read
the screen, if you include a label, a screen reader can tell the user what to input into a form field by reading the label
aloud. The other main benefit is for users who have motor impairments and may not be able to control their mouse
precisely. When you assign a label to an input, that label becomes a click target for the form field. So if a user clicks
