Accessibility WCAG Skill

Purpose

This skill ensures all web content meets WCAG 2.1 Level AA standards for accessibility, making websites usable by people with disabilities including visual, auditory, motor, and cognitive impairments.

Rules

WCAG 2.1 AA Requirements

WCAG is organized around four principles (POUR):

Perceivable - Information must be presentable in ways users can perceive
Operable - Interface must be operable by all users
Understandable - Information and operation must be understandable
Robust - Content must be robust enough for assistive technologies

Perceivable Requirements

Text Alternatives (1.1)

MUST:

Provide alt text for all meaningful images
Use empty alt="" for decorative images
Provide captions for audio/video content
Provide transcripts for audio-only content
Use descriptive link text (not "click here")

Examples:

<!-- GOOD: Meaningful alt text -->
<img src="security-audit.jpg" alt="Security professional reviewing network logs on dual monitors">

<!-- GOOD: Decorative image -->
<img src="divider.png" alt="" aria-hidden="true">

<!-- BAD: Missing alt -->
<img src="chart.png">

<!-- BAD: Useless alt text -->
<img src="photo.jpg" alt="Image">

Time-based Media (1.2)

MUST:

Provide captions for videos (prerecorded and live)
Provide audio descriptions for video content
Provide transcripts for audio content

Adaptable Content (1.3)

MUST:

Use semantic HTML (headings, lists, tables correctly)
Ensure content is accessible without CSS
Don't rely on sensory characteristics alone (color, shape, position)
Use proper reading order in DOM

Examples:

<!-- GOOD: Semantic markup -->
<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

<!-- BAD: Div soup -->
<div class="nav">
  <div class="item"><a href="/">Home</a></div>
  <div class="item"><a href="/about">About</a></div>
</div>

Distinguishable Content (1.4)

MUST:

Maintain color contrast ratio of at least 4.5:1 for normal text
Maintain color contrast ratio of at least 3:1 for large text (18pt+ or 14pt+ bold)
Don't use color alone to convey information
Allow text resize up to 200% without loss of functionality
Avoid background audio that can't be paused/stopped
Ensure text can be selected and copied

Color Contrast Examples:

/* GOOD: High contrast (7:1) */
.text {
  color: #000000; /* Black */
  background-color: #FFFFFF; /* White */
}

/* GOOD: Sufficient contrast (4.6:1) */
.link {
  color: #0066CC; /* Blue */
  background-color: #FFFFFF; /* White */
}

/* BAD: Insufficient contrast (2.3:1) */
.subtle-text {
  color: #CCCCCC; /* Light gray */
  background-color: #FFFFFF; /* White */
}

Operable Requirements

Keyboard Accessible (2.1)

MUST:

Make all functionality available via keyboard
Provide visible focus indicators
Don't create keyboard traps
Ensure logical tab order
Provide keyboard shortcuts for complex interfaces

Examples:

<!-- GOOD: Button is keyboard accessible -->
<button onclick="submitForm()">Submit</button>

<!-- BAD: Div onClick is not keyboard accessible -->
<div onclick="submitForm()">Submit</div>

<!-- BETTER: If you must use div, add role and tabindex -->
<div role="button" tabindex="0" onclick="submitForm()" onkeypress="handleKeyPress(event)">
  Submit
</div>

/* GOOD: Visible focus indicator */
a:focus,
button:focus {
  outline: 2px solid #0066CC;
  outline-offset: 2px;
}

/* BAD: Removing focus outline without replacement */
*:focus {
  outline: none; /* Never do this without providing alternative! */
}

Enough Time (2.2)

MUST:

Allow users to turn off, adjust, or extend time limits
Provide pause, stop, hide for auto-updating content
No time limits unless essential (auctions, real-time games)

Seizures and Physical Reactions (2.3)

MUST NOT:

Use content that flashes more than 3 times per second
Create large flashing areas

Navigable (2.4)

MUST:

Provide skip links to bypass repeated content
Use descriptive page titles
Ensure logical focus order
Provide clear link purposes
Offer multiple ways to navigate (menu, search, sitemap)
Provide visible focus indicators
Use clear headings and labels

Examples:

<!-- GOOD: Skip link -->
<a href="#main-content" class="skip-link">Skip to main content</a>

<nav>...</nav>

<main id="main-content">...</main>

<!-- GOOD: Descriptive title -->
<title>Security Services - ISO 27001 Implementation | Hack23</title>

<!-- BAD: Generic title -->
<title>Services</title>

Input Modalities (2.5)

MUST:

Ensure touch targets are at least 44×44 pixels
Don't rely on device motion alone
Allow cancellation of pointer events
Make clickable label text match accessible name

Understandable Requirements

Readable (3.1)

MUST:

Specify language of page with lang attribute
Specify language of passages that differ from page language
Keep content at appropriate reading level (when possible)

Examples:

<!-- GOOD: Language specified -->
<html lang="en">

<!-- GOOD: Foreign language phrase -->
<p>The phrase <span lang="fr">je ne sais quoi</span> is French.</p>

Predictable (3.2)

MUST:

Don't change context on focus
Don't change context on input (without warning)
Use consistent navigation across pages
Use consistent identification of components

Input Assistance (3.3)

MUST:

