Accessibility Planning

Plan for inclusive design and WCAG compliance before development begins.

When to Use This Skill

Use this skill when:

• Accessibility Planning tasks - Working on plan accessibility compliance - wcag 2.2, section 508, en 301 549, inclusive design principles, audit planning, and remediation strategies
• Planning or design - Need guidance on Accessibility Planning approaches
• Best practices - Want to follow established patterns and standards

MANDATORY: Skill Loading First

Before answering ANY accessibility question:

2. Use official WCAG and accessibility standards
3. Base all guidance on validated accessibility practices

Accessibility Standards

WCAG 2.2 Overview

Level	Description	Typical Requirement
A	Minimum	Basic accessibility barriers removed
AA	Standard	Most common barriers addressed
AAA	Enhanced	Highest level of accessibility

Target: Most organizations target WCAG 2.2 Level AA.

Compliance Frameworks

Standard	Region	Applies To
WCAG 2.2	Global	Web content
Section 508	USA	Federal agencies, contractors
EN 301 549	Europe	Public sector, ICT products
ADA	USA	Public accommodations
AODA	Ontario, Canada	Businesses, organizations

WCAG 2.2 Principles (POUR)

1. Perceivable

Users must be able to perceive content.

Guideline	Key Requirements
1.1 Text Alternatives	Alt text for images, captions for audio
1.2 Time-based Media	Captions, audio descriptions, transcripts
1.3 Adaptable	Structure via semantic HTML, meaningful sequence
1.4 Distinguishable	Color contrast, resize text, audio control

2. Operable

Users must be able to operate the interface.

Guideline	Key Requirements
2.1 Keyboard Accessible	All functionality via keyboard
2.2 Enough Time	Adjustable timing, pause/stop content
2.3 Seizures	No flashing content >3 times/second
2.4 Navigable	Skip links, page titles, focus order
2.5 Input Modalities	Pointer gestures, target size, motion

3. Understandable

Content and operation must be understandable.

Guideline	Key Requirements
3.1 Readable	Language identification, abbreviations
3.2 Predictable	Consistent navigation, no unexpected changes
3.3 Input Assistance	Error identification, labels, suggestions

4. Robust

Content must work with assistive technologies.

Guideline	Key Requirements
4.1 Compatible	Valid markup, name/role/value for components

WCAG 2.2 New Success Criteria

Criterion	Level	Description
2.4.11 Focus Not Obscured (Min)	AA	Focused element not entirely hidden
2.4.12 Focus Not Obscured (Enhanced)	AAA	Focused element not partially hidden
2.4.13 Focus Appearance	AAA	Visible focus indicator requirements
2.5.7 Dragging Movements	AA	Single-pointer alternative to dragging
2.5.8 Target Size (Minimum)	AA	24x24 CSS pixels minimum
3.2.6 Consistent Help	A	Help mechanisms in consistent location
3.3.7 Redundant Entry	A	Don't require re-entering same info
3.3.8 Accessible Authentication (Min)	AA	No cognitive function tests for auth
3.3.9 Accessible Authentication (Enhanced)	AAA	Extended auth requirements

Accessibility Audit Planning

Audit Types

Type	Scope	When
Quick Audit	High-traffic pages, key flows	Sprint review
Comprehensive Audit	Full WCAG checklist	Before launch
Continuous Monitoring	Automated scans	Ongoing
User Testing	With assistive technology users	Periodically

Audit Checklist Template

# Accessibility Audit Plan

## Scope
- **Product/Site:** [Name]
- **Pages/Components:** [List or "All"]
- **Standard:** WCAG 2.2 Level AA
- **Timeline:** [Dates]

## Testing Matrix

### Automated Testing
- [ ] axe DevTools scan
- [ ] WAVE evaluation
- [ ] Lighthouse accessibility audit
- [ ] Pa11y CI integration

### Manual Testing
- [ ] Keyboard-only navigation
- [ ] Screen reader testing (NVDA, VoiceOver, JAWS)
- [ ] High contrast mode
- [ ] Browser zoom (200%)
- [ ] Color blindness simulation

### Assistive Technology Matrix

| AT | Browser | OS | Tester |
|----|---------|----|----|
| NVDA | Chrome | Windows | [Name] |
| JAWS | Chrome | Windows | [Name] |
| VoiceOver | Safari | macOS | [Name] |
| VoiceOver | Safari | iOS | [Name] |
| TalkBack | Chrome | Android | [Name] |

## Pages/Components to Test

| Priority | Page/Component | URL/Location | Status |
|----------|----------------|--------------|--------|
| High | Homepage | / | Pending |
| High | Login | /login | Pending |
| High | Checkout | /checkout | Pending |
| Medium | Product listing | /products | Pending |
| Medium | Forms | /contact | Pending |

## Issue Tracking
- **Tool:** [Jira/GitHub Issues/etc.]
- **Label:** accessibility
- **Severity Levels:** Critical, Major, Minor, Enhancement

