アクセシビリティ

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