Identify input errors clearly
Provide labels or instructions for user input
Provide error suggestions when possible
Prevent errors in legal/financial transactions
Allow review/confirmation before final submission

Examples:

<!-- GOOD: Clear label and error -->
<label for="email">Email Address *</label>
<input type="email" id="email" aria-required="true" aria-describedby="email-error">
<span id="email-error" class="error" role="alert">
  Please enter a valid email address (e.g., name@example.com)
</span>

<!-- GOOD: Required field indicator -->
<label for="password">
  Password *
  <span class="required-note">(required)</span>
</label>
<input type="password" id="password" aria-required="true">

Robust Requirements

Compatible (4.1)

MUST:

Ensure HTML is valid (no duplicate IDs, proper nesting)
Use ARIA correctly (roles, states, properties)
Provide name, role, value for all UI components
Ensure status messages can be programmatically determined

ARIA Examples:

<!-- GOOD: ARIA for custom component -->
<div role="tablist" aria-label="Account settings">
  <button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1">
    Profile
  </button>
  <button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2">
    Security
  </button>
</div>
<div role="tabpanel" id="panel-1" aria-labelledby="tab-1">
  <!-- Profile content -->
</div>
<div role="tabpanel" id="panel-2" aria-labelledby="tab-2" hidden>
  <!-- Security content -->
</div>

<!-- GOOD: Status message -->
<div role="status" aria-live="polite" aria-atomic="true">
  Changes saved successfully
</div>

ARIA Best Practices

Use ARIA When:

Native HTML element doesn't exist for your component
Need to enhance semantic meaning
Need to communicate state or property not available in HTML

ARIA Landmarks:

<header role="banner">
<nav role="navigation" aria-label="Main navigation">
<main role="main">
<aside role="complementary">
<footer role="contentinfo">

ARIA States and Properties:

aria-label - Provides accessible name
aria-labelledby - References element that labels this one
aria-describedby - References element that describes this one
aria-hidden - Hides element from screen readers
aria-live - Announces dynamic content changes
aria-expanded - Indicates if expandable element is open
aria-pressed - Indicates toggle button state
aria-current - Indicates current item in set

Testing Checklist

MUST TEST:

Keyboard Navigation
- Tab through all interactive elements
- Use Enter/Space to activate buttons/links
- Verify visible focus indicators
- Check for keyboard traps
Screen Reader
- Test with NVDA (Windows), VoiceOver (Mac), or JAWS
- Verify all content is announced
- Check heading structure
- Test form labels and error messages
Color Contrast
- Use WebAIM Contrast Checker
- Test all text/background combinations
- Check focus indicators
Zoom/Resize
- Zoom to 200% and verify functionality
- Test with browser text-only zoom
- Verify responsive design works
Automated Tools
- WAVE (browser extension)
- axe DevTools
- Lighthouse accessibility audit
- Pa11y

Common Accessibility Errors

1. Missing Alt Text

<!-- BAD -->
<img src="logo.png">

<!-- GOOD -->
<img src="logo.png" alt="Hack23 Cybersecurity">

2. Poor Color Contrast

/* BAD: 2.5:1 ratio */
color: #999999;
background: #FFFFFF;

/* GOOD: 7:1 ratio */
color: #333333;
background: #FFFFFF;

3. Missing Form Labels

<!-- BAD -->
<input type="text" placeholder="Email">

<!-- GOOD -->
<label for="email">Email</label>
<input type="text" id="email">

4. Empty Links

<!-- BAD -->
<a href="report.pdf">
  <img src="pdf-icon.png">
</a>

<!-- GOOD -->
<a href="report.pdf">
  <img src="pdf-icon.png" alt="Download Annual Report (PDF, 2MB)">
</a>

5. Non-descriptive Link Text

<!-- BAD -->
<a href="/services">Click here</a> for our services.

<!-- GOOD -->
<a href="/services">View our cybersecurity services</a>

Related ISMS Policies

Information Security Policy - Accessibility as part of service delivery

Resources

WCAG 2.1: https://www.w3.org/WAI/WCAG21/quickref/
WebAIM: https://webaim.org/
A11Y Project: https://www.a11yproject.com/
MDN Accessibility: https://developer.mozilla.org/en-US/docs/Web/Accessibility

Accessibility Statement

Every website MUST include an accessibility statement at /accessibility-statement.html that includes:

Commitment to accessibility
WCAG 2.1 AA conformance claim
Known issues and limitations
Contact information for accessibility concerns
Date of last review

accessibility-wcag

Accessibility WCAG Skill

Purpose

Rules

WCAG 2.1 AA Requirements

Perceivable Requirements

Text Alternatives (1.1)

Time-based Media (1.2)

Adaptable Content (1.3)

Distinguishable Content (1.4)

Operable Requirements

Keyboard Accessible (2.1)

Enough Time (2.2)

Seizures and Physical Reactions (2.3)

Navigable (2.4)

Input Modalities (2.5)

Understandable Requirements

Readable (3.1)

Predictable (3.2)

Input Assistance (3.3)

Robust Requirements

Compatible (4.1)

ARIA Best Practices

Testing Checklist

Common Accessibility Errors

1. Missing Alt Text

2. Poor Color Contrast

3. Missing Form Labels

4. Empty Links

5. Non-descriptive Link Text

Related ISMS Policies

Related Documentation

Resources

Accessibility Statement