フォーム、製品、およびコントロールのユーザー補助機能

この記事は、フォーム、製品、またはコントロールのユーザー補助機能を有効にするためのベスト プラクティスについて説明します。 アクセシビリティ チェックリストも含まれます。

ユーザー補助は包括的です。つまり、障害のある人は、障害のない人と同じタスクを実行できます。 アクセス可能なコントロールまたはフォームの作成は、セキュリティで保護され、高性能、または理解しやすい基本的なものにする必要があります。

キーボード

アクセシビリティの基盤はキーボード専用アクセスです。 キーボードを使用してフォームのすべてのアクションを実行できるとき、全盲の人または手の使用に制限がある人がこのフォームを利用できます。 キーボードを使うと、タブ シーケンス、直接アクション (保存の Ctrl + S など)、またはユーザーがナビゲーション ペイン、アプリ バー、メッセージ センター、メッセージ バーなどのコントロールに移動できるようにする他のショートカット キーを使用してすべてのコントロールに到達することができます。 簡単なテストでは、マウスを取り外し、キーボードのみを使用してすべてのコア シナリオとセカンダリ シナリオを完了します。

色

色の使用が推奨されており、記録やその他の情報の状態や状態を表す一般的な方法です。 ただし、色は、状態またはステータスが伝達される唯一の方法ではありません。 付属記号、ヘルプ テキスト、または追加の列に、状態またはステータスのテキスト説明を含める必要があります。 簡単なテストは、システムのすべての色の使用を識別し、色が状態またはステータスを表すために使用されていないことを確認してください。 一般的な例では、赤色は「注意が必要」を表し、緑色は「OK」の状態を意味します。

イメージ

画像を表示するとき、画像を説明するラベルが必要です。 イメージがレコードの状態またはステータスを表す場合は、付随するヘルプ テキストまたは追加の列に、状態またはステータスの説明文を含める必要があります。 イメージがロゴのような記号である場合は、説明は必要ありません。 「進行中」などのステータスを伝えるフォームまたはグリッド上にイメージがある場合、スクリーン リーダーを使用している人に読み取られるツールチップがイメージにあることを確認します。

public display container statusImageDataMethod()
{
    ImageReference statusImage;
    if (this.Status == NoYes::Yes)
    {
        statusImage = ImageReference::constructForSymbol(ImageReferenceSymbol::Accept, "Accept");
        // a product ready example would use a label in place of an embedded string
    }
    else
    {
        statusImage = ImageReference::constructForSymbol(ImageReferenceSymbol::Cancel, "Cancel");  
        // a product ready example would use a label in place of an embedded string
    }
    return statusImage.pack();
}

拡張可能なコントロール

拡張可能なコントロールは、単にフレームワークによって提供されるコントロールの拡張子ですが、同じ使いやすさとアクセシビリティが必要です。 さらに、セグメント化されたエントリ コントロールやグラフなどのウィジェットまたは他の視覚的にリッチなコントロールは、目が見えるユーザーから非表示になるアクセス可能リッチ インターネット アプリケーション (ARIA) タグを提供する必要がありますが、目の見えないユーザーにはスクリーン リーダーを通じてコントロールの使用について説明を提示します。 拡張可能コントロールのすべてのアクションは、キーボードで可能でなければなりません。

フォームのレイアウトと動的管理

視覚に障がいがあるユーザー、または目の見えないユーザーにとっては、値の選択や入力などのアクションによって、大幅にまたは予期しないフォームの再レイアウトが必要になった場合でも安心です。

アクセシビリティ チェックリスト

拡張可能なコントロール - アクセシビリティのインサイト

拡張可能コントロールは、単にフレームワークの拡張です。 拡張可能なコントロールの相互作用は、他のどのフレームワーク コントロールとも変わらないと考えられるべきです。 コントロールがマウス アクションを提供する視覚的にリッチなウィジェットであるとき、作成者は、同等のキーボード アクセス機能を使用できるようにする必要があります。 ウィジェットは、標準的なプレゼンテーションとは異なる「アクセス可能モード」で実行されないことがあります。 代わりに、ウィジェットはコントロールの状態を有効化したり切り替えたりする必要なく同様の機能を提供する必要があります。 すべてのカラーの使用はテーマ カラーに基づいている必要があります。モードが「ハイ コントラスト」の場合、配色がテーマの変更と一致します。 World Wide Web コンソーシアム (W3C) Web サイトは、サポートされている状態およびプロパティ のガイダンスを提供します。 このサイトは、ARIA タグの役に立つリソースとなり、この記事にリスト表示されている定義を提供します。

