Accessibility

Next.js チームは、全ての開発者(及びそのエンドユーザー)が Next.js を利用できるように専念しています。アクセシビリティ機能を Next.js に default で追加することで、私たちはすべての人々にとってより包括的な Web を作成することを目指しています。

Route Announcements

server 上でレンダリングされたページ間を移行する際(たとえば、<a href>タグを使用して)、スクリーンリーダーやその他の支援技術はページの読み込み時にページタイトルを発表し、ユーザーがページが変更されたことを理解するようにします。

従来のページナビゲーションに加えて、Next.js は、パフォーマンスの向上(next/linkを使用)のための Client 側の遷移もサポートしています。Client 側の遷移が支援技術にも通知されるように、Next.js には default で route アナウンサーが含まれています。

Next.js route アナウンサーは、まずdocument.titleを調べ、次に<h1>要素を調べ、最後に URL pathname を調べて、アナウンスするページ名を探します。最もアクセシブルなユーザーエクスペリエンスを提供するために、アプリケーションの各ページに独自で詳細なタイトルがあることを確認してください。

Linting

Next.js は、箱を開けるだけで統合された ESLint 体験を提供します。これには、Next.js のカスタムルールが含まれています。default では、Next.js は eslint-plugin-jsx-a11y を含むことで早期にアクセシビリティ問題をキャッチするのに役立ちます。これには、次の警告が含まれます：

• aria-props
• aria-proptypes
• aria-unsupported-elements
• role-has-required-aria-props
• role-supports-aria-props

たとえば、この plugin は、imgタグに alt テキストを追加したり、正しいaria-*属性を使用したり、正しいrole属性を使用したりするのを確認するのに役立ちます等。

Accessibility Resources

• WebAIM WCAG チェックリスト
• WCAG 2.2 ガイドライン
• The A11y Project
• 前景と背景要素の間のcolor contrast ratios を確認してください
• アニメーションを操作するときは、prefers-reduced-motion を使用してください。