Tutorials from WAC. Click or press ALT+T to return to the Tutorials main page.

Accessible Design: Best Practices

Return to Tutorial Contents


divider

Setting Header Information

Every web page in your site should contain standard header information that identifies the version of HTML used to create the page and the primary language, as well as gives a page title, a summary of the page and provides key words for easier searching.

DOCTYPE Declaration || Language Declaration ||
Title || META-Description || META-Keywords

return to top

DOCTYPE Declaration.

W.C.A.G. Priority 2 Guideline

Create documents that validate to published formal grammars. (WCAG 3.2)

Example:

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

Doctype is short for "document type declaration" (or DTD). Any (X)HTML Web page needs to define a Doctype : it is used to declare which version of (X)HTML the Web page conforms to. It appears as the first line of code on a web page, before the <html> tag.

To find your correct DOCTYPE declaration, see the WAI's list of valid DTDs you can use in your document. Some web editors, like Dreamweaver, allow you to define what DTD you want to use to validate your code and then automatically includes the appropriate DOCTYPE declaration in each new file. Advanced Web authors can create their own DTDs, but we recommend using a universal DTD for better browser and assistive technology support.

return to top

Why Declare a DOCTYPE?

In general the overall accessibility of any web page will be improved if you adhere to the standards for the web-presentation language you are using. Most developers of assistive technology or accessible web technology have based their accessibility features on the premise that content authors are following the standards. In addition, most web browsers will more or less follow the published standards. Thus, writing the "cleanest" code possible should ensure your pages will look best across the widest range of web display technology.

If your coding meets the requirements of a particular grammar, use the DOCTYPE statement as the first line of your HTML file. For example, the following DOCTYPE statement would indicate to servers, browsers and validators that you expect your code to conform to the HTML 4.0 Transitional standard:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

For more information on this guideline, see the WAI's Web Content Accessibility Guidelines 1.0 .Adapted from: WAI -- "Example for Checkpoint 3.2 - Create documents that validate to published formal grammars".

Language Declaration.

W.C.A.G. Priority 1 Guideline

Clearly identify changes in the natural language of a document's text and any text equivalents. (WCAG 4.1)

Example:

<HTML lang="en"> or <HTML lang="en-US">

This example declares the primary or default language for the entire document. You should also indicate any changes from the primary language. For example:

<p>Then he asked me, <lang="fr">"Comment-t-allez, vous?"</lang>, but I didn't understand him.</p>

lang = language-code [CI]

Two-letter primary codes are reserved for [ISO639] language abbreviations. Two-letter codes include fr (French), de (German), it (Italian), nl (Dutch), el (Greek), es (Spanish), pt (Portuguese), ar (Arabic), he (Hebrew), ru (Russian), zh (Chinese), ja (Japanese), hi (Hindi), ur (Urdu), and sa (Sanskrit). For a complete list of available language codes, see the WAI's ISO 639 Language Codes or the OASIS CoverPages Code for the Representation of the Names of Languages. From ISO 639, revised 1989.

return to top

Why Declare a Primary Language?

The language declaration is an attribute that defines the HTML tag. Language information specified via the lang attribute may be used by a browser to control display in a variety of ways. Some situations where author-supplied language information may be helpful include:

  • Assisting search engines.
  • Assisting speech synthesizers.
  • Helping a user agent select glyph variants for high quality typography.
  • Helping a user agent choose a set of quotation marks.
  • Helping a user agent make decisions about hyphenation, ligatures, and spacing.
  • Assisting spell checkers and grammar checkers.

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

return to top

Title.

W.C.A.G. Priority 2 Guideline

Provide metadata to add semantic information to pages and sites. (WCAG 1.1)

Example:

<title> WAC Tutorial: Before You Build </title>

The TITLE tag appears within the <head></head> tag in your document. There may only be one title in any document. It should identify the content of the document in a fairly wide context.

The title is not part of the text of the document, but is a property of the whole document. It may not contain anchors, paragraph marks, or highlighting. It is not normally displayed in the text of a document itself.

The title should ideally be less than 64 characters in length. That is, many applications will display document titles in window titles, menus, etc where there is only limited room. Whilst there is no limit on the length of a title (as it may be automatically generated from other data), it may be truncated if long.

return to top

Why Use a Title?

Titles are used in:

  • window title bars,
  • bookmark lists,
  • result lists from search services.

The title appears in the window of the browser and is also used in tracking the HISTORY (BACK button) of where the user has been. It can be particularly helpful when a user has multiple windows open, if it uniquely identifies each page. For example, here is a sample of a Windows status bar with multiple pages open from a site that does not use page titles:

example of status bar with untitled documents

Which of these "Untitled Documents" has the information you want to return to?  Keep in mind, too, most screen-readers read the title as a means of orienting users as they move through different windows.

Quick Tip: Be sure to use descriptive titles. "Section One" won't help much when it shows up in a search results list. Section one of what?. Better: <title>Section One of the Modern Music Guide.</title>

For more information on designing good titles, see the W3C's Style Guide: Title.

return to top

META-description.

W.A.C. Best Practices

Provide META-descriptions for each page.

Example:

<meta name="Description" content="This is a summary of my page.">

META tags appear within the <head></head> tags in your documents.

return to top

Why Use the META-description?

Some search engines pick up this description to show with the results of searches, instead of showing the first few of lines of the page as the summary. Thus, a description can help users identify the content of your pages when searching, especially when the first lines of your pages consist of repeated content or menus.

In addition, you can define your own search fields with HTML meta tags. These fields can be searched using Infoseek's field syntax.

Suppose your page contains:

<meta name="author" content="William Shakespeare">

Infoseek will index this page so the that it can be found with any of the queries:

author:Shakespeare
author:"William Shakespeare"
author:"william shakespeare"

return to top

META-keywords.

W.A.C. Best Practice

Provide META-keywords for each page.

Example:

<META name="keywords" content="web, accessibility, access, design, center,">

META tags appear within the <head></head> tags in your documents.

return to top

Why Use the META-keywords?

A common use for META is to specify keywords that a search engine may use to improve the quality of search results. When several META elements provide language-dependent information about a document, search engines may filter on the lang attribute to display search results using the language preferences of the user. For example,

<-- For speakers of US English -->
< META name="keywords" lang="en-us"
content="vacation, Greece, sunshine">

< -- For speakers of British English -->
< META name="keywords" lang="en"
content="holiday, Greece, sunshine">

< -- For speakers of French -->
< META name="keywords" lang="fr"
content="vacances, Gr&egrave;ce, soleil">

return to top

 

Go to next tutorial page.
Next

divider

Organizing and Naming Your Site | Layout | Header Information | Navigation | Color | Style Sheets | Lists | Images and Multimedia | Image Maps | Tables | Forms | Frames | Scripts | Timed Response |

| Key to Guidelines | Validating Your Site |

| Start of Tutorial |

| View the entire tutorial in HTML format. |
| Download/print the tutorial in MS Word document format. |