WCAG 2.2 Implementation Documentation

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}`}

Alt text added to the logo of Python can be seen on the right.

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%;

Final colors of the app can be seen on this image.

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>

Here, tab is on the "View tag" button of the tag "abstract data type".

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.