Accessibility Checks
Auditoro checks for common accessibility issues that affect users with disabilities, including those using screen readers, keyboard navigation, or other assistive technologies.
Missing Alt Text
Severity: Caution
Images on your page are missing the alt attribute. Alt text provides a text alternative for images, which is essential for:
- Screen reader users - Alt text is read aloud to describe images
- Slow connections - Alt text displays while images load
- Search engines - Alt text helps search engines understand image content
How to fix:
Add descriptive alt text to all meaningful images:
<!-- Informative image -->
<img src="chart.png" alt="Bar chart showing Q4 sales increased 25% over Q3">
<!-- Decorative image (empty alt is correct) -->
<img src="decorative-border.png" alt="">
<!-- Image as link -->
<a href="/products">
<img src="products-icon.png" alt="View our products">
</a>
Best practices:
- Be descriptive - Describe what the image shows, not just "image of..."
- Be concise - Keep alt text under 125 characters
- Consider context - What information does the image convey?
- Empty alt for decorative images - Use
alt=""for purely decorative images - Don't duplicate - If text near the image describes it, shorter alt is fine
Examples:
| Image Type | Bad Alt | Good Alt |
|---|---|---|
| Product photo | "Image" | "Blue running shoes, model X200" |
| Chart | "Chart" | "Line graph: website traffic doubled from January to March" |
| Logo | "Logo" | "Acme Company" |
| Team photo | "Photo" | "The engineering team at the 2024 company retreat" |
| Decorative icon | "Star icon" | "" (empty - decorative) |
Missing Lang Attribute
Severity: Caution
The HTML document is missing the lang attribute on the <html> tag. This attribute declares the primary language of the page.
Why it matters:
- Screen readers - Use the lang attribute to select correct pronunciation
- Translation tools - Identify the source language
- Search engines - Understand the page's language
- Browser features - Spell checkers and auto-translate use this
How to fix:
Add the lang attribute to your HTML tag:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Page</title>
</head>
<body>
...
</body>
</html>
Common language codes:
| Language | Code |
|---|---|
| English | en |
| English (US) | en-US |
| English (UK) | en-GB |
| Spanish | es |
| French | fr |
| German | de |
| Japanese | ja |
| Chinese (Simplified) | zh-CN |
| Portuguese | pt |
| Portuguese (Brazil) | pt-BR |
For multilingual content:
If sections of your page are in a different language, use the lang attribute on those elements:
<html lang="en">
<body>
<p>Welcome to our site.</p>
<p lang="es">Bienvenido a nuestro sitio.</p>
</body>
</html>
Why Accessibility Matters
Legal Requirements
Many countries have laws requiring website accessibility:
- United States - ADA, Section 508
- European Union - European Accessibility Act
- United Kingdom - Equality Act 2010
- Canada - AODA
Business Benefits
- Larger audience - 15% of the global population has a disability
- Better SEO - Many accessibility practices improve search rankings
- Improved UX - Accessible sites are often more usable for everyone
- Legal protection - Avoid potential lawsuits
Best Practices Beyond These Checks
While Auditoro checks for common issues, full accessibility compliance involves additional considerations:
- Color contrast ratios
- Keyboard navigation
- Form labels and error messages
- Focus indicators
- Skip links
- ARIA labels and roles
- Video captions and transcripts
For comprehensive accessibility testing, consider tools like: