Skip to content

Accessibility: generic alt text on images, no skip navigation, missing focus management #29

@ryuno2525

Description

@ryuno2525

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!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions