アクセシビリティ

Next.js チームは、すべての開発者（とそのエンドユーザー）が Next.js を利用できるようにすることを約束しています。Next.js にデフォルトでアクセシビリティ機能を追加することで、より包括的なウェブを目指しています。

ルートアナウンス

サーバーでレンダリングされたページ間を遷移する際（例: <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.1 ガイドライン
• The A11y Project
• 前景と背景要素間の 色のコントラスト比 を確認
• アニメーション作業時には prefers-reduced-motion を使用