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.
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.
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.
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?
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.
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).
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.
2.3.1: Three Flashes or Below Threshold
- No page content flashes more than 3 times per second unless that flashing content is sufficiently small and the flashes are of low contrast and do not contain too much red. (See general flash and red flash thresholds)
2.4.1 Bypass Blocks
- A link is provided to skip navigation and other page elements that are repeated across web pages.
4.1.1 Parsing
- Significant HTML/XHTML validation/parsing errors are avoided. Check at http://validator.w3.org/.
Testing Tip: The Web Developer Toolbar has the W3C Validator built in. Only flag errors, not warnings.
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>
)
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.
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.
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).