Back Matter
Appendix

Fundamentals

• Design simply: Simple designs are easier to use and maintain. Design simple sites, emphasizing important elements and using simple structures and clean, standards-based markup.
• Build well: The Web has properties that enable universal access. Take full advantage of these inherent properties, such as fallbacks, flexibility, and user control, to construct universally usable Web sites.
• Favor HTML over other formats: HTML is the best format for universal usability. Provide documents in nonstandard formats, such as PDF and Flash, only as an alternative to accessible HTML.
• Design for keyboard access: Some users navigate the Web using the keyboard only. Make sure all functional elements, such as links and forms, can be controlled and activated from the keyboard.
• Design for transformation: Web pages adapt to the user environment and user modifications. Design pages that adapt to different conditions, such as enlarged text or different window widths, while keeping their design integrity.
• Allow users to control their environment: Web users have control over many aspects of their environment. Do not take control of aspects of the user interface, such as text size and link underlines, that belong in the domain of the user.

Document Structure

• Separate content and presentation: Content that is encoded without display requirements can be accessed by any software or device. Use HTML documents for content, and CSS for presentation.
• Mark up document structure: Semantic markup produces content that can be read and interpreted by software. When encoding content, tag the meaning of document elements using structural HTML.
• Use style sheets for presentation: Style sheets provide control and flexibility for designers and users. Use style sheets to control the presentation of Web pages.
• Design pages that function without style sheets: Some users do not access styles. Design pages that are comprehensible and usable without style sheet formatting.
• Write valid code: Valid code is essential to solid document structure. Identify document type and validate pages to ensure quality and compatibility.
• Use linked style sheets: Linked style sheets promote design consistency and produce faster downloads. Include style information in a linked style sheet rather than on each Web page.

Text

• Use plain text for text: Text has many benefits over other content formats: it can be read by software, it adapts to different user environments, and text supports user customization. Whenever possible, favor text over other content formats.
• Use CSS for styling text: Style sheets provide the greatest flexibility for styling and customizing text display. Use style sheets to define text’s visual properties—font, size, color, and so on.
• Allow user settings to define base text size: Users should define their optimal text size setting. Allow the main text of a page to size according to the user-defined setting.
• Size other text elements relative to the user-defined text size: Relative measurements—such as percentages and ems—size elements relative to their parent element. Use relative measurements for type variants—such as headings and links—so they size relative to the user-defined text setting.
• Design pages that can accommodate different text sizes: Users must be able to resize text and still have a functional page. Design flexible pages so users can resize text without breaking the layout.
• Maintain contrast between text and background: Low-contrast color combinations interfere with readability. Use complementary colors and brightness values—such as black and white or purple and yellow—to produce the highest contrast between text and background.
• Use style sheets for setting text color: Not all color combinations work for all users. Define colors using style sheets so people who need certain color combinations—such as white on black or yellow on black—can apply a custom style sheet.
• Do not use text color alone to convey information: Color is not universally accessible and therefore cannot be relied upon as the sole means of conveying information. Pair other methods—such as typography or text—with color to convey emphasis or information.
• Mark up text using structural tags: Structural markup adds meaning to documents. Use structural tags—H1-H6, P, EM, STRONG, and so on—to describe the meaning and function of text elements.
• Use structural markup appropriately: Structural integrity requires that tags be used appropriately and consistently. When marking up text using structural markup, use the tag that accurately describes the element.

Images

• Use images purposefully: Images come at a cost to usability—they take time to download and are inaccessible to users who cannot see them. Use images with a purpose, such as providing information or enhancing the user interface.
• Do not use graphic text: Graphic text is not machine-readable, flexible, or customizable, and therefore is inaccessible to some users. Avoid using graphic text; use plain text instead.
• Avoid animated images: Animations are distracting and can even be debilitating. Avoid using animations. When using animations, allow users to control playback: play, pause, and stop.
• Provide alt-text for all relevant images: Users who cannot access images can get the equivalent information via alt-text. For images that are part of the user interface, use alt-text to provide the functional equivalent, such as "Go to next page" or "Print this page." For content images, use alt-text to provide a brief image description.
• Provide a full text description for content images: Content images may require more description than can be provided via alt-text. Provide a text description of the image information using a linked page or image caption.
• Provide blank alt-text for irrelevant or redundant images: Not all images are relevant to nonvisual users. When images are not relevant outside of a visual context—such as spacer images or custom bullets—provide blank alt-text (alt="").
• Maintain a catalog of image content: Alt-text and text descriptions are integral to providing image-based content. Maintain an image inventory that includes alt-text and text descriptions, particularly for large-scale or collaborative projects.
• Keep image dimensions as small as possible: Large images take longer to download and limit page flexibility. Keep image dimensions as small as possible, and save images using as much compression as possible without significantly degrading image quality.
• Use thumbnails for large images: Large images are sometimes integral to the purpose of a site. Provide access to large images using thumbnails or text links so users can choose whether to load the image.

Data Tables

