アクセシビリティ

Next.js チームは、すべての開発者（とそのエンドユーザー）が Next.js を利用できるようにすることを約束しています。Next.js にデフォルトでアクセシビリティ機能を追加することで、より包括的なウェブを実現することを目指しています。

ルートアナウンス

サーバーでレンダリングされるページ間を遷移する際（例: <a href> タグを使用）、スクリーンリーダーやその他の支援技術は、ページが変更されたことをユーザーが理解できるように、ページの読み込み時にページタイトルを読み上げます。

従来のページナビゲーションに加えて、Next.js はパフォーマンス向上のためのクライアントサイド遷移（next/link を使用）もサポートしています。クライアントサイド遷移も支援技術に通知されるようにするため、Next.js にはデフォルトでルートアナウンサーが含まれています。

Next.js のルートアナウンサーは、まず document.title、次に <h1> 要素、最後に URL のパス名を調べて、読み上げるページ名を決定します。最もアクセシブルなユーザー体験を提供するために、アプリケーションの各ページに一意で説明的なタイトルを付けるようにしてください。

Next.js は統合された ESLint エクスペリエンスをデフォルトで提供しており、Next.js 用のカスタムルールを含んでいます。Next.js には eslint-plugin-jsx-a11y が含まれており、以下のようなアクセシビリティ問題を早期に検出するのに役立ちます:

例えば、このプラグインは img タグに alt テキストを追加する、正しい aria-* 属性を使用する、正しい role 属性を使用するなどを確実にするのに役立ちます。