WCAG 2.2 Implementation Documentation

WCAG 2.2 Overview

WCAG 2.2 guidelines are organized into four principles that make web content accessible to a broad range of users:

• Perceivable: Content must be presented in a way users can perceive (e.g., text alternatives for images).
• Operable: User interface components and navigation must be operable (e.g., keyboard accessibility).
• Understandable: Content and controls must be understandable (e.g., clear instructions).
• Robust: Content must be robust enough to work with a variety of assistive technologies (e.g., compatibility with screen readers).

More information about WCAG 2.2 can be found here.

---

Task Overview

This document outlines the implementation of Web Content Accessibility Guidelines (WCAG) 2.2 in our project, focusing on examples from Lab 5 and recent accessibility improvements. The improvements aim to ensure the application is accessible to all users, including those with disabilities.

---

Accessibility Improvements

1. Adding Alt Texts to Non-Text Content

Alt text (alternative text) provides a textual description for non-text content, ensuring users who rely on screen readers can understand the purpose of images. The commits regarding this improvement are fd75ad2 and 36dafe0.

Examples:

• Example 1:
  Alt text added to a Profile Image of a Profile:

  alt={`Profile picture of ${profile.username}`}
  

• Example 2:
  Alt text added to an Image of a Tag in Tag Page:

  alt={`The logo image of ${Tag.name}`} title={`alt:The logo image of ${Tag.name}`}
  

2. Adjusting Color Contrast

Color contrast ensures that text is legible against its background, particularly for users with visual impairments.

Examples:

• Example 1:
  Updating text with low contrast:

       --   <p className="line-clamp-3 text-sm font-light text-gray-600">
       ++   <p className="line-clamp-3 text-sm font-light text-gray-800">
  

• Example 2:
  Fixed button contrast issues:

   -- --background: 0 0% 3.9%;
   ++ --background: 0 0% 5%;
  

3. Adding Tabbability (Keyboard Accessibility) to the UI

Tabbability ensures users can navigate through the interface using the keyboard.

Example:

Skip link functionality to allow users to jump to main content:

<a
      href="#main-content"
      className="sr-only focus:not-sr-only focus:fixed focus:z-50 focus:block focus:bg-background focus:p-4"
    >
      Skip to main content
    </a>

4. Adding Accessibility Tests

Automated accessibility testing ensures continuous compliance with WCAG standards.

Examples:

• Example 1:

  it("should be keyboard navigable", async () => {
    const { unmount } = render(<TabsExample />);
    const tabs = screen.getAllByRole("tab");
  
    tabs[0].focus();
    expect(document.activeElement).toBe(tabs[0]);
  
    await userEvent.keyboard("{ArrowRight}");
    expect(document.activeElement).toBe(tabs[1]);
  
    await userEvent.keyboard("{ArrowLeft}");
    expect(document.activeElement).toBe(tabs[0]);
  
    unmount();
  });
  

• Example 2:

  it("should have proper ARIA attributes", () => {
    render(<TabsExample />);
  
    const tablist = screen.getByRole("tablist");
    expect(tablist).toHaveAttribute("aria-orientation", "horizontal");
  
    const tabs = screen.getAllByRole("tab");
    tabs.forEach((tab) => {
      expect(tab).toHaveAttribute("aria-selected");
      expect(tab).toHaveAttribute("aria-controls");
    });
  });
  

---

Summary

By implementing the above improvements, we align the project with WCAG 2.2 standards, making it more inclusive and usable for all users. Each example highlights a critical aspect of accessibility, from descriptive alt texts to robust testing practices.