Accessible Navigation Step 2

Linking the stylesheet navigation_2.css, enclosing the list in a <div id="navbar"> ..... </div> tag, and making each list item a hyperlink turns this list into a navigation menu.

The <div> ... </div> tag defines a region in the page. This one is identified as the "navbar". Divisions are usually styled with either an id or a class.

Each id can only be used once in a page ... that is, that type of region can only appear on a page once. It's usually used for items such as a banner, a page footer, a navigation menu, etc. In the stylesheet, an id definition begins with a "#" sign.

A class can be used to style multiple regions on a page. In the stylesheet a class definition begins with a ".".

Making the Navbar More Accessible

Use <nav> .... </nav> to define the section that is your navigation menu. This helps people who use a screen reader to jump to that specific region.

Making the Navbar More Visually Appealing

You can make the navigation bar more appealing by adding a stylesheet rule for how the "button" looks when the cursor is pointing to it. That's called hovering in web development and can be defined by a CSS rule such as:


#navbar a:hover {
background-color: #3e4142;
color: #FDFDFD;
border-color: #000 #CCC #CCC #000;
}

Play around with border colors and positioning until it looks the way you would like.

Resources

Web Accessibility Tutorials