• Use table markup for data: Structural integrity requires that tags be used appropriately. Avoid using tables for layout; use tables to mark up tabular information.
• Simplify data table layouts: Complex data tables can be challenging to navigate for both visual and nonvisual users. Present tabular information in its simplest form for easier scanning and screen reader access.
• Identify data table row and column headings: Table headings are essential for establishing context for the data contained within the rows and columns of a table. Code tables so row and column headings are explicitly tied to the data they describe.
• Use CAPTION and SUMMARY to describe data tables: Provide additional context by using CAPTION and SUMMARY tags to tie descriptive information about data tables to the tables they describe.

Layout Tables

• Use tables for layout only when necessary: Table markup is designed to describe tabular data and not for laying out pages. Use style sheets for page layout whenever possible; fall back on table layout only as a last resort.
• Use simple layout tables: Layout tables can be disorienting for nonvisual users when related elements are spread across table rows and nested tables. Design simple layouts using simple layout tables.
• Use only basic table tags: Screen reader software cannot distinguish between "real" tables and layout tables, making table markup difficult for nonvisual users to ignore. Make layout tables as unobtrusive as possible, using only basic table tags, such as TR and TD.
• Design layout tables for linear access: Software reads page elements in the sequence that they appear in the code. Make certain the logical information flow of the rendered page—banner, navigation, content, and footer—is reflected in the code.
• Use flexible cell widths: Flexible layouts adapt to different viewing conditions. Use flexible measurements—such as percentages—to specify the width of table cells so pages will adapt to accommodate different displays and text sizes.

Frames

• Avoid using frames: Standard behaviors—such as printing, bookmarking, and returning to a previous page—behave differently with frames-based pages than with standard Web pages and therefore cause usability problems for all users. Avoid using frames.
• Use frame titles to identify the function of each frame: Nonvisual users may have difficultly navigating a frames-based page without some idea of the contents and function of each frame. Use frame titles—such as "Banner," "Navigation," and "Content"—to label each frame so nonvisual users can differentiate and navigate between frames.
• Provide an alternative to frames: Some users opt not to use frames or to use a browser that does not support frames. Use the NOFRAMES tag to provide alternate access to framed content: for example, provide access to site navigation via the NOFRAMES tag.

Lists

• Use list markup for lists: Lists are a common element in Web page designs—most notably, navigation is a list of links. Use list mark-up for lists and use style sheets to control their visual properties.
• Avoid compound lists: Compound lists can be disorienting and difficult to decipher, particularly for nonvisual users. Break compound lists into sections marked by headings, or use numbering to indicate the relationships between list items.

Forms

• Design simple and clear forms: Forms are often difficult to complete because of needless complexity and unclear instructions. Design for clarity and simplicity so users can complete forms successfully.
• Provide an alternate to forms: Web forms may not satisfy the needs of all users. At minimum, provide an email address as an alternate method to communicate and interact with users who cannot or choose not to use forms.
• Label form fields: Field labels tell users what information to supply in form elements. Label all form fields with self-explanatory labels, and use the LABEL FOR tag to make explicit associations between form elements and their labels.
• Associate related form fields: Form elements are often divided into sections based on the type of information that is being requested, such as contact or shipping information. Use the FIELDSET and LEGEND tags to explicitly associate related form elements.
• Design forms for keyboard accessibility: Some users navigate and complete forms using the keyboard. Make all form elements operable from the keyboard, and ensure that their behavior is consistent with user expectations.
• Apply a logical sequence to form elements: Keyboard users access Web form elements in the sequence that they appear in the code. Ensure that form elements follow a logical sequence when accessed via the keyboard, and that all essential elements precede the control that submits the form.
• Don’t auto-populate form fields with text: Using default text to label text input fields creates usability problems for visual and nonvisual users. Use a label rather than default content to indicate the purpose of a text input field.
• Use form elements correctly: When used properly, menu fields, such as checkboxes, radio buttons, and select menus, can enhance usability and facilitate data collection. Choose the appropriate menu type, and make item selection an explicit user choice.

Links

• Use text for links: Access to links is essential for Web usability. Use text for links, and style them using style sheets.
• Use descriptive link text: Descriptive link text makes navigation easier and more efficient because descriptive links are easier to skim and allow users to make informed choices. Make link text clear and self-explanatory to support quick and effective navigation.
• Underline links that are not otherwise identifiable as links: Some users cannot distinguish colors and rely on other visual cues to identify links. Do not rely on color alone to identify links; use underlines or other visual indicators—such as borders or buttons—to mark links.
• Differentiate visited and unvisited links: The ability to distinguish between visited and unvisited links helps keep users from revisiting pages that did not prove successful. Differentiate unvisited and visited links so that users can identify the pages that they have already visited.
• Provide "you are here" orientation cues: Users can easily become disoriented when navigating the Web. Use orientation cues—such as an arrow marker next to the current page link—to identify the current page.
• Use alt-text for image links: Without alt-text, image-based navigation is virtually inaccessible to nonvisual users. Provide descriptive alternate text for image links, including links in image maps, for users who cannot access images.

