HTML and CSS Reference
In-Depth Information
Navigation Lists and Web Accessibility
One challenge of Web design is creating Web documents that are accessible to users
with disabilities. Studies indicate that about 20% of the population has some type of
disability. Many of these disabilities don't affect users' capacity to interact with the Web.
But in some cases, users may need specialized Web browsers, such as screen readers
that provide Web content aurally for visually impaired users.
To accommodate these users, Web page authors can take advantage of the structural
elements provided by HTML5. For example, the
nav
element can allow users to either
quickly jump to a list of links or bypass such a list if they are more interested in the
content of the current document. Prior to HTML5 and the
nav
element, there was no way
of differentiating one list from another, and thus disabled users would be forced to wait
through a rendering of the same navigation list for each page they visited.
Because support for HTML5 is still in its infancy at the time of this writing, most
specialized browsers have not incorporated features that enable users to quickly access
the structural elements of most interest to them. However, as the specifications for
HTML5 are finalized and fully supported by the browser market, this ability will become
more commonly supported. Thus you should use the
nav
element and other structural
elements from HTML5 to provide more information to browsers about the content and
structure of your Web documents.
Working with Hypertext Links
Now that you've added a navigation list to each of the three sample pages, you will
change each item in those lists into a hypertext link so that users can easily move
between the three sample pages. Figure 2-10 shows the storyboard for the simple struc-
ture you have in mind.
Figure 2-10
Storyboard for the CAMshots sample Web site
home.htm
tips.htm
glossary.htm
Hypertext links are created by enclosing some document content within a set of open-
ing and closing
<a>
tags. The general syntax to create a hypertext link is
<a href=”
reference
”>
content
</a>
where
reference
is the location being linked to and
content
is the document content
that is being marked as a link. The
reference
value can be a page on the World Wide