メインコンテンツまでスキップ

アクセシビリティ

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 が含まれており、以下の警告を含むアクセシビリティの問題の早期発見を支援します:

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

アクセシビリティリソース​