アクセシビリティ
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
タグにaltテキストを追加する、正しいaria-*
属性を使用する、正しいrole
属性を使用するなどを確実に行うのに役立ちます。
アクセシビリティリソース
- WebAIM WCAG チェックリスト
- WCAG 2.2 ガイドライン
- The A11y Project
- 前景と背景の要素間の色コントラスト比を確認する
- アニメーションを扱う際は
prefers-reduced-motion
を使用する