Skip to main content

WCAG Accessibility

Understanding and applying the Web Content Accessibility Guidelines (WCAG) to ensure digital content is accessible to all users, including those with disabilities.



Web Content Accessibility Guidelines (WCAG)

  • WCAG is often pronounced "wuh-cag".
  • WCAG is a set of guidelines developed by the World Wide Web Consortium (W3C) to make web content accessible to people with disabilities. It is widely accepted as the standard for digital accessibility conformance and serves as the basis for many accessibility regulations worldwide. It is also the basis for 508 Accessibility guidelines.
  • "Web content" generally refers to the information in a web page or web application, including:
    • Visible information such as text, images, and sounds.
    • Hidden information such as code or markup that defines the structure and presentation.

WCAG at USDA

  • Although there are newer versions available, we are responsible for adhering to WCAG 2.2 AA standards.
  • WCAG Level AA establishes a level of accessibility that works for most devices and assistive technologies, such as screen readers.
  • However, you are encouraged to make your application as accessible as possible because content that is accessible can make it more usable for all people.

What is WCAG 2.2 AA?

  • The WCAG 2.2 standard is organized into 4 principles under which there are 13 guidelines.
  • For each guideline, there are testable success criteria. The success criteria are at three levels: A, AA, and AAA.
  • The success criteria are what determine "conformance" to WCAG. That is, in order to meet WCAG standards, the content needs to meet the success criteria.
  • At USDA, we are responsible for meeting the AA level of success criteria.

WCAG Principles and Guidelines

Below you can find the principles and guidelines with simplified but representative success criteria.

For the full content of the guidelines, please refer to: How to Meet WCAG Requirements - Quick Reference (the link is pre-filtered to show only WCAG 2.1 AA criteria).

1. Perceivable

Information and the user interface components must be presented to users in a way they can perceive. This means providing alternative text for images and ensuring sufficient color contrast.

1.1 Non-text Content

Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.

  1. Non-text content: Create a text alternative for visual and auditory content.

1.2 Time-based Media (Audio + Video)

Provide alternatives for time-based media.

  1. Audio-only & video-only (prerecorded): Provide an alternative when content is perceivable with only one sense.
  2. Captions (prerecorded): Provide captions for audio content in existing videos.
  3. Audio description or media alternative (prerecorded): Provide a description of the visual content in videos.
  4. Captions (live): Provide synchronized text for audio content in real-time videos.
  5. Audio description (prerecorded): Provide a synchronized spoken description of the visual content in videos.

1.3 Adaptable

Create content that can be presented in different ways (for example simpler layout) without losing information or structure.

  1. Info and relationships: Use code to reinforce relationships and information conveyed through presentation.
  2. Meaningful sequence: Use code to preserve meaningful content order.
  3. Sensory characteristics: Describe controls by name, not just by appearance or location.
  4. Orientation: Don't lock content to either portrait or landscape presentation.
  5. Identify input purpose: Use code to indicate the purpose of common inputs, where technology allows.

1.4 Distinguishable

Make it easier for users to see and hear content including separating foreground from background.

  1. Use of color: Use information in addition to color, such as shape or text, to convey meaning.
  2. Audio control: If you play audio content automatically, let people turn it down or off.
  3. Contrast (minimum): Provide sufficient contrast between text and its background.
  4. Resize text: Ensure text can be doubled in size.
  5. Images of text: Use text instead of pictures of text.
  6. Reflow: Make lines of text reflow within the viewport.
  7. Non-text contrast: Ensure meaningful visual cues achieve 3:1 against the background.
  8. Text spacing: Ensure content adapts to user-defined text settings.
  9. Content on hover or focus: If hover or focus causes content changes, ensure interaction is predictable.

2. Operable

User interface components and controls must be operable. This means ensuring websites are navigable using a keyboard, providing sufficient time for users to interact with elements, and preventing users from getting stuck in a loop.

2.1 Keyboard Accessible

