 |
Accessible Design: Best Practices |
 |
|
|
||||
Setting Header InformationEvery 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 || DOCTYPE Declaration.
Example: 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. 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:
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.
Example:
This example declares the primary or default language for the entire document. You should also indicate any changes from the primary language. For example:
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. 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:
For more information on language declaration, see the WAI's Web Content Accessibility Guidelines 1.0 . Title.
Example:
The TITLE tag appears within the 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. Why Use a Title?Titles are used in:
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: 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.
For more information on designing good titles, see the W3C's Style Guide: Title. META-description.
Example: META tags appear within the 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:
Infoseek will index this page so the that it can be found with any of the queries: author:Shakespeare META-keywords.
Example:
META tags appear within the 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,
|
|
Organizing and
Naming Your Site | Layout | Header
Information | Navigation | Color
| Style Sheets | Lists
| Images and Multimedia | Image Maps | Tables
| Forms | Frames | Scripts |
Timed Response | | View the entire tutorial
in HTML format. | |
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: 
