アクセシビリティ

アクセシビリティに関連する多くの難しい実装の詳細、例えばariaやrole属性、フォーカス管理、キーボードナビゲーションなどを私たちが処理します。これにより、開発者はほとんどの状況でそのまま使用でき、期待されるアクセシビリティデザインパターンに従った機能を信頼することができます。

WAI-ARIA

WAI-ARIAはW3Cによって策定されており、Yamada UIに見られる多くの一般的なUIパターンのセマンティクスを定義しています。これは、ブラウザが提供する要素を使用せずに構築されたコントロールに意味を持たせるために設計されています。例えば、buttonの代わりにdivを使用してボタンを作成する場合、スクリーンリーダーや音声認識ツールに対してそれがボタンであることを伝えるために、divに追加する必要がある属性があります。

セマンティクスに加えて、さまざまな種類のコンポーネントには期待される動作もあります。buttonは、divに存在しない特定のインタラクションに応答するため、開発者はJavaScriptでそれらのインタラクションを再実装する必要があります。WAI-ARIA authoring practicesは、Yamada UIに付随するさまざまなコントロールの動作を実装するための追加のガイダンスを提供します。

アクセシブルラベル

多くのコンポーネントでは、labelが対応する入力・選択要素にセマンティックな意味とコンテキストを提供するように設計されています。Yamada UIが提供していないコンポーネントの場合、WAI-ARIA provides a specificationでは、それらのコンポーネントにアクセシブルな名前と説明を提供するための仕様を提供します。

Yamada UIは、可能な限り抽象化されており、コンポーネントとのラベル付けを簡素化します。Field.Labelは、私たちの多くのコンポーネントと連携するように設計されています。最終的には、ユーザーがアプリケーションをナビゲートする際に適切なコンテキストを持てるように、ラベルを提供するのはあなたの役割です。

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

TabsやModalのような多くの複雑なコンポーネントでは、ユーザーのキーボードやマウス以外の入力手段を使ってコンテンツを操作することが求められます。Yamada UIは、WAI-ARIA authoring practicesに従って基本的なキーボードサポートを提供します。

フォーカス管理

適切なキーボードナビゲーションと適切なラベル付けは、フォーカス管理と密接に関連しています。ユーザーが要素を操作し、その結果何かが変化した場合、アプリケーションの新しいコンテキストに応じて次のフォーカスが論理的に機能するように、操作に合わせてフォーカスを移動することが役立つことがよくあります。また、スクリーンリーダーを利用するユーザーにとって、フォーカスを移動することは、新しいコンテキストを伝えるアナウンスが表示されることが多く、適切なラベル付けが不可欠です。

Yamada UIの多くのコンポーネントでは、ユーザーがコンポーネントで通常行う操作に基づいてフォーカスを移動します。