AccessibilityWow

Way of Working

This document outlines our process for performing an accessibility control on an existing website. Follow these steps carefully to ensure consistency and thoroughness in our evaluations.

Accessibility Control of Existing Site

1. Set Up Your Document

  1. Go to Google Drive Accessibility Reports Folder.
  2. Copy the template named Company name - Accessibility report 2024xxxx TEMPLATE.
  3. Name your document according to the requested format in the title.

For instructions on how to use the template, please see the documentation here.

2. Automatic Control

  1. Enter the website pages into WAVE.
  2. For each error found:
    • Click on Info to access details about the error.
    • Copy the relevant WCAG guideline(s) that are conflicting.
    • Go to your document in Google Drive and fill out the following:
      • Issue nr: Assign a unique number for reference.
      • Location: Specify where the error occurs so it can be easily pointed out to the PM/customer.
      • Impact: Using the documentation here state the impact of the issue.
      • Issue: Provide a brief description of what is wrong.
      • WCAG: Paste the WCAG guideline(s) that are conflicting.
      • Notes: Additional information (optional)

3. Manual Control

Step 1: Keyboard Navigation

  • Objective: Verify that the entire website is navigable using only the keyboard.
  • Steps:
    1. Start at the top of the homepage.
    2. Use the Tab key to move through all interactive elements (links, buttons, forms).
    3. Ensure each element is visibly highlighted when focused.
    4. Check for keyboard traps where you cannot move forward or backward using Tab and Shift+Tab.

Step 2: VoiceOver Navigation

  • Objective: Ensure the site is usable with screen readers like VoiceOver.
  • Steps:
    1. Enable VoiceOver on your Mac.
    2. Use the shortcut Ctrl + Option + U to activate the rotor.
    3. Navigate using the rotor to test:
      • Landmarks: to understand page layout.
      • Headings: to assess the structure.
      • Links: to verify descriptive link text.

Step 3: Responsive and Zoom Control

  • Objective: Confirm the site’s responsiveness and readability at higher zoom levels.
  • Steps:
    1. Zoom in to 200% using browser controls (usually Cmd + or Ctrl +).
    2. Ensure text, images, and layouts adjust without loss of content or functionality.
    3. Test the website on various mobile and tablet devices for usability.

Step 4: Color Contrast Analysis

  • Objective: Check that text and interactive elements have sufficient visual contrast.
  • Steps:
    1. Use a tool like WebAIM’s Color Contrast Checker.
    2. Check contrast ratios of text against their background colors.
    3. Ensure contrasts meet or exceed WCAG minimum requirements.

Step 5: Error Identification and Recovery

  • Objective: Make sure errors are identifiable and correctable.
  • Steps:
    1. Test form submissions with intentional errors.
    2. Ensure error messages are specific and suggest how to correct the issue.

Step 6: Alternative Text for Visual Media

  • Objective: Provide descriptive alternative texts for non-text content.
  • Steps:
    1. Review all images, videos, and icons.
    2. Ensure alt attributes are present and accurately describe the content.

Step 7: Multimedia Alternatives

  • Objective: Ensure multimedia is accessible.
  • Steps:
    1. Check all video content for captions and audio descriptions.
    2. Ensure audio content has transcripts available.

Step 8: Interactive Elements Usability

  • Objective: Verify that interactive elements are accessible.
  • Steps:
    1. Manually test all buttons, sliders, and controls.
    2. Confirm operation via keyboard and that roles and states are announced by screen readers.

Step 9: Link Purpose (In Context)

  • Objective: Clarify the purpose of each hyperlink.
  • Steps:
    1. Review all links to ensure the text makes sense on its own.
Report