HTML and CSS Reference
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.
Storyboard for the CAMshots sample Web site
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