ADA Scan Logo

Scan Results

https://example.com

Scanned 2 hours ago • Duration: 45 seconds

URL copied to clipboard!
78%

Accessibility Score

This page needs significant accessibility improvements.

Need help fixing these accessibility issues? We can implement the solutions for you, fast.

BT Pro Solutions

Issues Summary

Critical Issues
3
0 fixed
Warnings
4
0 fixed
Notices
2
0 fixed

Scan Details

Standard

WCAG 2.1 AA

Status

Completed

Duration

45 seconds

Scanned

Dec 15, 2024 at 2:30 PM

Report ID

PREVIEW-12345

Issues Found

Images missing alt text
Critical

Images without alt text are not accessible to screen readers and other assistive technologies.

Element: img[src="hero-image.jpg"]

AI Recommendation

Add descriptive alt text to all images that convey information. For decorative images, use alt="" or role="presentation".

Before:
<img src="hero-image.jpg">
After:
<img src="hero-image.jpg" alt="Team collaboration meeting in modern office">
WCAG 1.1.1
Low color contrast
Critical

Text color does not provide sufficient contrast against the background color.

Element: .hero-text

AI Recommendation

Increase the contrast ratio to at least 4.5:1 for normal text and 3:1 for large text.

Before:
.hero-text { color: #666666; }
After:
.hero-text { color: #333333; }
WCAG 1.4.3
Missing form labels
Critical

Form inputs are not properly labeled, making them inaccessible to screen readers.

Element: input[name="email"]

AI Recommendation

Add proper labels for all form inputs using the label element or aria-label.

Before:
<input type="email" name="email">
After:
<label for="email">Email Address</label>
<input type="email" name="email" id="email">
WCAG 3.3.2
Missing landmark structure
High

Page content is not properly organized with semantic landmarks.

Element: .content-area

AI Recommendation

Wrap main content in semantic HTML5 elements like <main>, <nav>, <header>, <footer>.

Before:
<div class="content-area">Main content here</div>
After:
<main role="main">
  <div class="content-area">Main content here</div>
</main>
WCAG 1.3.1
Heading structure issues
High

Heading elements are not in a logical, sequential order.

Element: h1, h2, h3

AI Recommendation

Ensure headings follow a logical hierarchy: h1 → h2 → h3, without skipping levels.

Before:
<h1>Title</h1>
<h3>Subtitle</h3>
After:
<h1>Title</h1>
<h2>Subtitle</h2>
WCAG 1.3.1
Non-descriptive link text
High

Link text does not clearly indicate the destination or purpose.

Element: a[href="#"]

AI Recommendation

Use descriptive link text that clearly indicates the destination or purpose.

Before:
<a href="#">Click here</a>
After:
<a href="/contact">Contact our support team</a>
WCAG 2.4.4
Keyboard navigation issues
High

Some interactive elements cannot be accessed using only the keyboard.

Element: .dropdown-menu

AI Recommendation

Add proper keyboard navigation support using tabindex and ARIA attributes.

Before:
<div class="dropdown-menu">Menu items</div>
After:
<div class="dropdown-menu" tabindex="0" role="menu">
  <div role="menuitem" tabindex="-1">Menu items</div>
</div>
WCAG 2.1.1
Missing main heading
Notice

Page lacks a clear, descriptive main heading (h1).

Element: body

AI Recommendation

Add a descriptive h1 heading that clearly describes the page content.

Before:
<body>Page content</body>
After:
<body>
  <h1>Welcome to Our Company</h1>
  Page content
</body>
WCAG 1.3.1
Missing main landmark
Notice

Page lacks a main landmark to identify the primary content area.

Element: body

AI Recommendation

Add a main landmark to identify the primary content area.

Before:
<body>Page content</body>
After:
<body>
  <main role="main">
    Page content
  </main>
</body>
WCAG 1.3.1

GitHub Copilot Integration

Coming Soon: Automatic issue creation and AI-powered code fixes with GitHub Copilot