Web Accessibility: Issues and Techniques

Heading tags are intended to convey a document's structure and aid navigation for screen reader and screen magnification users. Heading tags should never be used to control font characteristics.

• Use a level 1 heading tag <h1> to indicate the title, topic, or purpose of each page.
• Repeat all or part of the level 1 heading in the <title> element.
• Use level 2 heading tags <h2> to indicate each main section of the document.
• Use level 3 heading tags <h3> to indicate sub-sections.
• Use level 4 <h4>, level 5 <h5>, and level 6 <h6> heading tags to indicate sub-sub-sections.

• Improper Headings
• Proper Headings

Color may be used to enhance the aesthetics of a site, reflect branding identity, visually distinguish areas of a page, and a variety of other functions. However, when color alone is used to convey information or when the contrast between information and the background on which it appears is insufficient, use of a site and access to information may be difficult or impossible for some users.

• Screen Readers
  • Do not automatically identify colors or color changes.
  • Do not offer color search functionality.
• Screen Magnifiers
  • May be set to use an alternative color scheme.
  • May be set to use white on black or other high-contrast mode.
  • Users may be unable to perceive color.
  • Users may be unable to perceive low-contrast content, which cannot be modified when presented as an image.
• Color Blindness
  • Users may be unable to perceive specific color combinations.
  • Users may be unable to distinguish specific hues, tints and shades.
• Alternative Displays and Browsers
  • Monochrome displays.
  • Braille displays.
  • Browsers with CSS processing disabled.
  • Text-only browsers.
• General
  • Monitors with incorrect or imperfect color rendering.
  • Monitors viewed under certain lighting conditions.
  • Browsers with image loading disabled, when colors are presented as an image.

• Color
• Contrast

Image-based information cannot be accessed by most adaptive technologies or in specific situations.

• Screen-readers and other text-to-speech applications
• Speech recognition systems
• Search engines
• Language translation applications
• Devices with small displays
• Text-only browsers
• Browsers with image loading disabled
• Images that fail to load

• Inaccessible Images
• Accessible Images

The purpose of a link and when it has focus should be clear and easily determined.

• Link text — The link text or alternative text is sufficient for determining the purpose of the link.
• Programmatically associated context — HTML and ARIA coding is used to programmatically associate a link with the context in which it appears.
• Focus indication — The appearance of a link changes when it has focus.
• Identification matching — The link text matches, in part or in whole, the title of the page returned by the link.

• Inaccessible Links
• Accessible Links

Forms are the primary means by which users interact with Web applications from simple searches to complex requests for information, goods and services. Therefore, forms should be accessible and usable by diverse users.

• Screen reader users should be able to correctly identify form controls.
• Users with mobility impairments should be able to interact with form controls.
• Users with learning disabilities and other cognitive impairments should be able to identify the relationship between a form control and its corresponding label.

• Inaccessible Forms
• Accessible Forms

HTML table specifications were originally developed for the presentation of tabular data. Subsequently, tables began being used for layout.

• Avoid the use of tables for layout.
• Use CSS for layout.
• Use tables for tabular content/data.
  • Use meaningful row and column headings.
  • Programmatically associate data cells with their corresponding row and column headings.
  • Specify table and cell widths in relative, rather than absolute, values.

• Layout Tables
• Data Tables

Web page elements that rely on scripts may be problematic for some users.

• Screen Reader Users
  • Mouse-dependent controls.
  • Inadvertent triggering of actions/events.
  • Operation, Identification and location of controls, functions and responses.
  • Nontext-based dynamic content.
• Screen Magnification Users
  • Inadvertent triggering of actions/events.
  • Dynamic content that appears outside the magnified view.
• Keyboard-only Navigation Users
  • Non-tabbable controls.
  • Mouse-dependent controls.
  • Interaction with controls and dynamic content.
• Users with Mobility Impairments
  • Insufficient timeout intervals.
  • Motion and dextarity intensive interaction.
  • Mouse-dependent controls.
  • Inadvertent triggering of actions/events.
• Users with Learning Disabilities
  • Distracting visual or audio elements.
  • Dynamic content displayed for a brief period.
  • Relationship between dynamic content and the context in which it appears.

• Inaccessible Scripts
• Accessible Scripts