Separators

Separators are used to visually separate items in a list. HTML unordered lists (UL) should be used with with CSS list properties to provide accessible seperator images.

Inaccessible Image Separators for a Navigation Menu

A typical application is in navigation bars/menus. This example is paraphrased from part of the African American Studies and Research Program Website. Styling on the menu was originally done with TABLE layout, images, and javascript; this example is a modified version:

It is good that ALT text is provided for the navigation items (images) and is set to alt="" for the separators. However, the images used for menu items have no graphical content, just textual content. It is less confusing and easier to both access and maintain if text is used for the content and CSS is used for styling. Additionally, the table layout is confusing and difficult to users with non-graphical browsers; these navigation items are really a list and not entries in some data table.

Accessible Styling and Lists Instead of Image Separators

Here is an example of an accessible navigation menu, using CSS and list markup.

Notice that

The items are in a list
The list separator has been set to "none" in the CSS
CSS border attributes are used to draw the separator
CSS :hover and :focus have been used to provide the link mouse and keyboardhovering behavior instead of Javascript
This menu resizes when text size is altered
This menu content "reflows" when the size of the window shrinks
This menu appears as a list when stylesheets are disabled

Accessible Example HTML Source

<div class="separatorExample">

  <ul title="African American Studies and Research Program Resources">

    <li><a class="first" href="">Home</a></li>

    <li><a href="">About</a></li>

    <li><a href="">Education</a></li>

    <li><a href="">News & Events</a></li>

    <li><a href="">Resources</a></li>

  </ul>

</div>

Accessible Example CSS Source

div.separatorExample {

  margin: 0;

  padding: .1em;

  margin-top: .1em;

  margin-bottom: .1em;

  background: #000000;

  text-align: center;

}

div.separatorExample ul {

  list-style: none;

  margin: 0;

  padding: 0;

  padding: .5em;

}

div.separatorExample li {

   margin: 0;

   padding: 0;

   display: inline;

}

div.separatorExample a {

   margin: 0;

   padding: 0;

   padding-left: .5em;

   padding-right: .5em;

   text-decoration: none;

   color: #d49c2d;

   background: #000000;

   border-left: solid 2px #d49c2d;

   font-size: medium;

   font-variant: small-caps;

}

div.separatorExample ul a.first {

  border-left: none;

}

div.separatorExample ul a:hover, div.separatorExample ul a:focus {

   color: #FFFFFF;

}

Inaccessible Example HTML Source

HTML Bad Example Source: