Organize web pages using heading-related tags such as <h1>, <h2>, <h3>, and so on. Heading tags establish page information structure and help users identify page hierarchy. Users interacting with the page using screen readers or other assistive technology can also use the page structure to navigate (see the ACCESSIBLE NAVIGATION pattern later in this chapter). They can jump from first-level headings (i.e., <h1>) to second-, third-, or lower-level headings (i.e., <h2>, <h3>, and so forth). They can also use assistive devices to “listen” to the page's outline in order to understand the page's structure (Cannon, 2008). For sighted users, using HTML-based headings helps determine the page's visual hierarchy because web browsers style headings in larger and bolder fonts than the rest of the text, even when style sheets are disabled.

Similarly, navigation menus, submenus, and lists within pages should be marked up using lists (<ol>, <ul>, <dl>, etc.). A general rule of thumb is to use ordered lists (<ol>) for lists that suggest some form of sequence or priority-based ordering, unordered lists (<ul>) for lists that have items without any suggested sequence or ordering, and definition lists (<dl>) when the items in the list consist of a term (marked up using <dt>) and its description (marked up using <dd>).

Use CSS to control the presentation and layout of a web page. Put all style declarations in a separate file to enable easy updates (see also the UNOBTRUSIVE STYLE SHEETS pattern next).

Do not embed style-related markup in a page using tags such as <font>, <b>, <i>, and so forth. In addition, do not use deprecated tags—that is, HTML tags that are no longer part of the HTML specification. The Ultimate HTML Reference (Lloyd, 2008) lists the following elements as deprecated: <applet>, <basefont>, <center>, <dir>, <font>, <frame>, <frameset>, <iframe>, <isindex>, <menu>, <noframes>, <s>, <strike>, <u>, and <xmp> (see www.w3.org/TR/REC-html40/index/elements.htmlfor deprecated HTML 4.0 elements).

Do not use CSS to give visual appearance of structural elements such as headings, paragraphs, and lists to <span> and <div> tags (Figure 11.1).

Screen readers and other assistive technologies rely on structural markup to communicate page structure to their users. Just because an item looks like a first-level heading, if it's not using <>, it will be presented as regular text to users of assistive technology.

Although both of these techniques use styles and achieve the same presentation results, the meaning of the first-level heading is lost without the <h1> tag.

Keep all style sheet declarations in external CSS files rather than embedding them in individual pages or presenting them inline with markup elements. Style sheet files can then be referenced using either the <link> or @import tag (Figure 11.2).

By keeping all style declarations in a separate file, it's also easier to update one external file rather than go through every application page and make updates.

Using relative units, such as em, %, and keywords, allows users to enlarge or reduce text size as needed in web browsers such as Firefox, Safari, and Internet Explorer. Although px (pixels) is considered a relative unit, Internet Explorer (version 6 and older) doesn't allow text in the px-based layouts to be resized. Internet Explorer 7, however, allows user to zoom in and out of the page; this feature zooms in/out the entire page, not just the text.

It's possible that some users may not know how to resize text using browser controls. Therefore, consider providing users an explicit way to resize text (Figure 11.3).

User style sheets are CSS files created by users and are used to override author style sheets to make pages easier to read. For example, a user might change the background color to black and the text color to yellow and set the font size larger to make the page easier to read. Most of the popular web browsers allow users to specify and use their own style sheet over the designer's/publisher's style sheet.

Browsers give preference to users’ style sheets unless a style declaration is marked !important in the style sheets. Not being able to override the author styles can, in some instances, make pages unreadable for some users. Therefore, avoid using !important declaration in style sheets.

Keep all JavaScript for the web application in external JS files rather than in the page itself or embedded in the HTML markup, and reference them using the <script> tag as follows:

Keeping JavaScript files separate from page structure also makes it easy to change scripts without updating individual pages within the application.

Do not embed JavaScript functions within page markup. That is, do not call JavaScript functions that use the approaches shown in Figure 11.4.

Calling JavaScript functions from page markup may prevent pages from working correctly in browsers where JavaScript is unavailable or disabled. A better approach is to attach functions to events for different page elements using the DOM³ Scripting approach (Keith, 2005). Use DOM methods such as getElementById and getElementsByTagName to find a specific element or a set of elements, and then assign behavior to specific events such as click, mouse over, and so forth (Figure 11.5).

Do not use JavaScript to navigate to a different page or change effects on the web page when users change the option in a dropdown list. This is typically accomplished using the onchange event handler in JavaScript. Instead, allow users to select the menu item and then click an adjacent form button to go to the page corresponding to the item they have selected.

If a dropdown list is used to submit a form or to navigate to a different page, it will be extremely difficult, if not impossible, for keyboard users to select an appropriate option. For example, if a dropdown list is used to navigate to a different page as users select an item in the list, this would trigger the “onchange” event, and users would be immediately taken to the corresponding page. The only way for assistive technology users to select the last item in the dropdown list would be to repeatedly go back after selecting an option from the dropdown list, navigating to the page, and then select the next option in the list and so forth, until the last item is reached.

Use <label> tags to associate field labels to their corresponding form elements as follows:

