アクセシビリティ
Next.jsチームは、すべての開発者（とそのエンドユーザー）がアクセス可能なNext.jsを提供することを約束します。Next.jsにデフォルトでアクセシビリティ機能を追加することで、より包括的なWebを実現することを目指しています。
ルートアナウンス
サーバーサイドでレンダリングされるページ間を遷移する際（例: <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が含まれており、以下のようなアクセシビリティ問題を早期に検出するのに役立ちます:
- 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を使用