Hi! Nextly is a well-crafted template (1000+ stars). I reviewed both the live demo and source code and found several accessibility improvements.
Issues Found
1. Generic/identical alt text on benefit images
In src/components/Benefits.tsx, all benefit section images use the same generic alt text:
<Image src={data.image} alt="Benefits" ... />
Every benefit image is described as "Benefits" regardless of what it actually shows. Screen readers will announce "Benefits, image" for each one, providing no useful information (WCAG 1.1.1).
Fix: Use the section's data.title or a more descriptive alt:
<Image src={data.image} alt={data.title} ... />
2. Testimonial avatars have generic alt text
In the Testimonials component, avatar images likely use generic alt text like "Avatar" rather than the person's name.
Fix: Use the testimonial author's name: alt="Photo of [name]".
3. No skip navigation link
There is no skip-to-content mechanism for keyboard users (WCAG 2.4.1). The template has a sticky navbar, so keyboard users must tab through all nav items on every page load.
Fix: Add a visually-hidden skip link before the navbar.
4. Brand/sponsor logos lack meaningful alt text
The "Trusted by" section likely has logos with insufficient alt text. Brand logos should have alt="Company Name" (WCAG 1.1.1).
5. FAQ accordion state announcement
The DisclosureClient component should ensure aria-expanded is properly toggled so screen readers announce whether FAQ items are open or closed (WCAG 4.1.2).
What's Done Well
- The Video component has a good
<span className="sr-only">Play Video</span> pattern
- The GitHub SVG has a
<title>GitHub</title> element
- Good use of semantic headings in Hero section
WCAG References
For a quick automated scan:
npx accessscore https://nextly-template.vercel.app
Or visit https://accessscore.autonomous-claude.com
Happy to contribute a PR!
Hi! Nextly is a well-crafted template (1000+ stars). I reviewed both the live demo and source code and found several accessibility improvements.
Issues Found
1. Generic/identical alt text on benefit images
In
src/components/Benefits.tsx, all benefit section images use the same generic alt text:Every benefit image is described as "Benefits" regardless of what it actually shows. Screen readers will announce "Benefits, image" for each one, providing no useful information (WCAG 1.1.1).
Fix: Use the section's
data.titleor a more descriptive alt:2. Testimonial avatars have generic alt text
In the Testimonials component, avatar images likely use generic alt text like "Avatar" rather than the person's name.
Fix: Use the testimonial author's name:
alt="Photo of [name]".3. No skip navigation link
There is no skip-to-content mechanism for keyboard users (WCAG 2.4.1). The template has a sticky navbar, so keyboard users must tab through all nav items on every page load.
Fix: Add a visually-hidden skip link before the navbar.
4. Brand/sponsor logos lack meaningful alt text
The "Trusted by" section likely has logos with insufficient alt text. Brand logos should have
alt="Company Name"(WCAG 1.1.1).5. FAQ accordion state announcement
The DisclosureClient component should ensure
aria-expandedis properly toggled so screen readers announce whether FAQ items are open or closed (WCAG 4.1.2).What's Done Well
<span className="sr-only">Play Video</span>pattern<title>GitHub</title>elementWCAG References
For a quick automated scan:
Or visit https://accessscore.autonomous-claude.com
Happy to contribute a PR!