📚 Help & Documentation
Everything you need to know about making the web accessible
Our Tools
Learn about each accessibility tool
Understanding Scores
How scores are calculated
WCAG Guidelines
Web accessibility standards
Common Issues
Fix frequent problems
Testing Tools
Test your website
Resources
Learn more about accessibility
📑 Quick Navigation
🛠️ Our Accessibility Tools
AccessAI provides a comprehensive suite of AI-powered tools to help you create accessible websites:
💬 AI Chat Assistant
What it does: Get instant answers to accessibility questions
When to use: When you need quick guidance on WCAG standards, assistive technologies, or best practices
Best for: Learning, troubleshooting, getting recommendations
📊 Accessibility Score
What it does: Analyzes your entire website and provides a comprehensive accessibility score
When to use: For complete site audits and compliance checking
Best for: Regular monitoring, compliance reports, prioritizing fixes
🖼️ Alt Text Generator
What it does: Uses AI vision to generate descriptive alt text for images
When to use: When adding images to your website or updating existing ones
Best for: WCAG 1.1.1 compliance, improving screen reader experience
🔍 Code Reviewer
What it does: Reviews your HTML/CSS/JSX code for accessibility issues
When to use: During development or when refactoring existing code
Best for: Catching issues early, learning best practices, code quality
📝 Content Simplifier
What it does: Simplifies complex content for better readability
When to use: Writing content that needs to be accessible to all reading levels
Best for: WCAG 3.1.5 compliance, cognitive accessibility, plain language
💡 Pro Tip
Use the tools in sequence: Start with Accessibility Score to identify issues, use Code Reviewer to fix specific problems, Alt Text Generator for images, and Content Simplifier for text. Use the AI Chat anytime you have questions!
📊 Understanding Your Accessibility Score
Your accessibility score is calculated using a weighted methodology based on WCAG 2.1 Level AA standards. The score ranges from 0-100, with higher scores indicating better accessibility.
Score Breakdown
Issues are categorized by severity and weighted accordingly:
- Critical Issues (40% weight): 10 points deducted per issue - Major barriers that prevent access
- Structural Issues (30% weight): 7.5 points deducted per issue - Significant navigation/organization problems
- Content Issues (20% weight): 5 points deducted per issue - Content clarity and understanding problems
- Technical Issues (10% weight): 2.5 points deducted per issue - Minor technical compliance items
Score = 100 - (Critical × 10) - (Structural × 7.5) - (Content × 5) - (Technical × 2.5)
Score Ranges Explained
✅ Consistency Guarantee
Our scoring system ensures consistent results - the same website will always receive the same score when analyzed under the same conditions. This allows you to accurately track improvements over time.
📋 WCAG 2.1 Guidelines Explained
The Web Content Accessibility Guidelines (WCAG) 2.1 are organized around four principles known as POUR:
1. Perceivable
Information and user interface components must be presentable to users in ways they can perceive.
Key Guidelines:
- 1.1 Text Alternatives: Provide text alternatives for non-text content (images, videos, audio)
- 1.2 Time-based Media: Provide captions and audio descriptions for videos
- 1.3 Adaptable: Create content that can be presented in different ways without losing information
- 1.4 Distinguishable: Make it easier to see and hear content (color contrast, text resizing)
<!-- Good: Image with descriptive alt text -->
<img src="chart.png" alt="Sales increased by 25% in Q4 2024">
<!-- Bad: Missing or generic alt text -->
<img src="chart.png" alt="chart">
2. Operable
User interface components and navigation must be operable by all users.
Key Guidelines:
- 2.1 Keyboard Accessible: All functionality must work with keyboard only
- 2.2 Enough Time: Give users enough time to read and use content
- 2.3 Seizures: Don't design content that could cause seizures (flashing)
- 2.4 Navigable: Provide ways to help users navigate and find content
- 2.5 Input Modalities: Make it easier to operate through various inputs
<!-- Good: Keyboard accessible button -->
<button onclick="submitForm()" aria-label="Submit form">
Submit
</button>
<!-- Bad: Non-keyboard accessible div -->
<div onclick="submitForm()">Submit</div>
3. Understandable
Information and the operation of user interface must be understandable.
Key Guidelines:
- 3.1 Readable: Make text content readable and understandable
- 3.2 Predictable: Make pages appear and operate in predictable ways
- 3.3 Input Assistance: Help users avoid and correct mistakes
<!-- Good: Clear error message with help -->
<label for="email">Email Address:</label>
<input type="email" id="email" aria-describedby="email-error">
<span id="email-error" role="alert">
Please enter a valid email address (e.g., user@example.com)
</span>
<!-- Bad: Vague error -->
<span>Invalid input</span>
4. Robust
Content must be robust enough to be interpreted reliably by a wide variety of user agents, including assistive technologies.
Key Guidelines:
- 4.1 Compatible: Maximize compatibility with current and future user agents and assistive technologies
<!-- Good: Semantic HTML with proper ARIA -->
<nav aria-label="Main navigation">
<ul>
<li><a href="/" aria-current="page">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
<!-- Bad: Non-semantic markup -->
<div class="nav">
<span onclick="goHome()">Home</span>
<span onclick="goAbout()">About</span>
</div>