Back to top

WCAG Cheklist

This WCAG compliance checklist is organized into three categories to streamline the process for UX professionals:

  • UI (User Interface): This section focuses on visual elements that impact accessibility. Here, you’ll find considerations like color contrast, alt text for non-text content, clear labeling, and proper font size.
  • UX (User Experience): This category dives into the user’s experience with the overall flow, navigation, and content structure. It addresses aspects like logical organization with headings, informative error messages, and mobile responsiveness.
  • Engineer Handoff & UX QA: This section combines critical UI and UX considerations for engineers during development and for UX professionals during the Visual Quality Assurance (VQA) process. It highlights elements like keyboard accessibility, ARIA attributes for assistive technologies, and the importance of using semantic HTML.

UI (User Interface)

  • Color Contrast (1.4.3):
    • Text and background colors must meet minimum contrast ratios (4.5:1 for normal text, 3:1 for large text).
    • Use color contrast checkers to verify.
  • Text Alternatives (1.1.1):
    • All non-text content (images, audio, video) needs descriptive alt text conveying content and functionality.
    • Consider screen reader users and provide meaningful descriptions.
  • Clear Labeling (1.3.1):
    • Form fields and interactive elements require clear and concise labels for easy understanding.
  • Font Size and Readability (1.4.4):
    • Text size should be large enough (minimum 18pt or equivalent) for comfortable reading.
    • Allow users to further increase size if needed.
  • Keyboard Navigation (2.1.1):
    • All UI elements (buttons, menus, etc.) must be operable using just the keyboard.
    • Test tab order and ensure clear focus indicators.
  • Focus Management (2.4.7):
    • Avoid automatic focus shifting unless essential. Users should control focus movement.

UX (User Experience)

  • Content Structure and Organization (3.1.1, 3.1.4):
    • Organize content logically with clear headings and subheadings (using semantic HTML).
    • Use the human language of the content with appropriate HTML attributes.
  • Error Handling and Feedback (3.3.1):
    • Provide informative error messages and clear instructions for users to understand and correct mistakes.
  • Reading Level (3.1.5):
    • Aim for clear and concise language that is understandable by a broad audience.
  • User Testing with Assistive Technologies:
    • Include users with disabilities in testing to identify and address accessibility issues.
  • Mobile Responsiveness:
    • Ensure your website/application is accessible and usable on all devices (mobile, tablets).
  • Direct Access Mechanisms (2.4.1):
    • Consider implementing skip links or other mechanisms for users to jump to main content areas.

Engineering

  • Semantic HTML (1.3.1):
    • Use semantic HTML elements (headings, paragraphs, lists, etc.) to structure content properly for assistive technologies.
  • Keyboard Accessibility (2.1.1):
    • Code interactive elements to be operable using the keyboard for users relying on assistive technologies.
  • ARIA Attributes (1.3.1, 2.4.6):
    • Implement WAI-ARIA attributes to provide additional information about interactive elements for assistive technologies.
    • This can enhance the user experience for screen reader users.
  • Automated Testing:
    • Utilize automated WCAG checkers as part of the development process to catch accessibility issues early on.
  • Compatibility (4.1.1):
    • Ensure content compatibility with current and future user agents, including assistive technologies.
  • Error Handling (4.1.2):
    • The content should handle user errors gracefully and maintain accessibility when errors occur.
  • PDF Accessibility (if applicable):
    • For any PDFs, ensure they are tagged with proper headings, alt text for images, and logical reading order (using tools like Adobe Acrobat Pro).

Remember:

  • This is a comprehensive list, but WCAG is an ongoing process. Stay updated on future revisions and best practices.
  • WCAG compliance is a collaborative effort. Communication and collaboration between UI/UX designers and engineers are crucial for achieving accessibility goals.