Barrierefreiheit

Das Next.js-Team ist bestrebt, Next.js für alle Entwickler (und deren Endbenutzer) zugänglich zu machen. Durch das Hinzufügen von Barrierefreiheitsfunktionen in Next.js möchten wir das Web für alle inklusiver gestalten.

Routen-Ankündigungen

Bei der Navigation zwischen serverseitig gerenderten Seiten (z.B. mit dem <a href>-Tag) kündigen Screenreader und andere Hilfstechnologien den Seitentitel beim Laden der Seite an, damit Benutzer verstehen, dass die Seite gewechselt wurde.

Zusätzlich zu traditionellen Seitennavigationen unterstützt Next.js auch clientseitige Übergänge für verbesserte Leistung (mit next/link). Um sicherzustellen, dass clientseitige Übergänge auch für Hilfstechnologien angekündigt werden, enthält Next.js standardmäßig einen Routen-Ankündiger.

Der Next.js-Routen-Ankündiger sucht den anzukündigenden Seitennamen zunächst in document.title, dann im <h1>-Element und schließlich im URL-Pfadnamen. Für das barrierefreieste Benutzererlebnis stellen Sie sicher, dass jede Seite in Ihrer Anwendung einen eindeutigen und beschreibenden Titel hat.

Linting

Next.js bietet eine integrierte ESLint-Erfahrung out of the box, einschließlich benutzerdefinierter Regeln für Next.js. Standardmäßig enthält Next.js eslint-plugin-jsx-a11y, um Barrierefreiheitsprobleme frühzeitig zu erkennen, einschließlich Warnungen zu:

• aria-props
• aria-proptypes
• aria-unsupported-elements
• role-has-required-aria-props
• role-supports-aria-props

Dieses Plugin hilft beispielsweise sicherzustellen, dass Sie Alt-Text zu img-Tags hinzufügen, korrekte aria-*-Attribute verwenden, korrekte role-Attribute nutzen und mehr.

Barrierefreiheits-Ressourcen

• WebAIM WCAG-Checkliste
• WCAG 2.2 Richtlinien
• The A11y Project
• Überprüfen Sie die Farbkontrastverhältnisse zwischen Vorder- und Hintergrundelementen
• Verwenden Sie prefers-reduced-motion bei der Arbeit mit Animationen