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-Features in Next.js als Standard 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 Hilfstechnologien den Seitentitel bei Seitenladung aus, damit Nutzer verstehen, dass sich die Seite geändert hat.

Neben traditionellen Seitenwechseln unterstützt Next.js auch clientseitige Übergänge für bessere Performance (mit next/link). Um sicherzustellen, dass diese Übergänge ebenfalls für Hilfstechnologien angekündigt werden, enthält Next.js standardmäßig eine Routenansage.

Die Next.js-Routenansage sucht nach einem Seitennamen zur Ansage, indem zuerst document.title geprüft wird, dann das <h1>-Element und schließlich der URL-Pfad. Für das barrierefreiste Nutzererlebnis sollten Sie sicherstellen, dass jede Seite Ihrer Anwendung einen eindeutigen und beschreibenden Titel hat.

Linting

Next.js bietet eine integrierte ESLint-Erfahrung von Haus aus, inklusive 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-Texte für img-Tags hinzufügen, korrekte aria-*-Attribute verwenden, korrekte role-Attribute setzen und mehr.

Ressourcen zur Barrierefreiheit

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