Accessibility Testing Baselines

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

• 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)

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

• 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.

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