In this example, the text field for first name has an id of “firstName” that is referenced in the <label> tag using the “for” attribute to associate the label First Name to the corresponding text field.

Not only does the <label> tag make it easy for screen readers to correctly associate labels to form control irrespective of where the form control is positioned, but it also helps sighted users when they interact with radio buttons and checkboxes. When used with radio buttons and checkboxes, the <label> tag allows users to click the label to select the corresponding radio button or checkbox. Thus, users have a larger clickable area and are not restricted to clicking the smaller radio button controls or checkboxes (Figure 11.6).

In addition, to ensure that screen readers present information to users in the correct order, place labels that relate to text fields or dropdown lists before the form element in the markup. This does not apply to radio buttons and checkboxes, where labels come after the corresponding controls.

Use the <fieldset> tag to group related form controls and use the <legend> tag to provide a heading to the grouped form controls (Figure 11.7). This helps screen readers identify and communicate groups to users. The tags <fieldset> and <legend> can also be styled using style sheets to make them visually appealing (Adams, 2008).

Most browsers allow users to navigate among links, frames, and form elements on a page using the Tab key, which when pressed, moves the focus from one element to another in the order of their presence in the markup. In most cases, when the page is marked up correctly, the sequence in which users would move from one element to another would be correct. However, in cases, when the default tab sequence needs to be changed to provide a better form-filling experience, use the tabindex attribute for form elements (Figure 11.8; see also the KEYBOARD NAVIGATION pattern in Chapter 2).

Another way to make forms keyboard accessible and efficient to use is by using the accesskey attribute, which allows users keyboard access to frequently used areas on a page or form (Figure 11.9). For example, the accesskey attribute can be used to navigate among primary navigation options in a web application and can also be used with a link to allow users to navigate to corresponding pages using the keyboard.

When the accesskey attribute is specified, users can press a combination of the “modifier” key(s) (e.g., Alt or Ctrl keys) in conjunction with the character specified in the accesskey attribute. See Figure 11.10 for a list of modifier key(s) on different browsers.

Many forms use client-side scripting technology, such as JavaScript, to manipulate forms or check for validity of users’ data input. However, use of such scripting technology may render forms inaccessible to users with assistive technology or those who have disabled JavaScript in their browsers. Therefore, perform the form validation on the web server regardless of whether it's done on users’ browsers using JavaScript. This will ensure that forms remain accessible to all, including those using browsers that do not support JavaScript (see also the HIJAX approach discussed in the progressive enhancement pattern earlier in this chapter).

Decorative images refer to images that are used for presentation purposes only—for example, spacer images, transparent images, or filler photographs. Using the alt attribute to describe such images is not necessary because it doesn't communicate any relevant information to users. Therefore, use an empty alt attribute for images, such as <img src=“spacer.gif” alt=““ />.

When images are used only for decorative purposes, consider using them as background. Screen reader users will not see the image, and the need for an empty alt text will not arise. This can be easily accomplished using CSS (Figure 11.12).

Use the alt attribute for images when a short description for the image is sufficient. In cases where the image cannot be described succinctly, use the longdesc attribute to reference and link to the page where the detailed image description is provided (Figure 11.13).

Because the longdesc attribute is not supported by older assistive technologies, often designers put a “d-link” (description link) next to the image that opens the description file—the same file referenced in the longdesc attribute (Figure 11.14).

When describing images using either the alt or longdesc attribute, indicate the image's informational content and/or function as appropriate within its usage context. For example, consider Figure 11.15. This example from webAIM.org illustrates a good approach in determining what would constitute a meaningful text for the PDF icon image. Four potential values for the PDF icon's alt text are:

The preceding are discussed in the online article, Appropriate Use of Alternative Text (www.webaim.org/techniques/alttext/):

Graphic formats (e.g., GIF, JPEG, and PNG) appear pixelated when zoomed in. When text is used in graphics, users who have magnified the screen to improve readability would end up reducing the page's readability (Figure 11.16). Readability is further compromised when text is overlaid on another image or a patterned background. Therefore, as much as possible, avoid using text in graphics; it also helps with internationalization (see the EXTENSIBLE DESIGN pattern in Chapter 10).

Use the <caption> tag to provide a short descriptive title indicating the table's purpose (Figure 11.17). The information within the <caption> tag is displayed to users and can be formatted using style sheets.

In addition, use the summary attribute to describe in detail what the table presents. Because information contained within the summary attribute is not displayed, its main purpose is to describe the data table's purpose and any relevant formatting information for assistive technology users (Figure 11.18).

Ensure that data values are correctly associated with their headings by using the scope attribute. Such a practice lets assistive technology users know if data are tied to column headings (<th scope=“col”>), row headings (<th scope=“row”), or both (Figure 11.19).

Use the headers attribute to specify the relationship among the headings for a given cell in more complex tables. This is accomplished by attaching an id attribute to any cell that you want to be a header cell and then adding the ids of those header cells to the headers attribute of the data cells (Figure 11.20).

Identify sections within the page using headings markup—that is, use <h1> through <h6>. This allows users with screen readers and browsers to navigate using a keyboard (e.g., JAWS for Windows users can use the “h” key to navigate the page content).