アクセシビリティ

Next.js チームは、すべての開発者（およびそのエンドユーザー）が Next.js を利用できるようにすることに尽力しています。Next.js にアクセシビリティ機能をデフォルトで追加することで、Web をすべての人にとってよりインクルーシブなものにすることを目指しています。

ルートアナウンスメント

サーバーでレンダリングされたページ（例：<a href> タグを使用）間を遷移する際、スクリーンリーダーやその他の支援技術は、ページが変更されたことをユーザーが理解できるように、ページが読み込まれるときにページタイトルをアナウンスします。

従来のページナビゲーションに加えて、Next.js はパフォーマンス向上のためのクライアントサイド遷移（next/link を使用）もサポートしています。クライアントサイド遷移も支援技術にアナウンスされるように、Next.js はデフォルトでルートアナウンサーを含んでいます。

Next.js のルートアナウンサーは、まず document.title、次に <h1> 要素、そして最後に URL のパス名を検査して、アナウンスするページ名を検索します。最もアクセシブルなユーザーエクスペリエンスのために、アプリケーションの各ページにユニークで説明的なタイトルが付いていることを確認してください。

Linting

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 を使用してください。