Web Accessibility Quiz #2

What does WCAG stand for?

Web Content Accessibility Guidelines

What is the purpose of WCAG?

Act as a framework for making web content accessible with disabilities

What are the 4 principles of WCAG?

P - Perceivable
O- Operable
U - Understandable
R - Robust

Conformance Levels

Level A, AA, AAA

Level A

Minimum req for accessibility

Level AA

the industry standard; addresses common barriers

Level AAA

highest level, often aspirational and not always achievable for all content

Latest WCAG version

as of Oct 2023 —> WCAG 2.2
* always aim to conform to the most recent version unless otherwise specified

WCAG Principle: Perceivable

• Color Contrast

  • Understand the importance of color contrast for readability

  • Text must meet minimum contrast ratios

• Regular Text

  • 4.5:1 contrast ratio

    Size: Text that is smaller than 18.5px (or 14px if bold)

    Weight: Normal (not bold) or light text

• Large Text

  • 3:1 contrast ratio

    Size: Text that is 18.5px or larger (or 14px or larger if bold)

    Weight: Bold or heavy text

• Use of Color

  • Avoid relying solely on color to convey information (ex: required form fields should not be indicated only by color)

  • Use additional cues like text labels or icons

• Text Alts

  • for non-text content, such as images, videos, and icons, to ensure screen reader users can access the information

  • no character limit for alt text

  • most important stuff goes up front

  • decorative content must be marked decorative

• Headings and Structure

  • proper heading levels (e.g., h1, h2, h3) to create a logical and semantic structure for screen reader users

  • Avoid skipping heading levels going down like (h2 to h4)

  • Avoid using multiple h1 elements on a single page (only on h1 per page)

• Zoom and Reflow

  • Ensure content reflows and remains usable when zoomed to 200% or more

    This is particularly important for users with low vision

WCAG Principle: Operable

• Keyboard accessibility

  • all interactive elements (e.g. buttons, menus, forms) can be accessed and operated using keyboard alone

  • includes providing visible focus indicators (e.g. blue outline)

• Pause, Stop, Hide

  • controls to pause, stop, or hide moving, blinking, or scrolling content that lasts longer than 5s

  • critical for users with cognitive or attention-related disabilities

  • avoid unnecessary motion or animations that could distract or disorient users, particularly those w/ vestibular disorders or cognitive disabilities

• Keyboard focus

  • ensure tooltips and other interactive elements are accessible to both mouse and keyboard users

  • things like tooltips and popovers should appear on keyboard focus, not just on hover

  • there must be a visible focus indicator on all interactive controls like buttons, links, and text inputs

WCAG Principle: Understandable

• Error Identification and Suggestions

  • provide clear, descriptive error msgs that explain what went wrong and how to fix it

  • avoid vague error msgs

• Accessible Authentication

  • ensure authentication processes do not rely on complex tasks like solving puzzles, remembering lengthy pws, or recognizing patterns

  • support pw managers and c+p functions to reduce cog. burden

• Consistent Identification

  • use consistent lables and functionality for interactive elements across a website

  • ex: button w/ the same icon should perform same action on every page

• Language and readability

  • clear and simple language to make content understandable for all users (including those w/ cog disabilities)

WCAG Principle: Robust / Assistive tech

• Accessible Rich Internet Applications (ARIA)

  • use ARIA attributes to enhance accessibility when native HTML elements are insufficient

  • avoid using AIRA when native HTML elements can achieve the same functionality

• Assistive Tech

  • understand how different assistive technologies (e.g., screen readers, switch devices, eye-tracking software) support users with disabilities

  • screen readers

    • provide txt alts + proper semantic structure for screen reader users

  • switch devices

    • support single-button or limited-input navigation for users with severe motor disabilities

  • transcripts and captions

    • provide transcripts for audio-only content (e.g., podcasts) and captions for video content to support users who are deaf or hard of hearing

AI and Accessibilities: Benefits

• can improve accessibilitiy

AI and Accessibilities: Drawbacks

• may not always meet needs of all users, esp if the tech is not accurate or reliable

Making arguments for accessibility

• accessibility requirements may, at times, conflict with other business requirements

• you should be able to articulate cogent arguments why accessibility must be considered in business requirements and practices