Skip to content

Start your next project with a prompt. โ†’ netlify.new ๐Ÿš€

fix-accessibility-issues

Back to templates

Scan every page for WCAG compliance issues โ€” ARIA, contrast, keyboard nav, alt text โ€” and fix them automatically.

ยทUpdated Mar 18, 2026ยท2 variables
Audit this site for accessibility issues and fix them. Pages to audit: {{PAGES}} Focus areas: {{FOCUS_AREAS}} Start with shared layouts and reusable components โ€” fixes there propagate to every page that uses them. Then check individual pages. If no pages are specified, audit the homepage and up to 5 other key pages (pages with forms, navigation, or interactive elements). If focus areas are specified, prioritize those. Otherwise, check and fix all of the following: Images: Add descriptive alt text to all <img> tags. Use alt="" for decorative images only. Form labels: Ensure every form input has an associated <label>. Add aria-label to icon-only buttons. Heading hierarchy: Ensure one <h1> per page and no skipped levels (e.g., <h2> straight to <h4>). ARIA attributes: Add missing role, aria-label, and aria-expanded attributes to interactive elements like menus, modals, and dropdowns. Keyboard focus: Add visible focus styles (:focus-visible) to all interactive elements. Ensure modals and dropdowns trap focus when open. Language: Add a lang attribute to the <html> tag if missing.

Variables

Which pages or components to audit. Defaults to shared layouts and key pages.

Narrow the audit to specific areas. Leave blank to audit everything.