概要

Next.jsでアクセシビリティ対応を行うことは、ユーザー全員にとって使いやすいウェブサイトを作るために欠かせません。特にスクリーンリーダー対応やナビゲーションの最適化、フォーム要素のラベル設定などの基本的な実装が求められます。この記事では、Next.jsでのアクセシビリティ向上に役立つポイントとツールを紹介します。

ページ遷移のアクセシビリティ対応

Next.jsはクライアントサイドでのページ遷移をサポートしており、デフォルトで「ルートアナウンス機能」を備えています。これにより、画面リーダーを使用しているユーザーにもページの変更がアナウンスされます。特に<a>タグを使ったナビゲーションでは、ページタイトルや<h1>要素が正しく読み上げられるため、各ページには固有のタイトルを設定することが重要です。 クライアントサイドの遷移時にもスクリーンリーダー対応を強化するため、Next.jsにデフォルトで含まれているこのルートアナウンサー機能を活用しましょう。

フォームのアクセシビリティ

フォームの実装時には、適切にラベルを設定することが重要です。例えば、<label>タグを使って入力フィールドとラベルを関連付けることで、スクリーンリーダーに対応できます。aria-requiredやaria-labelledby属性を活用することで、フォームの必須項目やグループラベルを支援技術に適切に伝えられます。特に、placeholder属性をラベル代わりに使うのは避け、視覚的にもスクリーンリーダー的にも分かりやすいラベルを設定しましょう。

<label for="name">お名前</label>
<input type="text" id="name" required aria-required="true">

ESLintでのアクセシビリティチェック

Next.jsには、eslint-plugin-jsx-a11yがデフォルトで組み込まれており、アクセシビリティの問題を早期に検出することができます。例えば、<img>タグにalt属性がない場合や、aria-*属性の不適切な使用を警告してくれるため、開発中にこれらの問題を解消しやすくなります。これを利用して、コードレベルでアクセシビリティを改善しましょう。

npm install eslint-plugin-jsx-a11y --save-dev

フォーカスインジケーターの確保

キーボードでのナビゲーションを支援するためには、フォーカスインジケーターを見えやすく設定することが重要です。outline: none;などでフォーカスインジケーターを消してしまうと、キーボードユーザーはどの要素がフォーカスされているのか分からなくなります。必ずデフォルトのフォーカスインジケーターを保持し、必要に応じてカスタマイズするようにしましょう。

button:focus {
  outline: 2px solid blue;
}

結論

Next.jsでアクセシビリティ対応を強化するには、適切なツールや機能を活用し、フォームやナビゲーションのラベル設定、フォーカスインジケーターなどの基本要素に注意を払うことが重要です。eslint-plugin-jsx-a11yやルートアナウンサーを活用し、より多くのユーザーに使いやすいウェブサイトを提供しましょう。