アクセシビリティ
私たちは、`aria`属性や`role`属性、フォーカス管理、キーボードナビゲーションなど、アクセシビリティに関する実装上の多くの難しい詳細を処理します。つまり、ユーザーはほとんどのコンテキストでそのままコンポーネントを使用でき、機能が期待されるアクセシビリティデザインパターンに従うことに頼ることができます。
WAI-ARIA
W3Cによって公開および保守されているWAI-ARIAは、Radix Primitivesに現れる多くの一般的なUIパターンのセマンティクスを規定しています。これは、ブラウザが提供する要素を使用して構築されていないコントロールの意味を提供するように設計されています。たとえば、ボタンを作成するために`button`要素の代わりに`div`を使用する場合、スクリーンリーダーや音声認識ツールのためにボタンであることを伝えるために`div`に追加する必要がある属性があります。
セマンティクスに加えて、さまざまなタイプのコンポーネントから期待される動作があります。 `button`要素は、`div`とは異なる方法で特定のインタラクションに応答するため、開発者はJavaScriptでそれらのインタラクションを再実装する必要があります。WAI-ARIAオーサリングプラクティスは、Radix Primitivesに付属するさまざまなコントロールの動作を実装するための追加のガイダンスを提供します。
アクセス可能なラベル
多くの組み込みフォームコントロールでは、ネイティブHTMLの`label`要素は、対応する`input`要素のセマンティックな意味とコンテキストを提供するように設計されています。フォームコントロール以外の要素、またはRadix Primitivesによって提供されるようなカスタムコントロールの場合、WAI-ARIAは、それらのコントロールにアクセス可能な名前と説明を提供する方法の仕様を提供します。
可能な場合、Radix Primitivesには、コントロールのラベル付けを簡単にするための抽象化が含まれています。`Label`プリミティブは、多くのコントロールで動作するように設計されています。最終的には、ユーザーがアプリケーションをナビゲートするときに適切なコンテキストを持つように、それらのラベルを提供するのはあなた次第です。
キーボードナビゲーション
`Tabs`や`Dialog`など、多くの複雑なコンポーネントには、キーボードやその他のマウス以外の入力モダリティを使用してコンテンツを操作する方法について、ユーザーからの期待が寄せられています。Radix Primitivesは、WAI-ARIAオーサリングプラクティスに従って、基本的なキーボードサポートを提供します。
フォーカス管理
適切なキーボードナビゲーションと適切なラベル付けは、多くの場合、フォーカスの管理と密接に関連しています。ユーザーが要素と対話して結果として何かが変更された場合、インタラクションに合わせてフォーカスを移動すると、アプリの新しいコンテキストに応じて次のタブストップが論理的になることがよくあります。また、スクリーンリーダーユーザーの場合、フォーカスの移動は、この新しいコンテキストを伝えるためのアナウンスにつながることが多く、これは適切なラベル付けに依存します。
多くのRadix Primitivesでは、ユーザーが特定のコンポーネントで通常行うインタラクションに基づいてフォーカスを移動します。たとえば、`AlertDialog`では、モーダルが開かれると、プロンプトへの応答を予期するために、フォーカスはプログラムで`Cancel`ボタン要素に移動します。
情報
出典: Radix UI