Skip to content

Instantly share code, notes, and snippets.

@yamanoku
Created March 28, 2023 11:18
Show Gist options
  • Save yamanoku/7e7d6d45aa5e9cef91c38c2549856f22 to your computer and use it in GitHub Desktop.
Save yamanoku/7e7d6d45aa5e9cef91c38c2549856f22 to your computer and use it in GitHub Desktop.

アクセシビリティ

Radix Primitives は、ARIA Authoring Practices Guide に従い、幅広い種類のモダンブラウザやよく使用されている支援技術によってテストされています。

私たちは、アクセシビリティに関連する多くの実装上の詳細、aria 属性や role 属性、フォーカス管理、キーボードナビゲーションなどを扱っています。これにより、ユーザーは多くのコンテキストで私たちのコンポーネントをそのまま使用し、期待されるアクセシビリティデザインパターンに従う機能性に依存できるようになります。

WAI-ARIA

WAI-ARIAは、W3C によって発表・メンテナンスされており、Radix Primitives で表示される多数の一般的な UI パターンのセマンティクスを規定しています。これは、ブラウザーに提供される要素を使用せずに構築されたコントロールに意味を与えるために設計されています。たとえば、button を作成するために div を使用する場合、div がスクリーンリーダーや音声認識ツールにとってボタンであることを伝えるために追加する必要がある属性があります。

セマンティクスに加えて、さまざまな種類のコンポーネントに期待される動作があります。 button 要素は、div とは異なる方法で特定の相互作用に応答するため、開発者は JavaScript を使用してこれらの相互作用を再実装する必要があります。WAI-ARIA authoring practices は、Radix Primitivesで提供されるさまざまなコントロールの動作を実装するための追加のガイダンスを提供しています。

アクセシブルなラベル

多くの組み込みフォームコントロールでは、ネイティブの HTML label 要素によって対応する input 要素に対してセマンティックな意味とコンテキストを提供するように設計されています。非フォームコントロール要素や Radix Primitives が提供するカスタムコントロールの場合、WAI-ARIA provides a specification はそのようなコントロールに対してアクセシブルな名前や説明を提供する方法の仕様を提供しています。

可能な限り、Radix Primitives には、コントロールのラベルを簡単に作成できるようにする抽象化が含まれています。Label primitive は、私たちの多くのコントロールと一緒に動作するように設計されています。最終的には、ユーザーにアプリケーションをナビゲートする際に適切なコンテキストを持つように、あなたがそのラベルを提供することが重要です。

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

TabsDialog などの多くの複雑なコンポーネントには、キーボードやマウス以外のその他の入力方法を駆使したコンテンツを操作する方法について、ユーザーからの期待が込められています。Radix Primitives は、WAI-ARIA authoring practices に従った基本的なキーボードサポートを提供しています。

フォーカスマネジメント

適切なキーボードナビゲーションと適切なラベリングは、フォーカスの管理と密接に関係していることがよくあります。ユーザーがある要素とインタラクションし、その結果何かが変化した場合、インタラクションとともにフォーカスを移動させ、アプリの新しいコンテキストに応じて次のタブストップが論理的になるようにすることが、しばしば役に立ちます。また、スクリーン・リーダーのユーザーにとっては、フォーカスを移動させると、この新しいコンテキストを伝えるためのアナウンスが表示されることが多く、これは適切なラベリングに依存します。

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment