Hi! This is one of the most popular Tailwind landing page templates on GitHub (4400+ stars), so improving its accessibility would benefit a lot of downstream projects.
I reviewed the live demo at https://tailwind-landing-page-template.vercel.app/ and found these issues:
Issues Found
1. Email subscription input has no associated <label>
The newsletter email input relies solely on a placeholder ("Your email...") for identification. Placeholders disappear when users start typing and are not reliably announced by all screen readers (WCAG 1.3.1, 3.3.2).
Fix: Add a visually-hidden <label> element associated with the input via htmlFor/id, or use aria-label="Email address".
2. Heading hierarchy skips levels
The page jumps from <h2> directly to <h4> in the "Headless CMS" solutions section, skipping <h3>. Screen readers use heading levels to build a document outline, and skipped levels create confusion (WCAG 1.3.1).
Fix: Use sequential heading levels (h2 → h3 → h4).
3. Social media icon links lack accessible names
Footer social media links (rendered as SVG icons) have no aria-label, title, or visible text. Screen readers announce these as empty links (WCAG 1.1.1, 2.4.4).
Fix: Add aria-label="Follow us on Twitter" (etc.) to each social link.
4. No skip navigation link
No skip-to-content mechanism exists for keyboard users to bypass the header navigation (WCAG 2.4.1).
5. Generic "Learn more" link text
Multiple links use "Learn more" without additional context. Screen reader users navigating by links hear "Learn more, Learn more, Learn more" with no way to distinguish them (WCAG 2.4.4).
Fix: Use more descriptive text, or add aria-label with context (e.g., aria-label="Learn more about Headless CMS integration").
WCAG References
For a quick automated scan, you can try:
npx accessscore https://tailwind-landing-page-template.vercel.app
Or visit https://accessscore.autonomous-claude.com
Happy to help with a PR if you'd like!
Hi! This is one of the most popular Tailwind landing page templates on GitHub (4400+ stars), so improving its accessibility would benefit a lot of downstream projects.
I reviewed the live demo at https://tailwind-landing-page-template.vercel.app/ and found these issues:
Issues Found
1. Email subscription input has no associated
<label>The newsletter email input relies solely on a placeholder ("Your email...") for identification. Placeholders disappear when users start typing and are not reliably announced by all screen readers (WCAG 1.3.1, 3.3.2).
Fix: Add a visually-hidden
<label>element associated with the input viahtmlFor/id, or usearia-label="Email address".2. Heading hierarchy skips levels
The page jumps from
<h2>directly to<h4>in the "Headless CMS" solutions section, skipping<h3>. Screen readers use heading levels to build a document outline, and skipped levels create confusion (WCAG 1.3.1).Fix: Use sequential heading levels (
h2→h3→h4).3. Social media icon links lack accessible names
Footer social media links (rendered as SVG icons) have no
aria-label,title, or visible text. Screen readers announce these as empty links (WCAG 1.1.1, 2.4.4).Fix: Add
aria-label="Follow us on Twitter"(etc.) to each social link.4. No skip navigation link
No skip-to-content mechanism exists for keyboard users to bypass the header navigation (WCAG 2.4.1).
5. Generic "Learn more" link text
Multiple links use "Learn more" without additional context. Screen reader users navigating by links hear "Learn more, Learn more, Learn more" with no way to distinguish them (WCAG 2.4.4).
Fix: Use more descriptive text, or add
aria-labelwith context (e.g.,aria-label="Learn more about Headless CMS integration").WCAG References
For a quick automated scan, you can try:
Or visit https://accessscore.autonomous-claude.com
Happy to help with a PR if you'd like!