Appendix

Fundamentals

1.1. Basic Principles

1.1.1. 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.

1.1.2. 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.

1.1.3. 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.

1.2. Markup

1.2.1. 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.

1.2.2. 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.

1.2.3. 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

2.1. Basic Principles

2.1.1. 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.

2.1.2. 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.

2.1.3. 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.

2.1.4. Design pages that function without style sheets

Some users do not access styles. Design pages that are comprehensible and usable without style sheet formatting.

2.2. Markup

2.2.1. Write valid code

Valid code is essential to solid document structure. Identify document type and validate pages to ensure quality and compatibility.

2.2.2. 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

3.1. Basic Principles

3.1.1. 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.

3.1.2. 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.

3.2. Size

3.2.1. 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.

3.2.2. 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.

3.2.3. 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.

3.3. Color

3.3.1. 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.

3.3.2. 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.

3.3.3. 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.

3.4. Markup

3.4.1. Mark up text using structural tags

Structural markup adds meaning to documents. Use structural tags—H1H6, P, EM, STRONG, and so on—to describe the meaning and function of text elements.

3.4.2. 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

4.1. Basic Principles

4.1.1. 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.

4.1.2. 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.

4.1.3. 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.

4.2. Text Alternates

4.2.1. 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.

4.2.2. 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.

4.2.3. 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="").

4.2.4. 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.

4.3. Size

4.3.1. 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.

4.3.2. 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

5.1. Basic Principles

5.1.1. 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.

5.1.2. 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.

5.2. Markup

5.2.1. 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.

5.2.2. 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

6.1. Basic Principles

6.1.1. 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.

6.1.2. 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.

6.2. Markup

6.2.1. 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.

6.2.2. 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.

6.2.3. 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

7.1. Basic Principles

7.1.1. 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.

7.2. Markup

7.2.1. 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.

7.2.2. 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

8.1. Basic Principles

8.1.1. 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.

8.1.2. 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

9.1. Basic Principles

9.1.1. 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.

9.1.2. 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.

9.2. Markup

9.2.1. 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.

9.2.2. 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.

9.2.3. 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.

9.2.4. 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.

9.2.5. 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.

9.2.6. 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

10.1. Basic Principles

10.1.1. Use text for links

Access to links is essential for Web usability. Use text for links, and style them using style sheets.

10.1.2. 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.

10.2. Markup

10.2.1. 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.

10.2.2. 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.

10.2.3. 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.

10.2.4. 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

11.1. Basic Principles

11.1.1. 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).

11.1.2. 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.

11.2. Markup

11.2.1. 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

12.1. Basic Principles

12.1.1. 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.

12.1.2. 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.

12.1.3. 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.

12.1.4. 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.

12.1.5. 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

13.1. Basic Principles

13.1.1. 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.

13.1.2. 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.

13.1.3. 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.

13.2. Markup

13.2.1. 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

14.1. Basic Principles

14.1.1. 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.

14.1.2. 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.

14.1.3. 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.

14.1.4. 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.

14.1.5. 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.

14.2. Markup

14.2.1. 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.

14.2.2. 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.

14.2.3. 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

15.1. Basic Principles

15.1.1. 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.

15.1.2. 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.

15.1.3. 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.

15.1.4. 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.

15.1.5. 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.

15.2. Markup

15.2.1. 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.

15.2.2. 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.

15.2.3. 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.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.144.113.30