アクセシビリティ

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 を使用する