アクセシビリティ

Remix アプリのアクセシビリティは、一般的にウェブのアクセシビリティとよく似ています。適切なセマンティックマークアップを使用し、Web Content Accessibility Guidelines (WCAG)に従うことで、ほとんどの機能を実現できます。

Remix は、可能な限りアクセシビリティに関する特定のプラクティスをデフォルトで採用し、そうでない場合は、それを支援する API を提供します。将来、さらに使いやすくするために、新しい API を積極的に調査および開発しています。

リンク

<Link>コンポーネントは、標準のアンカータグをレンダリングするため、ブラウザから無料でアクセシビリティの動作が得られます！

Remix はまた、<NavLink/>を提供しており、これは<Link>と同じように動作しますが、リンクが現在のページを指している場合に、支援技術にコンテキストを提供します。これは、ナビゲーションメニューやパンくずリストを作成する際に役立ちます。

ルーティング

アプリで<Scripts>をレンダリングしている場合は、クライアントサイドルーティングをユーザーにとってよりアクセシブルにするために考慮すべき重要な点があります。

従来のマルチページウェブサイトの場合、ルートの変更についてあまり考える必要はありません。アプリはアンカータグをレンダリングし、ブラウザが残りの処理を行います。ユーザーがJavaScriptを無効にした場合、Remixアプリはデフォルトで既にこの方法で動作します！

Remix のクライアントスクリプトがロードされると、React Router がルーティングの制御を引き継ぎ、ブラウザのデフォルトの動作を阻止します。Remix は、ルートが変更されたときのUIについて何も仮定しません。その結果、次の機能を考慮する必要があります。

• フォーカス管理: ルートが変更されたときにどの要素にフォーカスが移りますか？これは、キーボードユーザーにとって重要であり、スクリーンリーダーユーザーにとって役立つ場合があります。
• ライブリージョンアナウンスメント: ルートが変更された場合、スクリーンリーダーユーザーもアナウンスメントによって恩恵を受けます。変更の内容と読み込みにかかる時間に応じて、特定の遷移状態でもユーザーに通知したい場合があります。

2019 年、Marcy Sutton はユーザー調査の結果を主導し、公開しました。開発者は、この調査結果に基づいて、アクセシブルなクライアントサイドルーティングエクスペリエンスを構築できます。この記事を詳しくお読みになることをお勧めします。このプロセスを簡素化するために、社内ソリューションと新しい API を積極的に調査およびテストしています。