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 als Standard möchten wir das Web für alle inklusiver gestalten.

Routenansagen

Beim Wechsel zwischen serverseitig gerenderten Seiten (z.B. durch Verwendung des <a href>-Tags) geben Screenreader und andere assistive Technologien 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 verbesserte Performance (mit next/link). Um sicherzustellen, dass auch clientseitige Übergänge von assistiven Technologien erkannt werden, enthält Next.js standardmäßig eine Routenansage.

Die Next.js-Routenansage sucht nach dem anzusagenden Seitennamen, indem sie zunächst document.title prüft, dann das <h1>-Element und schließlich den URL-Pfadnamen. 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 direkt mit, einschließlich benutzerdefinierter Regeln für Next.js. Standardmäßig enthält Next.js eslint-plugin-jsx-a11y, um frühzeitig Barrierefreiheits-Probleme 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.

Barrierefreiheits-Ressourcen

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