アクセシビリティ

Remixアプリケーションにおけるアクセシビリティは、一般的なWebのアクセシビリティと非常によく似ています。適切なセマンティックマークアップを使用し、Webコンテンツアクセシビリティガイドライン（WCAG）に従うことで、ほとんどの目標を達成できます。

Remixは可能な限りアクセシビリティのベストプラクティスをデフォルトとして設定し、それが不可能な場合はAPIを提供してサポートします。私たちは、将来的にこれらをさらに容易にするための新しいAPIを積極的に探求し、開発しています。

リンク

<Link>コンポーネントは標準的なアンカータグをレンダリングするため、ブラウザのアクセシビリティ機能を無料で利用できます！

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

ルーティング

アプリケーションで<Scripts>をレンダリングする場合、クライアントサイドのルーティングをアクセシブルにするために考慮すべき重要な点がいくつかあります。

従来の複数ページのウェブサイトでは、ルーティングの変更について多くを考える必要はありませんでした。アプリケーションがアンカータグをレンダリングし、残りはブラウザが処理していました。JavaScriptを無効にしている場合、Remixアプリケーションはデフォルトでこのように動作するはずです！

Remixでクライアントサイドのスクリプトが読み込まれると、React Routerがルーティングを制御し、ブラウザのデフォルトの動作を防ぎます。ルーティングが変更されたとき、RemixはUIについて何も仮定しません。そのため、以下のような重要な機能を考慮する必要があります：

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

2019年、Marcy Suttonがユーザー調査を主導し、その結果を公開しました。これは、開発者がアクセシブルなクライアントサイドのルーティング体験を構築するのを支援するためのものです。この記事を詳しく読むことをお勧めします。私たちは、このプロセスを簡素化するための内部ソリューションと新しいAPIを積極的に研究・テストしています。