Export (0) Print
Expand All

Accessibility Design Guidelines for the Web

Visual Studio .NET 2003

Accessible Web design is good Web design. Much of the information on the Web is not accessible to people with disabilities because of poor design. While many Web site managers and developers take into consideration various browser constraints, for the most part Web site managers and developers do not realize they are developing sites that people with disabilities have difficulty navigating, or in many cases, cannot navigate at all.

The following are top tips for accessible Web design:

  • Good ALT text for all graphics
    • Every image should have ALT text.
    • ALT text should convey the important information in the image.
    • Use simple text for simple images. For example, "*" for a bullet, numbers for a numbered image, and a single space character or an empty string for invisible images that are typically used for spacing.
    • For complex images, provide a link to a separate page with a more detailed description.
    • Prevent the ALT text from forming columns; put images on separate lines, use delimiters around the ALT text, or do not specify the image's HEIGHT and WIDTH attributes.
  • Proper use of image maps
    • Provide text links in addition to any image map links, either in-line or at the bottom of the page.
    • Use meaningful ALT text, such as "Map of campus; use text links below."
    • Use client-side image maps whenever the client supports them.
    • Use TITLE attributes to name AREA fields in client-side image maps.
  • Useful link text
    • Link text should be meaningful but brief.
    • Use link text that can stand alone, as when the user is given a list of the links in the file. If this is inappropriate for the link text, use the TITLE attribute to provide a more descriptive string.
  • Good keyboard navigation
    • The TAB key moves between links and image map areas in the order they are defined in the HTML. Be sure it generally moves from left to right and top to bottom, but does not skip back and forth between groups of items.
    • Use the TABINDEX attribute to specify proper keyboard navigation order when necessary.
    • Use the ACCESSKEY attribute to provide access keys for all controls and for links that act like controls.
    • Underline the access key in the control's label.
  • Alternatives to all controls and applets
    • Provide an alternate page that uses static text and graphics for displaying information and standard links for input.
    • Use either LABEL or TITLE tags to associate a name with every control.
    • ActiveX controls should use Active Accessibility to be compatible with accessibility aids.
  • Alternate pages that do not use frames
    • You can use the NOFRAMES tag to show a link to a page that does not use frames.
    • Be sure to label frames with the TITLE attribute.
  • Proper use of tables and their alternatives
    • Provide alternate pages that do not use tables, except for simple tables that do not lose information or change order when the table tags are ignored, and text does not form multiple columns.
    • Make sure that tables make sense when read from left-to-right, top-to-bottom.
    • Use the TITLE attribute to provide appropriate names for rows and columns, such as "Navigation Bar" or "Sales for June."
    • Use the TITLE attribute to provide an appropriate name for individual cells when a single cell serves a unique purpose, such as "Navigation Bar."
  • Support the reader's formatting options
    • Do not rely on specific fonts, colors, or sizes.
    • Use real heading tags rather than formatted text.
    • Do not require a specific window size.
    • Do not assume things will line up vertically because horizontal distances may change.
  • Do not require the use of style sheets
    • Make sure your page is usable when style sheets are turned off. For example, check to see that strings are not duplicated and that objects appear in the correct order.
    • If a page is not usable without style sheets, provide an alternate page that does not use them.
  • File formats the reader can use
    • Provide closed captions for all audio content that contains useful information. If closed captions are not possible, a less effective option is to provide transcripts for all audio content.
    • Provide ASCII or HTML alternatives to any private formats, except when the material is only relevant to readers on specific platforms or with access to specific technologies.
    • Use text fields for embedded objects, such as the comment records in GIF and PNG files.
  • Avoid scrolling marquees
    • Avoid using scrolling marquees wherever possible; otherwise, provide an alternate page.
    • Provide alternate pages with static text when the client has animation turned off.
    • Never use marquees as links.
  • Provide titles for most objects
    • Use the TITLE attribute to provide user-friendly names for the following objects: A, APPLET, AREA, BGSOUND, BUTTON, CODE, COL, COLGROUP, DIV, EMBED, FORM, FRAME, H1-H6, IFRAME, IMG, INPUT, LABEL, MARQUEE, OBJECT, OPTION, SELECT, TABLE, TD (if appropriate), TEXTAREA, TR.

For more information, see Accessibility Design Considerations (http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwue/html/ch15c.asp).

See Also

Designing Accessible Applications | Active Accessibility

Show:
© 2014 Microsoft