Accessibility Audit of tailwindcss.com
I ran an accessibility scan on https://tailwindcss.com and found several issues that could affect users who rely on assistive technologies. Here's a summary with specific fixes.
Overall Score: 73/100 (Grade C)
Failed Checks: 6 of 16
1. Missing Image Alt Text (HIGH severity)
WCAG: SC 1.1.1 Non-text Content (Level A)
2 images are missing alt attributes entirely. This is the #1 most cited violation in ADA-related lawsuits.
Affected elements:
<img class="absolute inset-0 ..." src="/_next/static/media/dark-mode.light.4b26783a.png" style="--offset:0px"/>
<img src="/_next/static/media/dark-mode.dark.9634b3d8.png"/>
Fix: Add descriptive alt text, or alt="" if purely decorative:
<img src="/_next/static/media/dark-mode.light.4b26783a.png" alt="Tailwind CSS dark mode example in light theme" ... />
<img src="/_next/static/media/dark-mode.dark.9634b3d8.png" alt="Tailwind CSS dark mode example in dark theme" />
2. Missing Form Labels (HIGH severity)
WCAG: SC 1.3.1 Info and Relationships (Level A), SC 4.1.2 Name, Role, Value (Level A)
1 form input has no associated label, aria-label, or title.
Affected element:
<input type="text" tabindex="-1"/>
Fix: Add an aria-label attribute:
<input type="text" tabindex="-1" aria-label="Search" />
3. Missing Link Text on 40 Sponsor Links (MEDIUM severity)
WCAG: SC 2.4.4 Link Purpose (In Context) (Level A)
40 of 97 links have no accessible text. These are primarily sponsor logo links that wrap images but don't provide link text for screen readers.
Example affected elements:
<a href="https://cursor.com?utm_source=tailwindcss" ...>
<!-- Only contains an image, no aria-label -->
</a>
Fix: Add aria-label to each sponsor link:
<a href="https://cursor.com?utm_source=tailwindcss" aria-label="Cursor - Sponsor" ...>
...
</a>
4. Missing Button Label (HIGH severity)
WCAG: SC 4.1.2 Name, Role, Value (Level A)
1 button has no accessible name.
Affected element:
<button type="button" aria-hidden="true" style="position:fixed;top:1px;left:1px;width:1px;height:0;..."></button>
Fix: Since this appears to be a visually hidden focus trap button, adding aria-label would help:
<button type="button" aria-hidden="true" aria-label="Focus trap" ...></button>
5. No Skip Navigation Link (MEDIUM severity)
WCAG: SC 2.4.1 Bypass Blocks (Level A)
No "Skip to main content" link exists. Keyboard-only users must tab through all navigation items to reach the page content.
Fix: Add a skip link as the first focusable element:
<body>
<a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:z-50 focus:p-4 focus:bg-white focus:text-black">
Skip to main content
</a>
<!-- existing nav -->
<main id="main-content">
6. Missing ARIA Landmarks (MEDIUM severity)
WCAG: SC 1.3.1 Info and Relationships (Level A)
3 essential landmarks are missing: <main>, <nav>, and <header>. Screen readers use these to help users navigate the page structure.
Fix: Wrap existing content in semantic HTML5 elements:
<header><!-- site header content --></header>
<nav><!-- navigation links --></nav>
<main><!-- primary content --></main>
<footer><!-- already present --></footer>
Resources
Scanned with AccessScore — free WCAG accessibility checker
Accessibility Audit of tailwindcss.com
I ran an accessibility scan on https://tailwindcss.com and found several issues that could affect users who rely on assistive technologies. Here's a summary with specific fixes.
Overall Score: 73/100 (Grade C)
Failed Checks: 6 of 16
1. Missing Image Alt Text (HIGH severity)
WCAG: SC 1.1.1 Non-text Content (Level A)
2 images are missing
altattributes entirely. This is the #1 most cited violation in ADA-related lawsuits.Affected elements:
Fix: Add descriptive
alttext, oralt=""if purely decorative:2. Missing Form Labels (HIGH severity)
WCAG: SC 1.3.1 Info and Relationships (Level A), SC 4.1.2 Name, Role, Value (Level A)
1 form input has no associated label,
aria-label, ortitle.Affected element:
Fix: Add an
aria-labelattribute:3. Missing Link Text on 40 Sponsor Links (MEDIUM severity)
WCAG: SC 2.4.4 Link Purpose (In Context) (Level A)
40 of 97 links have no accessible text. These are primarily sponsor logo links that wrap images but don't provide link text for screen readers.
Example affected elements:
Fix: Add
aria-labelto each sponsor link:4. Missing Button Label (HIGH severity)
WCAG: SC 4.1.2 Name, Role, Value (Level A)
1 button has no accessible name.
Affected element:
Fix: Since this appears to be a visually hidden focus trap button, adding
aria-labelwould help:5. No Skip Navigation Link (MEDIUM severity)
WCAG: SC 2.4.1 Bypass Blocks (Level A)
No "Skip to main content" link exists. Keyboard-only users must tab through all navigation items to reach the page content.
Fix: Add a skip link as the first focusable element:
6. Missing ARIA Landmarks (MEDIUM severity)
WCAG: SC 1.3.1 Info and Relationships (Level A)
3 essential landmarks are missing:
<main>,<nav>, and<header>. Screen readers use these to help users navigate the page structure.Fix: Wrap existing content in semantic HTML5 elements:
Resources
Scanned with AccessScore — free WCAG accessibility checker