Web Accessibility Best Practices

Campus Information Technologies and Educational Services (CITES) and Disability Resources and Educational Services (DRES)

University of Illinois at Urbana/Champaign

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:

Home About Us line break Education line break News & Events line break Resources

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

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:

<table border="0" cellpadding="0" cellspacing="0">

  <tr>

    <td><a href="">

      <img src="images/btn_home_off.jpg"

        alt="Home"

        name="Home"

        width="59"

        height="24"

        border="0"

      ></a></td>

    <td><img src="images/header_10.jpg" width="8" height="24" alt=""></td>

    <td><a href="">

      <img src="images/btn_about_off.jpg"

        alt="About Us"

        name="About"

        width="64"

        height="24"

        border="0"

      ></a></td>

    <td><img src="images/header_10.jpg" width="8" height="24" alt=""></td>

    <td><a href="">

      <img src="images/btn_education_off.jpg"

        alt="Education"

        name="Education"

        width="105"

        height="24"

        border="0"

      ></a></td>

    <td><img src="images/header_10.jpg" width="8" height="24" alt=""></td>

    <td><a href="">

      <img src="images/btn_news_off.jpg"

        alt="News & Events"

        name="NewsEvents"

        width="133"

        height="24"

        border="0"

      ></a></td>

    <td><img src="images/header_10.jpg" width="8" height="24" alt=""></td>

    <td><a href="">

      <img src="images/btn_resources_off.jpg"

        alt="Resources"

        name="Resources"

        width="104"

        height="24"

        border="0"

      ></a></td>

  </tr>

</table>