コントロールが行う必要がある操作

それ自体を導入します

重要なのは、コントロールを名前で識別するだけではなく、(ラベルまたは ARIA タグを使用して) 動作の簡単な概要を示すことです。 説明テキストがローカライズ用のフレームワーク ラベル経由で指定されていることを確認します。

• aria describedby - オブジェクトを説明する要素 (または複数の要素) を識別します。

それ自体の導入 - 例

<http://www.w3.org/TR/WCAG20-TECHS/ARIA1.html>
<button aria-label="Close" aria-describedby="descriptionClose" onclick="myDialog.close()"></button>
<div id="descriptionClose">Closing this window will discard any information entered and return you to the main page</div>

ビジー状態であることを示します

視覚障害のあるユーザーにとって、なぜコントロールが反応しないのかは、必ずしも明確ではないかもしれません。 「ビジー」のメッセージを指定すると、そのような場合に役立ちます。

• aria-busy (状態) - 要素とそのサブツリーが現在更新されているかどうかを示します。

ビジー状態であることを示す - 例

<p aria-live=”polite” aria-busy=”true”></p>

内容が検証されて、有効でないことを示す

非同期の性質により、フィールド状態の動的な変化が発生します。 メッセージ バーは、それ自体を視覚障害のあるユーザーに紹介し、コントロール自体は無効な状態を表す必要があります。

• aria-invalid (状態) - 入力された値が、アプリケーションが予期している形式に準拠していないことを示します。

フィールドが読み取りであることを示します

• aria-readonly - 要素が編集可能ではなく、操作可能であることを示します。 関連する aria-disabled を参照してください。

フィールドに入力が必要であることを示します (必須)

視覚的なシンボルによって、目の見えるユーザーはフィールドが必須であることを理解できます。 盲目のユーザーには識別タグが必要です。

• aria-required - フォームが送信される前に、要素にユーザー 入力が必要であることを示します。

切り替えられた値の状態を説明

切り替えコントロールには切り替え状態があります。 このタグがその状態を表しています。

• aria-pressed (状態) - 切り替えボタンの現在の「押された」状態を示します。 関連する aria-checked および aria-selected を参照してください。

• aria-valuenow - 範囲ウィジェットの現在の値を定義します。 関連する aria-valuetext を参照してください。

• aria-valuetext - 範囲ウィジェットに aria-valuenow の人が判読可能な代替テキストを定義します。

コントロールが行うことができる操作

展開された状態の表示

複雑な相互作用を学習できますが、現在の状態は実験なしでは決して簡単に判断できません。 aria-expanded タグを使用するときに、コントロールがその現在の状態を説明します。 例として、コントロールのタブまたはクイック タブ セクションへのタブ移動があります。

• aria-expanded (状態) - 要素または別のグループ化されている要素が、現在展開されているか折りたたまれているかを示します。

適用できるコンテキスト メニューの説明

財務と運用アプリではコンテキスト メニューを提供します。 アプリケーション作成者が現在のコントロールまたはコンテキストに機能を提供したときに、ユーザーはその機能を公表することができます。

• aria-haspopup - 要素にポップアップ コンテキスト メニューまたはサブレベルのメニューがあることを示します。

その他のコントロール

• aria-live - 要素が更新されることを示し、ユーザー エージェント、支援テクノロジー、およびユーザーがライブ リージョンから期待できる更新の種類を示します。

• aria-multiline - テキスト ボックスが複数行の入力を受け入れるか、一行だけを受け入れるかを示します。

• aria-multiselectable - ユーザーが現在選択可能な子孫からひとつ以上の項目を選択できることを示します。

• aria-orientation - 要素と方向が水平か垂直かを示します。

• aria-setsize - 現在の listitems および treeitem のセット内の項目の数を定義します。 セット内のすべての要素が DOM にある場合は必要ありません。 関連する aria-posinset を参照してください。

• aria-sort - テーブルまたはグリッド内の項目を昇順または降順でソートするかどうかを示します。

• aria-valuemax - 範囲ウィジェットの最大許容値を定義します。

• aria-valuemin - 範囲ウィジェットの最小許容値を定義します。