WCAG 2 A and AA Checklist (Designers)

Note: this checklist is a set of recommendations for ways applications developed at Yale may best meet WCAG 2 requirements. It is not a substitute for the WCAG 2 specification, and it may not cover all use cases. Email accessibility@yale.edu to provide feedback on these recommendations or for help with your Yale application.

1.3.1 Info and Relationships (A) (2.0)

  • Organize pages using properly nested HTML headings.
  • Use ARIA landmarks and labels to identify regions of a page.
  • Reserve tables for tabular data, use table headers appropriately, and use table captions.

1.3.4 Orientation (AA) (2.1)

  • All content and functionality should be available regardless of whether a mobile device is oriented vertically or horizontally, unless the orientation of the device is absolutely essential.

1.4.1 Use of Color (A) (2.0)

  • When the color of words, backgrounds, or other content is used to convey information, also include the information in text.
  • Links should always be easily identifiable through non-color means, including both default and hover states. The easiest and most conventional way to signify links is underlining.
  • Required fields and fields with errors must include some non-color way to identify them.

1.4.2 Audio Control (A) (2.0)

  • Do not have audio that plays automatically on the page. When providing audio, also provide an easy way to disable the audio and adjust the volume.

1.4.3 Contrast (Minimum) (AA) (2.0)

  • Text (including images of text) have a contrast ratio of at least 4.5:1. For text and images of that is at least 24px and normal weight or 19px and bold, use a contrast ratio that is at least 3:1.

1.4.5 Images of Text (AA) (2.0)

  • Avoid images of text, except in cases such as logos.

1.4.10 Reflow (AA) (2.1)

  • Provide responsive stylesheets such that content can be displayed at 320px wide without horizontal scrolling. (Content which must be displayed in two dimensions, such as maps and data tables, may have horizontal scrolling.)

1.4.11 Non-text Contrast (AA) (2.1)

  • When providing custom states for elements (e.g. hover, active, focus), color contrast for those states should be at least 3:1.
  • Color contrast for graphics and interactive UI components must be at least 3:1 so that different parts can be distinguished.

1.4.13 Content on Hover or Focus (AA) (2.1)

  • For content that appears on hover and focus: the content should be dismissible with the escape key; the content itself can be hovered over; and the content remains available unless it is dismissed, it is no longer relevant, or the user removes hover and focus.
  • To the extent possible, content that appears on hover or focus should not obscure other content, unless it presents a form input error. or can be dismissed with the escape key.

2.1.1 Keyboard (A) (2.0)

  • All functionality should be available to a keyboard without requiring specific timing of keystrokes, unless the functionality cannot be provided by a keyboard alone.

2.2.2 Pause, Stop, Hide (A) (2.0)

  • Items on the page should not automatically move, blink, scroll, or update, including carousels. If content does automatically move, blink, scroll, or update, provide a way to pause, stop, or hide the moving, blinking, scrolling, or updating.

2.3.1 Three Flashes or Below Threshold (A) (2.0)

  • Do not provide any content that flashes more than three times in any 1-second period.

2.4.3 Focus Order (A) (2.0)

  • Create a logical tab order through links, form controls, and interactive objects.
  • When inserting content into the DOM, insert the content immediately after the triggering element, or use scripting to manage focus in an intuitive way. When triggering dialogs and menus, make sure those elements follow their trigger in the focus order in an intuitive way. When content is dismissed or removed, place focus back on the trigger.

2.4.4 Link Purpose (In Context) (A) (2.0)

  • The purpose of each link can be determined from the link text alone, or from the link text and the containing paragraph, list item, or table cell, or the link text and the title attribute.

2.4.5 Multiple Ways (AA) (2.0)

  • Each website should include at least two of the following: a list of related pages; table of contents; site map; search; or list of all pages.

2.4.6 Headings and Labels (AA) (2.0)

  • Ensure that on each page, headings, landmark labels, and form labels are unique unless the structure provides adequate differentiation between them.

2.4.7 Focus Visible (AA) (2.0)

  • Provide keyboard focus styles that are highly visible, and make sure that a visible element has focus at all times when using a keyboard. Do not rely on browser default focus styles.

2.5.1 Pointer Gestures (A) (2.1)

  • Do not require multipoint or path-based gestures (e.g. pinching, swiping, dragging) for functionality unless the gesture is essential to the functionality.

2.5.2 Pointer Cancellation (A) (2.1)

  • Avoid triggering functionality on down-events, such as onmousedown. Use events such as onclick instead.
  • If a function is triggered on an up-event (e.g. onmouseup), provide a way to abort or undo the function.

2.5.4 Motion Actuation (A) (2.1)

  • Avoid activating functionality through motion (e.g. shaking a phone). If motion triggers functionality, provide a way to disable the motion trigger, and provide an alternative way to activate the functionality.

3.2.1 On Focus (A) (2.0)

  • When the focus change, the page should not cause a change in page content, spawn a new browser window, submit a form, case further change in focus, or cause any other change that disorients the user.

3.2.2 On Input (A) (2.0)

  • When a user inputs information or interacts with a control, the page should not cause a change in page content, spawn a new browser window, submit a form, case further change in focus, or cause any other change that disorients the user. If an input causes such a change, the user must be informed ahead of time.

3.2.3 Consistent Navigation (AA) (2.0)

  • When components are repeated across web page, they should appear in the same relative order with regard to other repeated components on each web page where they appear.
  • When a navigation menu is presented on multiple pages, the links should appear in the same order on each page.

3.2.4 Consistent Identification (AA) (2.0)

  • When components have the same functionality across several web pages, the components are labeled consistently on each page.

3.3.1 Error Identification (A) (2.0)

  • Programmatically indicate required fields using the required or aria-required attributes. Also, visually indicate required fields in the form's instructions or form labels. Do not indicate required fields for CSS alone.
  • Make errors easy to discover, identify, and correct.

3.3.2 Labels or Instructions (A) (2.0)

  • Use semantic, descriptive labels for inputs. Visually position labels in a consistent way that makes associating labels with form controls easy. Do not rely on placeholder text in lieu of an HTML label.
  • Provide text instructions at the beginning of a form or set of fields that describes the necessary input.

3.3.3 Error Suggestion (AA) (2.0)

  • If an input error is detected and if suggestions for correction are known, provide suggestions for fixing the submission.

3.3.4 Error Prevention (Legal, Financial, Data) (AA) (2.0)

  • Provide easy ways to confirm, correct, or reverse a user action where a mistake would cause a serious real-world consequence (e.g. submitting financial data, entering into a legal agreement, submitting test data, or making a transaction).