Web Accessibility Best Practices

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

University of Illinois at Urbana/Champaign

Create a Unique Title for Each Web Resource

Summary

Good web design allows users to easily identify what website and sub-section of the website they are using. The identity is sometimes referred to as "branding" and is done through a combination of colors, graphical styling and logos that are used for the overall look and fell of a website. Many people with disabilities cannot see or use the graphics for various reasons and therefore need to have unique text titling that identifies the website and sub-section information. The title element in the head needs to contain information about the website and sub-section information, and h1 elements in the main content containing sub-section information and possibly the website information.

Benefit to People with Disabilities

  1. By using the title and h1 elements to uniquely title web pages people with disabilities can use browser and assistive technology features to easily identify the web resources they are viewing.
  2. Without unique titles people who are blind, have visual impairments or processing problems cannot easily determine if web resources have changed or the purpose of the current web resource. This forces them to have to read and try to interpret context information from the information available on the pages, which is especially difficult for pages with navigation bars and advertising banners.

Other Benefits

  1. Use of unique titles makes it easier for all users to identify the purpose of the web resource.
  2. Developers using h1 can use CSS to consistantly style the title of web resources.

Related Accessibility Requirements

Section 508
none
Web Content Accessibility Guidelines (WCAG 1.0)
3.5 Use header elements to convey document structure and use them according to specification. [Priority 2]
13.4 Use navigation mechanisms in a consistent manner. [Priority 2]

HTML Markup Details

The title element in the head contains a title for the website and sub-page.
The title element is typically rendered in the title bar at the top of the graphical window of most graphical browsers like Internet Explorer, Opera, Mozilla and Firefox.
Users of speech technologies like screen readers (e.g. Jaws, Windoweyes, and HAL can easily read the title content.
The h1 element includes sub-section information and may containg website information
The h1 element is easy for users to navigate to with assistive technologies as well as the keyboard in some browsers (e.g. Opera or Mozilla/Firefox accessibility extension).

Example Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>

    <title>Career Center: Overview</title>

    ....
  </head>
  <body>
    ....
    <h1>Overview</h1>
    ....
  </body>
</html>