Skip to main content
AccessibilityHub goes beyond raw tool output by enriching every accessibility issue with human-readable context, real-world impact, and actionable remediation guidance.

​
The Problem with Raw Tool Output

Standard accessibility tools return technical findings like: 
{
  "ruleId": "image-alt",
  "impact": "serious",
  "message": "Images must have alternate text",
  "html": "<img src='logo.png'>"
}
While accurate, this doesn’t answer:
  • Why is this a problem?
  • Who is affected?
  • How does it impact real users?
  • What should I do to fix it?
  • How long will it take to fix?

​
Enriched Context Solution

AccessibilityHub enhances each issue with comprehensive context: 
{
  "ruleId": "image-alt",
  "severity": "serious",
  "wcag": {
    "criterion": "1.1.1",
    "level": "A",
    "principle": "perceivable",
    "title": "Non-text content"
  },
  "priority": "critical",
  "remediationEffort": "low",
  "affectedUsers": ["screen-reader", "low-vision"],
  "humanContext": "**Non-text content (WCAG 1.1.1 - Level A)**\n\nAll non-text content must have a text alternative...\n\n**Real-world impact:** A user using JAWS screen reader will hear 'image' without description, losing context completely.",
  "suggestedActions": [
    "Add descriptive alt attribute to images",
    "Use aria-label for decorative icons with function",
    "Mark decorative images with alt='' (empty)"
  ]
}

​
Enrichment Components

​
1. WCAG Criterion Mapping

Every issue is mapped to its corresponding WCAG success criterion: 
{
  "wcag": {
    "criterion": "1.4.3",
    "level": "AA",
    "principle": "perceivable",
    "title": "Contrast (Minimum)"
  }
}
This allows you to:
  • Understand which WCAG requirement is violated
  • Know the conformance level (A, AA, AAA)
  • Group issues by WCAG principle
  • Link to official WCAG documentation

​
2. Affected Users

Identifies which user groups are impacted:
Screen reader users who rely on assistive technology to navigate and consume content.Technologies: JAWS, NVDA, VoiceOver, TalkBackCommon issues:
  • Missing alt text
  • Missing form labels
  • Invalid ARIA
  • Poor heading structure

​
3. Priority and Effort

Each issue includes business-oriented prioritization:

​
Priority Levels

Blocks users entirely from completing essential tasks or accessing key content.Examples:
  • Form inputs without labels (screen readers can’t complete forms)
  • Keyboard-only users trapped in modal
  • Critical button not keyboard accessible
Action: Fix immediately, block deployment if necessary
Significantly hinders users, creating major barriers to access.Examples:
  • Poor color contrast making text hard to read
  • Missing heading hierarchy confusing navigation
  • Link text unclear about destination
Action: Fix in current sprint
Some difficulty for users, but workarounds exist.Examples:
  • Missing skip navigation link
  • Redundant link text
  • Non-critical content without landmarks
Action: Plan for next sprint
Minor annoyance that doesn’t prevent access.Examples:
  • Decorative image missing empty alt
  • Page title could be more descriptive
  • Minor contrast issue on non-essential content
Action: Add to backlog, fix during refactoring

​
Remediation Effort

EffortTime EstimateExamples
Low< 30 minutes per issueAdd alt text, adjust colors, add labels
Medium1-4 hours per issueRefactor component for keyboard access, restructure headings
HighDays or sprintsRebuild custom components, redesign interaction patterns

​
Prioritization Matrix

Quick wins: Critical/High priority + Low effort = Fix todayStrategic fixes: Critical/High priority + Medium/High effort = Plan for sprintBacklog: Medium/Low priority + High effort = Evaluate vs impact

​
4. Human Context Explanation

The humanContext field provides a narrative explanation: Structure:
  1. WCAG criterion name and level
  2. Plain-language explanation of the requirement
  3. Real-world example showing user impact
  4. Why it matters for accessibility
Example: 
**Non-text content (WCAG 1.1.1 - Level A)**

All non-text content that is presented to the user must have a text alternative 
that serves the equivalent purpose. This includes images, icons, charts, and 
other visual elements.

**Real-world impact:** A user using JAWS screen reader navigating a product page 
will hear "image" for the product photo without alt text, having no idea what 
the product looks like or what's being shown. This could prevent them from making 
an informed purchase decision.

**Affected users:** Screen reader users, users with images disabled, search engines

​
5. Suggested Actions

Concrete, actionable steps to fix the issue: 
{
  "suggestedActions": [
    "Add descriptive alt attribute to images: <img alt='Product name - front view'>",
    "Use aria-label for icon buttons: <button aria-label='Close dialog'>",
    "Mark decorative images with empty alt: <img alt='' role='presentation'>",
    "Provide text alternatives in context if image is complex"
  ]
}
Suggested actions include code examples and multiple approaches when applicable.

​
How It Works

The enrichment process:
1

Tool Analysis

axe-core, Pa11y, or Lighthouse analyzes the page and returns raw issues
2

WCAG Mapping

Each issue’s ruleId is mapped to its WCAG criterion using internal data:
// src/shared/data/wcag-criteria.json
{
  "1.1.1": {
    "criterion": "1.1.1",
    "level": "A",
    "title": "Non-text content",
    "userImpact": { ... },
    "remediation": { ... }
  }
}
3

Context Enrichment

The normalizer adds human context fields:
  • humanContext: WCAG explanation + real-world example
  • affectedUsers: User groups impacted
  • priority: Business priority level
  • remediationEffort: Time estimate
  • suggestedActions: Fix steps
4

Unified Output

Returns enriched issues with all context fields populated

​
Using Enriched Context

​
For Developers

Quickly understand and fix issues: 
Prompt: Show me all critical issues with low remediation effort

Result:
1. Missing form labels (WCAG 1.3.1)
   - Priority: Critical
   - Effort: Low (15 min)
   - Fix: Add <label for="email">Email</label>
   
2. Image without alt text (WCAG 1.1.1)
   - Priority: Critical  
   - Effort: Low (10 min)
   - Fix: Add alt="Company logo" to <img>

​
For Product Managers

Prioritize accessibility work: 
Prompt: Group issues by priority and give me effort estimates

Result:
**Critical (2 issues, ~30 min total)**
- Form labels: 15 min
- Alt text: 10 min

**High (5 issues, ~4 hours total)**
- Color contrast: 2 hours
- Heading structure: 2 hours

​
For Accessibility Specialists

Validate compliance and educate team: 
Prompt: Explain the WCAG 2.4.4 issue found on the site

Result:
**Link Purpose (WCAG 2.4.4 - Level A)**

The purpose of each link must be determined from the link text alone, 
or from the link text together with its programmatically determined context.

You have 8 links that say "Read more" without indicating what will be read. 
Screen reader users navigating by links hear "Read more" repeatedly without 
context about the destination.

**Fix:** Use descriptive link text like "Read more about Product Features"

Accessibility Testing

Learn about the testing tools used

Interpreting Results

How to prioritize enriched findings

WCAG Criteria Resource

Browse all WCAG criteria data

Workflows

Common workflows using enriched context

Build docs developers (and LLMs) love

Get started for freeTalk to us