Make all functionality available from a keyboard.

  1. Keyboard: Ensure pointer actions have a keyboard equivalent.
  2. No keyboard trap: Ensure users always know how to navigate away from components.
  3. Character key shortcuts: Ensure character-only shortcut keys can be turned off or modified.

2.2 Enough Time

Provide users enough time to read and use content.

  1. Timing adjustable: Let users turn off, adjust, or extend time limits.
  2. Pause, stop, hide: Let users control content changes (e.g. moving, blinking, scrolling, or auto-updating information) that occur in parallel with other content.

2.3 Seizures and Physical Reactions

Do not design content in a way that is known to cause seizures or physical reactions.

  1. Three flashes or below threshold: Avoid content that flashes, or keep it under 3 flashes per second.

2.4 Navigable

Provide ways to help users navigate, find content, and determine where they are.

  1. Bypass blocks: Provide a means of skipping repeating content.
  2. Page titled: Provide a descriptive page title using appropriate technology.
  3. Focus order: Elements receive focus in an order that preserves meaning.
  4. Link purpose (in context): Provide descriptive names or context for all links.
  5. Multiple ways: Provide at least two options for reaching the same content, unless the content is a step in a process.
  6. Headings and labels: Provide descriptive headings and labels.
  7. Focus visible: Ensure each item receiving focus has a visible indicator.
  8. Focus not obscured (minimum): Ensure when an item gets keyboard focus, it is at least partially visible. (New in WCAG 2.2)

2.5 Input Modalities

Make it easier for users to operate functionality through various inputs beyond keyboard.

  1. Pointer gestures: Provide single-point operation for all functions.
  2. Pointer cancellation: Make pointer cancellation predictable and consistent.
  3. Label in name: Where practical, make the control's text label and name match.
  4. Motion actuation: Don't rely solely on device motion to control page content.
  5. Dragging movements: For any action that involves dragging, provide a simple pointer alternative.
  6. Target size (minimum): Ensure targets meet a minimum size or have sufficient spacing around them - typically 24 by 24 CSS pixels. (New in WCAG 2.2)

3. Understandable

Information and the operation of the user interface must be understandable. This means providing clear and concise language, ensuring that content is predictable, and providing assistance with error correction.

3.1 Readable

Make text content readable and understandable.

  1. Language of page: Indicate the predominant language on a page.
  2. Language of parts: Indicate when words are in a different language.

3.2 Predictable

Make Web pages appear and operate in predictable ways.

  1. On focus: Do not change a user's context when items get focus.
  2. On input: Forewarn users if their context will change based on their input.
  3. Consistent navigation: Consistently order navigation that repeats across multiple pages.
  4. Consistent identification: Identify repeating functions consistently.
  5. Consistent help: Put help in the same place when it is on multiple pages. (New in WCAG 2.2)

3.3 Input Assistance

Help users avoid and correct mistakes.

  1. Error identification: Provide descriptive notification of errors.
  2. Labels or instructions: Provide labels or instructions for inputs.
  3. Error suggestion: Where errors are detected, suggest known ways to correct them.
  4. Error prevention (legal, financial, data): Provide ways for users to confirm, correct, or reverse important submissions.
  5. Redundant entry: Don't ask for the same information twice in the same activity. (New in WCAG 2.2)
  6. Accessible authentication (minimum): Don't make people solve, recall, or transcribe something to log in. (New in WCAG 2.2)

4. Robust

Content must be robust enough to be reliably interpreted by a wide variety of user agents, including assistive technologies. This means using standards-compliant code and ensuring content is compatible with future technologies.

4.1 Compatible

Maximize compatibility with current and future user agents, including assistive technologies.

  1. Name, role, value: Give components correct names, roles, states, and values so that people using assistive technology understand all components.
  2. Status message: Let assistive technology notify users about status changes that don't take focus.
Looking for U.S. government information and services?
Visit USA.gov