Accessibility Testing Baselines

The following WCAG 2.1 Success Criteria make up the baseline of accessibility issues we strive to test against in our products and websites. These issues are representative of the most common accessibility barriers we encounter on a day to day basis. If there is a need to fully support WCAG or other specific guidelines, please bring this to the attention of your account representative as soon as possible.

Please note that these baselines are subject to change as guidelines and our understanding of accessibility continue to evolve.

Common Accessibility Issues
Success Criterion Level Synopsis Details
1.1.1: Non-text Content A Provide text alternatives for non-text content. Understanding SC 1.1.1 (opens in new window)
1.2.2: Captions (Prerecorded) A Provide captions for videos with audio Understanding SC 1.2.2 (opens in new window)
1.3.1: Info and Relationships A Semantic markup is used appropriately. Logical structure, etc. Understanding SC 1.3.1 (opens in new window)
1.4.1: Use of Color A Don't use presentation that relies solely on color. Understanding SC 1.4.1 (opens in new window)
1.4.4: Resize Text AA Text can be resized to 200% without loss of content or function. Understanding SC 1.4.4 (opens in new window)
2.1.1: Keyboard A Accessible by keyboard only. Understanding SC 2.1.1 (opens in new window)
2.2.2: Pause, Stop, Hide A Provide user controls for moving content. Understanding SC 2.2.2 (opens in new window)
2.3.1: Three Flashes or Below Threshold A No content flashes more than three times per second. Understanding SC 2.3.1 (opens in new window)
2.4.1: Bypass Blocks A Provide a 'Skip to Content' link. Understanding SC 2.4.1 (opens in new window)
2.4.2: Page Titled A Use helpful and clear page titles. Understanding SC 2.4.2 (opens in new window)
4.1.1: Parsing A No major code errors. Understanding SC 4.1.1 (opens in new window)
4.1.2: Name, Role, Value A Build all elements for accessibility. Understanding SC 4.1.2 (opens in new window)
1.4.11: Non-text Contrast AA Ensure important visual information such as graphics and icons meets the same minimum contrast that is required for larger text (3:1). Understanding SC 1.4.11 (opens in new window)
1.4.3: Contrast (Minimum) AA Contrast ratio between text and background is at least 4.5:1. Understanding SC 1.4.3 (opens in new window)
2.4.7: Focus Visible AA Ensure keyboard focus is visible and clear. Understanding SC 2.4.7 (opens in new window)

1.1.1 Non-text Content

  • Images, form image buttons, and image map hot spots have appropriate, equivalent alternative text.
  • Images that do not convey content, are decorative, or contain content that is already conveyed in text are given null alt text (alt="") or implemented as CSS backgrounds. All linked images have descriptive alternative text.
  • Equivalent alternatives to complex images are provided in context or on a separate linked page (e.g. graphs, infographics).
  • Form buttons have a descriptive value.
  • Form inputs have associated text labels.
  • Embedded multimedia is identified via accessible text (e.g., HTML video or audio).
  • Frames and iframes are appropriately titled.

Testing Tip: For images, use the Web Developer Toolbar to view alternative text. Ask yourself, is alternative text really required/accurate? Does it convey what is in the image? If you are not sure when image should have alternative text, then check out the Alt Decision Tree.

Back to top

1.2.2 Captions (Pre-recorded)

  • Synchronized captions are provided for non-live video (YouTube videos, etc.).

Tip: Watch videos. Are they accurate? If videos are missing captions, then reach out to Michael Spellacy.

Back to top

1.3.1 Info and Relationships

  • Semantic markup is used to designate headings (<h1>), regions/landmarks, lists (<ul>, <ol>, and <dl>), emphasized or special text (<strong>, <code>, <abbr>, <blockquote>, for example), etc. Semantic markup is used appropriately.
  • Tables are used for tabular data and data cells are associated with their headers. Data table captions, if present, are associated to data tables.
  • Text labels are associated with form input elements. Related form elements are grouped with fieldset/legend. ARIA labelling may be used when standard HTML is insufficient.

Testing Tip: If you ever want to view the heading hierarchy of a web page, the Web Developer Toolbar is great for this, too. Read this informative article by the Paciello Group: Heading Off Confusion: When Do Headings Fail WCAG?

Back to top

1.4.1 Use of Color

  • Color is not used as the sole method of conveying content or distinguishing visual elements.
  • Color alone is not used to distinguish links from surrounding text unless the contrast ratio between the link and the surrounding text is at least 3:1 and an additional distinction (e.g., it becomes underlined) is provided when the link is hovered over and receives focus.

Back to top

1.4.1 Resize Text

  • The page is readable and functional when the page is zoomed to 200%.

Back to top

2.1.1 Keyboard

  • All page functionality is available using the keyboard, unless the functionality cannot be accomplished in any known way using a keyboard (e.g., free hand drawing).

Back to top

2.2.2 Pause, Stop, Hide

  • Automatically moving, blinking, or scrolling content (such as carousels, marquees, or animations) that lasts longer than 5 seconds can be paused, stopped, or hidden by the user.
  • Automatically updating content (e.g., a dynamically-updating news ticker, chat messages, etc.) can be paused, stopped, or hidden by the user or the user can manually control the timing of the updates.

Back to top

2.3.1: Three Flashes or Below Threshold

Back to top

2.4.1 Bypass Blocks

  • A link is provided to skip navigation and other page elements that are repeated across web pages.

Back to top

2.4.2 Page Titled

  • The web page has a descriptive and informative page title.

Back to top

4.1.1 Parsing

Testing Tip: The Web Developer Toolbar has the W3C Validator built in. Only flag errors, not warnings.

Back to top

4.1.2 Name, Role, Value

  • Markup is used in a way that facilitates accessibility. This includes following the HTML/XHTML specifications and using forms, form labels, frame titles, etc. appropriately.
  • ARIA is used appropriately to enhance accessibility when HTML is not sufficient. (e.g., <button aria-expanded="true">Menu</button>)

Back to top

1.4.11 Non-text Contrast

  • A contrast ratio of at least 3:1 is present for differentiating graphical objects (such as icons and components of charts or graphs) and author-customized interface components (such as buttons, form controls, and focus indicators/outlines).
  • At least 3:1 contrast must be provided in the various states (focus, hover, active, etc.) of author-customized interactive components.

Back to top

1.4.3 Contrast (Minimum)

  • Text and images of text have a contrast ratio of at least 4.5:1.
  • Large text - at least 18 point (typically 24px) or 14 point (typically 18.66px) and bold - has a contrast ratio of at least 3:1.

Back to top

2.4.7 Focus Visible

  • It is visually apparent which page element has the current keyboard focus (i.e., as you tab through the page, you can see where you are).

Back to top

About the Author

Michael Spellacy

Michael "Spell" Spellacy is the Director of Accessibility at Radancy. If you have any questions, feel free to contact him on Github or see what he is up to on his blog.