Menu

アクセシビリティ

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属性を使用するなどを確実に行うのに役立ちます。

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