アクセシビリティ

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

Remix は、可能な限り特定のアクセシビリティの実践をデフォルトとし、そうでない場合には役立つ API を提供します。私たちは、今後これをさらに簡単にするための新しい API を積極的に調査し、開発しています。

リンク

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

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

ルーティング

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

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

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

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

2019 年に、Marcy Sutton が主導し、ユーザー調査からの発見を公開しました。これは、開発者がアクセス可能なクライアントサイドルーティングエクスペリエンスを構築するのに役立ちます。記事を詳しく読むことをお勧めします。私たちは、このプロセスを簡素化するための内部ソリューションと新しい API を積極的に調査およびテストしています。