コンポーネント

(コンポーネントの日本語訳は省略。英語のままでも問題ないことが多いです)

ユーティリティ

(ユーティリティの日本語訳は省略。英語のままでも問題ないことが多いです)
概要

アクセシビリティ

Radix Primitives は、WAI-ARIA オーサリングプラクティスのガイドラインに従っており、最新のブラウザと一般的に使用される支援技術で幅広くテストされています。

私たちは、アクセシビリティに関する実装上の難しい詳細の多くを処理します。これには、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 プリミティブは、多くのコントロールで動作するように設計されています。最終的には、ユーザーがアプリケーションをナビゲートする際に適切なコンテキストを持つように、それらのラベルを提供するのはあなた次第です。

キーボードナビゲーション

TabsDialog など、多くの複雑なコンポーネントには、キーボードやその他のマウス以外の入力モダリティを使用してコンテンツを操作する方法について、ユーザーからの期待が寄せられています。Radix Primitives は、WAI-ARIA オーサリングプラクティス に従って、基本的なキーボードサポートを提供します。

フォーカス管理

適切なキーボードナビゲーションと適切なラベル付けは、多くの場合、フォーカスの管理と密接に関連しています。ユーザーが要素と対話し、その結果何かが変更された場合、アプリの新しいコンテキストに応じて次のタブストップが論理的になるように、インタラクションに合わせてフォーカスを移動すると便利なことがよくあります。また、スクリーンリーダーのユーザーの場合、フォーカスの移動は、この新しいコンテキストを伝えるためのアナウンスにつながることが多く、これは適切なラベル付けに依存しています。

多くの Radix Primitives では、ユーザーが特定のコンポーネントで通常行うインタラクションに基づいてフォーカスを移動します。たとえば、AlertDialog では、モーダルが開かれると、プロンプトへの応答を予期するために、フォーカスはプログラムで Cancel ボタン要素に移動されます。