Next.js Section 508 Checker

Section 508 for Next.js Sites

Section 508 of the Rehabilitation Act requires federal agencies to make the information and communication technology they develop, buy, maintain or use accessible. The Revised 508 Standards, in effect since January 2018, incorporate WCAG 2.0 Level A and AA for web content, electronic documents and software.

Private businesses are not directly covered, but agencies must buy accessible technology, so vendors are often asked for an Accessibility Conformance Report (ACR) based on the VPAT. This checker runs the scan with the WCAG 2.0 AA preset that Section 508 uses.

Federal apps built with Next.js are software as well as web content under Section 508. Scan the rendered pages here, and test keyboard and screen reader behavior in your components by hand.

Who Should Run the Next.js Section 508 Checker

• Federal agencies running a site or microsite on Next.js.
• Contractors and vendors whose Next.js site or portal is part of a federal contract.
• Agencies and vendors preparing a VPAT or Accessibility Conformance Report.
• State bodies and universities whose policies adopt Section 508.

Section 508 Checks That Matter for Next.js Sites

• 1.1.1 Non-text Content

  Every image, icon and chart needs a text alternative, or must be marked as decorative.

• 1.3.1 Info and Relationships

  Headings, lists, tables and form labels must be marked up so assistive technology can read the structure.

• 1.4.3 Contrast (Minimum)

  Text needs a contrast ratio of at least 4.5:1, or 3:1 for large text.

• 2.1.1 Keyboard

  Every function must work with a keyboard alone.

• 2.4.1 Bypass Blocks

  Provide a way to skip repeated navigation, such as a skip link.

• 4.1.2 Name, Role, Value

  Custom controls need a name, role and state that assistive technology can read.

Where Next.js Sites Usually Fail Section 508

These problems come up again and again on Next.js sites, and each one fails Section 508. The Next.js accessibility checker explains how to fix them in Next.js.

• Client-side route changes. Navigation without a page load needs a unique title for each route and sensible focus handling, or screen reader and keyboard users do not know the page has changed.
• next/image alt text. The image component asks for an alt prop, but it is often set to a file name, left generic or filled with an empty string on images that carry meaning.
• Page language and metadata. A hard-coded or missing lang attribute in the root layout, and the same title on every route, affect every page on the site.
• Custom dialogs, menus and dropdowns. Components built from divs and click handlers, rather than buttons and links, are missing roles, names and keyboard support.
• Loading and error states. Skeletons, spinners and streamed content appear without being announced, and form errors rendered by client components often are not tied to their fields.

Worried about ADA claims as well? The Next.js ADA compliance checker covers the Next.js risks behind most complaints.

What to Test by Hand on Next.js

Automated testing finds many, but not all, Section 508 failures. Check these yourself after the scan:

1. Test every page with a keyboard only, including menus and dialogs (2.1.1).
2. Check documents and PDFs separately, since Section 508 covers them too.
3. Record results per criterion if you need to complete a VPAT or ACR.
4. Rescan after each fix. Continuous monitoring rescans up to 500 URLs per domain daily and keeps a dated record in the Compliance Vault.

Start 3-day free trial

Related Guides

• Section 508 CheckerThe Section 508 standard in full, for any website.
• WCAG 4.1.3 Status Messages Explained in Plain EnglishWCAG 4.1.3 Status Messages explained simply: what counts, how to announce it with role status, alert, progressbar or aria-live, form errors and how to test.
• WCAG 4.1.2 Name, Role, Value Explained in Plain EnglishWCAG 4.1.2 Name, Role, Value explained simply: give every control a name, role and state with native HTML and ARIA, with code examples and how to test.
• Keyboard Accessibility TestingA practical guide to keyboard accessibility testing: what to check, the exact keys to use, and a component-by-component reference table mapped to WCAG.
• WCAG Success Criteria LibraryLook up any criterion the scan flags, in plain language.

Next.js Section 508 Checker: Frequently Asked Questions