Color

• Select contrasting colors for greatest legibility: Readability suffers when there is insufficient contrast between text and background. Maximize legibility by using color combinations that contrast in brightness (such as black and white) and hue (such as purple and yellow).
• Don’t use color alone to convey meaning: Some users cannot see color, while others have difficulties distinguishing certain colors. When using color to convey information, reinforce color with text so people who cannot access color can access the information.
• Allow users to override color settings: Users may need to apply customized color settings to access Web content. Use styles to define colors so users can easily override color settings. Avoid using images, which cannot be customized, for essential page content.

Audio and Video

• Provide text for audio content: Some users cannot access audio. Supply a text transcript of audio content; when audio is part of video, also synchronize the transcript as captions.
• Provide descriptions for video content: Some users cannot access video. Use synchronized descriptions to provide pertinent details about video, along with a separate file containing text descriptions and the audio transcript for users who cannot access video files.
• Provide alternate formats for media-based content: Many factors can impede access to media, including physical or technical limitations. When providing content using audio and video, supply alternatives so users can choose the version that best suits their needs and preferences.
• Make media keyboard accessible: Some users navigate the Web using the keyboard. Make sure media controls—such as play and pause—respond to keyboard commands, so users who rely on keyboard navigation can control media playback.
• Allow users to control media playback: Users should decide when to access media. Make loading and playback of media an explicit user choice, and provide controls for playing, pausing, and controlling volume.

Interactivity

• Use add-ons for interactivity only when necessary: Add-on technologies—such as JavaScript and Flash—are not as flexible or as accessible as HTML. Explore standard methods fully before resorting to a nonstandard format.
• Allow users to control the user interface: Users become disoriented when the interface behaves in ways that are inconsistent with expectations. Do not assume control of elements of the interface that belong in the domain of the user, such as window size and cursor position.
• Make interactivity keyboard-accessible: Some users activate elements using the keyboard and will be unable to use an interface that requires point-and-click interaction. Make sure all interactive elements are usable from the keyboard and behave in a manner that is consistent with user expectations.
• Provide an accessible alternate when using a nonstandard format: Some users cannot access interactivity designed using JavaScript or Flash. When providing content in a nonstandard format, provide the equivalent content as accessible HTML.

Editorial Style

• Break up text into segments: Web readers skim text to form an overview or to locate specific information. Break content into easy-to-skim segments, and use headings to identify the subject of each segment.
• Start sentences, headings, and links with keywords: Skimming is more efficient when editorial landmarks begin with keywords. Put important words or phrases at the beginning of sentences, headings, and links.
• Adopt a writing style that is clear and to the point: Web readers are goal-oriented and get bogged down by lengthy and unnecessary explanations and instructions. Be concise and factual; avoid meaningless prose.
• Use appropriate language and terminology: Users benefit from a writing style that is geared for their knowledge level. Adopt an appropriate writing style and vocabulary, and apply it consistently.
• Keep content current and links functional: Out-of-date content and broken links put into question the overall reliability of a site. Revisit content on a regular basis to validate and repair links and to update or remove content.
• Mark up language changes within a document: Software can read documents more accurately when language changes are identified. Indicate the primary document language, and use markup to mark language changes.
• Identify and describe abbreviations and acronyms: Software can provide clarifying information for abbreviations and acronyms. For improved screen reader access, use style sheets to indicate whether these elements should be spoken or spelled out.
• Provide a print option for lengthy documents: Some people prefer to print longer documents for offline reading. Provide a single-page printing version for documents that are likely to be printed.

Page Layout

• Design pages for linear access: Software reads the code of Web pages from top to bottom. Make sure the sequence of content is logical in the code. Put important content first, and group related content.
• Communicate visual information to nonvisual users: Some users cannot access information communicated via visual design. Make sure all relevant information that is communicated visually—through indents, spacing, proximity, and so on—is also conveyed in the code.
• Apply a consistent design: Users must learn how to use the Web at each site, and often within a single site, as the design and functional elements change from page to page. Adopt design conventions and a consistent navigation scheme for improved usability.
• Balance content and navigation: Many links make for busy, overwhelming pages. Rather than overload pages with navigation options, focus on presenting content and context-sensitive navigation.
• Provide navigation tools: Users often have difficulty finding what they are seeking. Provide tools to help users locate content, such as search, site index, site map, and quick links.
• Design flexible page layouts: Users who enlarge type or view pages on a small display need a flexible layout that will adapt to their viewing environment. Design flexible layouts using relative measurements.
• Use style sheets for layout whenever possible: Flexibility is best achieved when content and presentation are separate. Design pages using structural markup, and use style sheets to control page layout.
• Provide direct access to page content: Pages that begin with nonessential content can prove cumbersome for some users. Place content close to the top of each page, marked by a heading. Alternatively, provide a visible "Skip to main content" link at the beginning of each page.