## Deliverables
- [ ] Issue log with WCAG mapping
- [ ] Prioritized remediation plan
- [ ] VPAT/ACR (if required)
- [ ] Executive summary

Common Accessibility Issues

Critical (Level A failures)

Issue	WCAG	Fix
Missing alt text	1.1.1	Add descriptive alt attributes
No keyboard access	2.1.1	Ensure all interactive elements focusable
Missing form labels	1.3.1	Associate labels with inputs
Empty buttons/links	4.1.2	Add accessible names
Auto-playing media	1.4.2	Provide pause/stop controls

Major (Level AA failures)

Issue	WCAG	Fix
Low color contrast	1.4.3	4.5:1 for text, 3:1 for large text
No skip navigation	2.4.1	Add skip link to main content
Missing page titles	2.4.2	Unique, descriptive titles
Focus not visible	2.4.7	Visible focus indicator
Reflow issues	1.4.10	Responsive at 400% zoom

.NET/Blazor Accessibility Patterns

// Accessible button component
@code {
    [Parameter] public string AriaLabel { get; set; } = "";
    [Parameter] public bool IsDisabled { get; set; }
    [Parameter] public RenderFragment? ChildContent { get; set; }
    [Parameter] public EventCallback OnClick { get; set; }
}

<button
    type="button"
    aria-label="@AriaLabel"
    aria-disabled="@IsDisabled.ToString().ToLower()"
    disabled="@IsDisabled"
    @onclick="HandleClick"
    class="btn">
    @ChildContent
</button>

@code {
    private async Task HandleClick()
    {
        if (!IsDisabled)
        {
            await OnClick.InvokeAsync();
        }
    }
}

// Accessible form field
<div class="form-group">
    <label for="@Id" class="@(IsRequired ? "required" : "")">
        @Label
        @if (IsRequired)
        {
            <span aria-hidden="true">*</span>
            <span class="visually-hidden">(required)</span>
        }
    </label>

    <input
        id="@Id"
        name="@Name"
        type="@Type"
        @bind="Value"
        aria-required="@IsRequired.ToString().ToLower()"
        aria-invalid="@(!string.IsNullOrEmpty(ErrorMessage)).ToString().ToLower()"
        aria-describedby="@(HasError ? $"{Id}-error" : HintId)"
        class="@(HasError ? "input-error" : "")" />

    @if (!string.IsNullOrEmpty(Hint))
    {
        <span id="@HintId" class="hint">@Hint</span>
    }

    @if (HasError)
    {
        <span id="@($"{Id}-error")" class="error" role="alert">
            @ErrorMessage
        </span>
    }
</div>

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

<style>
    .skip-link {
        position: absolute;
        top: -40px;
        left: 0;
        background: #000;
        color: #fff;
        padding: 8px;
        z-index: 100;
    }

    .skip-link:focus {
        top: 0;
    }
</style>

Color Contrast Requirements

Contrast Ratios

Element Type	WCAG AA	WCAG AAA
Normal text (<18pt)	4.5:1	7:1
Large text (≥18pt or ≥14pt bold)	3:1	4.5:1
UI components & graphics	3:1	3:1

Contrast Checker

public class ContrastChecker
{
    public record ContrastResult(
        double Ratio,
        bool PassesAA,
        bool PassesAAA,
        bool PassesLargeTextAA,
        bool PassesLargeTextAAA
    );

    public ContrastResult Calculate(string foreground, string background)
    {
        var fgLuminance = GetRelativeLuminance(foreground);
        var bgLuminance = GetRelativeLuminance(background);

        var lighter = Math.Max(fgLuminance, bgLuminance);
        var darker = Math.Min(fgLuminance, bgLuminance);

        var ratio = (lighter + 0.05) / (darker + 0.05);
        ratio = Math.Round(ratio, 2);

        return new ContrastResult(
            Ratio: ratio,
            PassesAA: ratio >= 4.5,
            PassesAAA: ratio >= 7,
            PassesLargeTextAA: ratio >= 3,
            PassesLargeTextAAA: ratio >= 4.5
        );
    }

    private static double GetRelativeLuminance(string hex)
    {
        var rgb = ParseHex(hex);
        var r = GetLuminanceComponent(rgb.R);
        var g = GetLuminanceComponent(rgb.G);
        var b = GetLuminanceComponent(rgb.B);

        return 0.2126 * r + 0.7152 * g + 0.0722 * b;
    }

    private static double GetLuminanceComponent(byte value)
    {
        var sRGB = value / 255.0;
        return sRGB <= 0.03928
            ? sRGB / 12.92
            : Math.Pow((sRGB + 0.055) / 1.055, 2.4);
    }

    private static (byte R, byte G, byte B) ParseHex(string hex)
    {
        hex = hex.TrimStart('#');
        return (
            Convert.ToByte(hex[..2], 16),
            Convert.ToByte(hex[2..4], 16),
            Convert.ToByte(hex[4..6], 16)
        );
    }
}

Keyboard Navigation Requirements

Focus Order

// Tab order management
public class FocusManager
{
    private readonly IJSRuntime _js;

