Chandler Facebook Pixel

ADA Compliance Tips

ADA Compliance Tips

Alert: Skipped heading level

What It Means

A heading level is skipped.

Why It Matters

Headings provide document structure and facilitate keyboard navigation by users of assistive technology. These users may be confused or experience difficulty navigating when heading levels are skipped.

How to Fix It

Restructure the document headings to ensure that heading levels are not skipped.

The Algorithm... in English

A heading level is skipped (e.g., an <h1> is followed by an <h3>, with no intermediate <h2>). Note that an <h1> is not required to be the first heading within the document.

Standards and Guidelines

ALERT: Redundant title text

What It Means

Title attribute text is the same as text or alternative text.

Why It Matters

The title attribute value is used to provide advisory information. It typically appears when a user hovers the mouse over an element. The advisory information presented should not be identical to or very similar to the element text or alternative text.

How to Fix It

In most cases, the title attribute can be removed, otherwise modify to provide advisory, but not redundant information. Note that the title text may or may not be read by a screen reader and is typically inaccessible to sighted keyboard users.

The Algorithm... in English

A title attribute value is identical to element text or image alternative text.

ALERT: Long alternative text

What It Means

An image has very long alternative text.

Why It Matters

Alternative text should be succinct, yet descriptive of the content and function of an image. Lengthy alternative text (more than around 100 characters) often indicates that extraneous content or content that is not available to sighted users is being presented.

How to Fix It

Ensure the alternative text is succinct, yet descriptive. Ensure that no content is being presented in the alternative text that is not available to sighted users viewing the image. When possible, either shorten the alternative text or provide the text alternative via another method (e.g., in text near the image, through a separate description page, etc.).

The Algorithm... in English

The image's alt attribute value is more than 100 characters. Note that the 100-character limit is a rough and somewhat arbitrary length. For images that present complex content or lengthy text, alternative text longer than 100 characters may be appropriate.

 

Missing alternative text

  • What It Means

  • Image alternative text is not present.

  • Why it matters:
    Each image must have an alt attribute. Without alternative text, the content of an image will not be available to screen reader users or when the image is unavailable.
  • How to fix it:
    Add an alt attribute to the image. The attribute value should accurately and succinctly present the content and function of the image. If the content of the image is conveyed in the context or surroundings of the image, or if the image does not convey content or have a function, it should be given empty/null alternative text (alt="").
  • The Algorithm... In English
    An image does not have an alt attribute.

Suspicious link text

  • What it means:
    Link text contains extraneous text or may not make sense out of context.
  • Why it matters:
    Links, which are often read out of context, should clearly describe the destination or function of the link. Ambiguous text, text that does not make sense out of context, and extraneous text (such as "click here") can cause confusion and should be avoided.
  • How to fix it:
    Where appropriate, reword the link text so that it is more descriptive of its destination when read out of context. Remove any extraneous text (such as "click here").
  • The Algorithm... In English
    A link (including alt text of linked images) contains the phrase "click here" or "click", or the link text is "click here", "here", "more", "more...", "details", "more details", "link", "this page", "continue", "continue reading", "read more", or "button".

Skipped heading level

  • What It Means
    A heading level is skipped.

  • Why It Matters
    Headings provide document structure and facilitate keyboard navigation by users of assistive technology. These users may be confused or experience difficulty navigating when heading levels are skipped.

  • How to Fix It
    Restructure the document headings to ensure that heading levels are not skipped.

  • The Algorithm... in English
    A heading level is skipped (e.g., an <h1> is followed by an <h3>, with no intermediate <h2>). Note that an <h1> is not required to be the first heading within the document.

  • actual heading format

H1

H2

H3

H4

Very low contrast

  • What It Means
    Very low contrast between text and background colors.

  • Why It Matters
    Adequate contrast of text is necessary for all users, especially users with low vision.

  • How to Fix It
    Increase the contrast between the foreground (text) color and the background color. Large text (larger than 18 point or 14 point bold) does not require as much contrast as smaller text.

  • The Algorithm... in English
    Text is present that has a contrast ratio less than 4.5:1, or large text (larger than 18 point or 14 point bold) has a contrast ratio less than 3:1. WCAG requires that page elements have both foreground AND background colors defined (or inherited) that provide sufficient contrast. When text is presented over a background image, the text must have a background color defined (typically in CSS) that provides adequate text contrast when the background image is disabled or unavailable. WAVE does not identify contrast issues in text with CSS transparency, gradients, or filters.

YouTube Video