アクセシビリティ
Next.js チームは、Next.js をすべての開発者（およびそのエンドユーザー）にとってアクセスしやすくすることに取り組んでいます。Next.js にデフォルトでアクセシビリティ機能を追加することにより、Web をすべての人にとってより包括的なものにすることを目指しています。
ルートアナウンス
サーバー上でレンダリングされたページ間を移行するとき（例：<a href>タグを使用）、スクリーンリーダーやその他の支援技術はページが読み込まれるときにページタイトルをアナウンスし、ユーザーがページが変わったことを理解できるようにします。
従来のページナビゲーションに加えて、Next.js はクライアントサイドの遷移もサポートしており、パフォーマンスを向上させます（next/linkを使用）。クライアントサイドの遷移も支援技術にアナウンスされるようにするために、Next.js はデフォルトでルートアナウンサーを含んでいます。
Next.js ルートアナウンサーは、まず document.title を調べ、次に <h1> 要素、そして最後に URL のパス名を確認してページ名をアナウンスします。最もアクセシブルなユーザーエクスペリエンスを提供するために、アプリケーション内の各ページにはユニークで記述的なタイトルを持たせてください。
リンティング
Next.js は、Next.js 用のカスタムルールを含む統合された ESLint エクスペリエンスを提供します。デフォルトで、Next.js はeslint-plugin-jsx-a11yを含んでおり、次に該当するアクセシビリティの問題を早期に検出するのに役立ちます
- aria-props
- aria-proptypes
- aria-unsupported-elements
- role-has-required-aria-props
- role-supports-aria-props
たとえば、このプラグインは、imgタグに代替テキストを追加することや、正しいaria-*属性を使用すること、正しいrole属性を使用することなどを保証するのに役立ちます。
アクセシビリティリソース
- WebAIM WCAG チェックリスト
- WCAG 2.2 ガイドライン
- The A11y Project
- 前景要素と背景要素のコントラスト比を確認
- アニメーションを扱うときは
prefers-reduced-motionを使用すること