Barrierefreiheit

Das Next.js-Team ist bestrebt, Next.js für alle Entwickler (und deren Endnutzer) zugänglich zu machen. Durch die Integration von Barrierefreiheits-Funktionen in Next.js von Haus aus wollen wir das Web für alle inklusiver gestalten.

Routenansagen

Beim Wechsel zwischen serverseitig gerenderten Seiten (z.B. mit dem <a href>-Tag) geben Screenreader und andere assistive Technologien den Seitentitel aus, wenn die Seite geladen wird, damit Nutzer verstehen, dass sich die Seite geändert hat.

Neben traditionellen Seitenwechseln unterstützt Next.js auch clientseitige Übergänge für eine verbesserte Leistung (mit next/link). Um sicherzustellen, dass clientseitige Übergänge ebenfalls von assistiven Technologien ausgegeben werden, enthält Next.js standardmäßig eine Routenansage.

Die Next.js-Routenansage sucht nach dem Seitennamen, der ausgegeben werden soll, indem sie zunächst document.title prüft, dann das <h1>-Element und schließlich den URL-Pfadnamen. Für die bestmögliche barrierefreie Nutzererfahrung sollten Sie sicherstellen, dass jede Seite Ihrer Anwendung einen eindeutigen und beschreibenden Titel hat.

Linting

Next.js bietet von Haus aus eine integrierte ESLint-Erfahrung, 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

Diese Plugin hilft beispielsweise sicherzustellen, dass Sie Alt-Texte für img-Tags hinzufügen, korrekte aria-*-Attribute verwenden, korrekte role-Attribute nutzen und mehr.

Ressourcen zur Barrierefreiheit

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