Accessible Design: Best Practices

Layout

Organization | Using Style Sheets for Consistency |
Standard Page Elements: header information, link to home page, navigation to major sections, search option, and a link to OSU home page.

Organization.

To optimize the usability of your site: pick a place for stable and repeating elements, such as logos, navigation bars, and even the bulk of the content, and keep them there.

For instance, the WAC site uses the same basic layout for each page: search box at the top, home page link at the top-left, navigation bar center, and content below. Here's a sample (from the WAC Resources page):

Our site uses style sheets to create "Tabs" that can be altered to indicate the current or "selected" tab. The secondary menu changes based on the selected tab. In addition, we offer a "breadcrumb" navigation, using JavaScript. Because JavaScript is not an accessible scripting method (see Scripts in this tutorial), this is a "secondary" method of navigation. All pages in our site can be accessed using the tabs. The breadcrumbs serve as an additional aid to help users understand where they are in the site and offers an alternate method of navigation.

return to top

Using Style Sheets for Consistency

If used properly, Cascading Style Sheets (CSS) can help you create a uniform "look" for your site by defining font type, colors, and backgrounds site-wide.

For more information, see the Style Sheets section in this guide.

return to top

Standard Page Elements.

As the Web has developed, users have come to expect certain elements on every web page they visit. Including these elements in the expected locations helps users quickly get the "lay of the land" whether they arrive at your stunning home page or via a "deep link" somewhere deep within the structure of your site.

Include on every page:

• Complete header information, including doctype, language declaration, title, meta description, meta keywords, and style sheet link (if used). Header information helps users find the pages they want and identify the page they are on. It also helps browsers correctly interpret your pages. For more information, see the Header Information section of this guide.
• A link to your home page (usually located in the upper-left corner of the page. But, as long as your consistent across the site, can be moved to a different location). The link should either be in a text link or represented by an easily identified graphic link, such as an image of a home or a program logo.
• The Center for the Study and Teaching of Writing site shows a good example of a home page link using a logo.
• The College of Biological Sciences uses a image-for-text logo. In most cases, designers should avoid using images where text would work just as well. However, logos are the exception to the rule.
• The Department of Computer and Information Science uses a text link, which appears in the gray navigation bar on the top-right. This is a good example of changing the expected location (top-left), but keeping consistent, so users can quickly orient themselves to the site.
• Navigation to the major sections of your site. For more information on creating user-friendly and accessible navigation, see the Navigation section in this guide.
• A search option. In general, the search should appear as close to the top of the page as possible, and preferably before navigation. OSU has an easy and useful search engine that you can use on your site. To see complete information on including the OSU search on your page, visit OSU's HTML resources page.
  
  Here is an example of a simple search form using the OSU search engine:

Here is the HTML code used to create this search box. Simply change the URL information to your own site location:

<form action="http://search.uts.ohio-state.edu/query.html" method="GET">
<p><input type="hidden" name="qs" value="+url:yoursite.osu.edu">
<label for="search">Search site:</label>
<input name="qt" type="text" value=" " size="30" maxlength="30" id="search">
<input type="submit" value=" SEARCH " width="75" alt="Seek" border=0 name="submit" id="search" accesskey="s">
<a accesskey="h" href="http://search.uts.ohio-state.edu/help/">Search Help</a></p>
</form>

• A link to the OSU home page. If your site is hosted by a college, department, or affliated program of The Ohio State University, you should include a link to the OSU home page, both as a convenience to visitors, as well as an identifier that makes your association clear. In addition, many colleges require departments and programs to display a link back to the college home page.
  
• OSU is encouraging all university-affiliated Web sites to adopt the "Red/Gray" navigation bar as a standard header. Download a copy of the navigation bar template at the OSU Resources / HMTL, Graphics page.
• To find out more about when and how to link back to the OSU home page, visit the IT Polices page from the Office of the Chief Information Officer.

For more information on navigation guidelines, see the WAI's Web Content Accessibility Guidelines 1.0 .

return to top

Next