    public async Task SetFocusTo(string elementId)
    {
        await _js.InvokeVoidAsync("focusElement", elementId);
    }

    public async Task TrapFocusInModal(string modalId)
    {
        await _js.InvokeVoidAsync("trapFocus", modalId);
    }

    public async Task RestoreFocus(string previousElementId)
    {
        await _js.InvokeVoidAsync("focusElement", previousElementId);
    }
}

// Focus trap for modals
window.trapFocus = function(modalId) {
    const modal = document.getElementById(modalId);
    const focusableElements = modal.querySelectorAll(
        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
    );

    const firstElement = focusableElements[0];
    const lastElement = focusableElements[focusableElements.length - 1];

    modal.addEventListener('keydown', function(e) {
        if (e.key === 'Tab') {
            if (e.shiftKey && document.activeElement === firstElement) {
                lastElement.focus();
                e.preventDefault();
            } else if (!e.shiftKey && document.activeElement === lastElement) {
                firstElement.focus();
                e.preventDefault();
            }
        }
    });

    firstElement.focus();
};

Required Keyboard Interactions

Component	Keys	Action
Button	Enter, Space	Activate
Link	Enter	Navigate
Checkbox	Space	Toggle
Radio	Arrow keys	Navigate options
Select	Arrow keys, Enter	Navigate, select
Tab panel	Arrow keys	Switch tabs
Menu	Arrow keys, Enter, Esc	Navigate, select, close
Modal	Esc	Close

VPAT (Voluntary Product Accessibility Template)

VPAT Structure

# [Product Name] Accessibility Conformance Report
## WCAG 2.2 Edition

**Report Date:** [Date]
**Product Version:** [Version]
**Contact:** [Email]

### Table 1: Success Criteria, Level A

| Criteria | Conformance Level | Remarks |
|----------|-------------------|---------|
| 1.1.1 Non-text Content | Supports | All images have alt text |
| 1.2.1 Audio-only and Video-only | Not Applicable | No pre-recorded media |
| 1.3.1 Info and Relationships | Partially Supports | [Explanation] |
| ... | ... | ... |

### Table 2: Success Criteria, Level AA
[Continue pattern]

### Conformance Levels
- **Supports:** Fully meets criterion
- **Partially Supports:** Some aspects don't meet criterion
- **Does Not Support:** Majority doesn't meet criterion
- **Not Applicable:** Criterion doesn't apply

Remediation Planning

Priority Matrix

Priority	Criteria	Timeline
P0 - Critical	Level A failures, blocks functionality	Immediate
P1 - High	Level AA failures, significant barriers	Sprint 1
P2 - Medium	Level AA improvements, minor barriers	Sprint 2-3
P3 - Low	Best practices, enhancements	Backlog

Remediation Tracking

public class AccessibilityIssue
{
    public Guid Id { get; init; }
    public required string Title { get; init; }
    public required string Description { get; init; }
    public required WcagCriterion Criterion { get; init; }
    public required WcagLevel Level { get; init; }
    public required IssueStatus Status { get; init; }
    public required Priority Priority { get; init; }
    public required string AffectedComponent { get; init; }
    public string? Remediation { get; init; }
    public string? AssignedTo { get; init; }
    public DateOnly? TargetDate { get; init; }
}

public record WcagCriterion(string Number, string Name);

public enum WcagLevel { A, AA, AAA }

public enum Priority { Critical, High, Medium, Low }

public enum IssueStatus
{
    Open,
    InProgress,
    InReview,
    Closed,
    WontFix
}

Inclusive Design Principles

Microsoft Inclusive Design

1. Recognize exclusion - Understand how exclusion happens
2. Solve for one, extend to many - Design for edge cases first
3. Learn from diversity - Include diverse perspectives

Permanent, Temporary, Situational

Sense	Permanent	Temporary	Situational
Touch	One arm	Arm injury	Holding a baby
See	Blind	Cataract	Bright sunlight
Hear	Deaf	Ear infection	Noisy environment
Speak	Nonverbal	Laryngitis	Heavy accent

Checklist: Accessibility Planning

Strategy

• Target compliance level defined (AA recommended)
• Legal requirements identified
• Timeline established
• Resources allocated

Design Phase

• Color contrast verified
• Touch targets sized (44x44px minimum)
• Focus states designed
• Error states accessible
• Motion preferences considered

Development Phase

• Semantic HTML used
• ARIA used correctly (sparingly)
• Keyboard navigation works
• Focus management implemented
• Skip links added

Testing Phase

• Automated testing integrated
• Manual testing completed
• Screen reader testing done
• Keyboard-only testing done
• Zoom/reflow tested

Documentation

• Accessibility statement published
• VPAT completed (if required)
• Known issues documented
• Contact for feedback provided

Related Skills

• usability-testing

  - Inclusive usability testing

• design-system-planning

  - Accessible components

• heuristic-evaluation

  - Accessibility heuristics

• service-blueprinting

  - Accessible service touchpoints