アクセシビリティのガイドラインとチェック リスト (HTML)

このトピックの C#/VB/C++/XAML バージョンをお探しですか?アクセシビリティのガイドラインとチェック リスト (XAML)」をご覧ください。

ここでは、JavaScript を使った Windows ランタイム アプリをアクセシビリティ対応にするときに使用できるチェック リストを示します。

  1. コンテンツや対話型の UI 要素にアクセシビリティ対応の名前 (必須) と説明 (省略可能) を設定します。

    アクセシビリティ対応の名前とは、スクリーン リーダーが UI 要素を読み上げるために使う短い説明の文字列です。画像 (alt 属性を使用)、入力フィールド (for 属性を含む label タグを使用)、カスタムの div コントロールなどに対し、明示的にアクセシビリティ対応の名前を設定する必要があります。アクセシビリティ対応の説明とヒントにより、ユーザーは UI を理解しやすくなります。

    詳しくは、「アクセシビリティ対応の名前」と「アクセシビリティ対応の説明 (省略可能)」をご覧ください。

  2. アクセシビリティ対応の valuestatus の属性を設定して保持します。

    これらの属性は、ボタン、リスト、チェック ボックス、コンボ ボックス、スライダー、進行状況バーなどのカスタム要素にとって重要です。

    詳しくは、「」と「状態」をご覧ください。

  3. 対話型のカスタム UI 要素と領域に対して role 属性を設定します。

    カスタム UI 要素 (対話型の div タグなど) と領域には、Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA) の有効なロールを割り当てる必要があります。

    詳しくは、「ロール」をご覧ください。

  4. 次の操作を行って、キーボード アクセシビリティを実装します。

    • 対話要素に対して tabindex 属性を設定します。
    • コンポジット要素に方向キーのナビゲーションを実装します。
    • キーボードのアクティブ化を実装します。
    • アクセス キーを設定するか、ショートカット キーを実装します。

    詳しくは、「キーボード アクセシビリティの実装」をご覧ください。

  5. 動的コンテンツを表示する領域に対して aria-live 属性を設定します。

    aria-live を設定すると、UI の変化が生じたときにスクリーン リーダーによって変化を知らせることができます。

    詳しくは、「ライブ領域をアクセシビリティ対応にする」をご覧ください。

  6. アクセシビリティ対応の名前、ヘッダー、概要または説明を設定して、表をアクセシビリティ対応にします。

    これらの手順は、ユーザーがデータを理解するために支援が必要な、大きくて複雑な表にとって重要です。レイアウトの表では、role="presentation" を使って忘れずにマークしてください。

    詳しくは、「表をアクセシビリティ対応にする」をご覧ください。

  7. テキスト コントラストが適切であること、ハイ コントラスト テーマで要素が正しくレンダリングされること、色が正しく使われていることを確認するため、UI を表示して検証します。

    • ディスプレイの 1 インチあたりのドット数 (dpi) の値を調整するシステム ディスプレイ オプションを使い、DPI の値の変更に合わせてアプリの UI が正常に拡大縮小されることを確認します (一部のユーザーはアクセシビリティ対応オプションとして DPI の値を変更します。これは、コンピューターの簡単操作センターで、[コンピューターを見やすくします] から設定できます)。
    • 色分析ツールを使って、視覚的なテキストのコントラスト比が 4.5:1 以上であることを検証します。
    • ハイ コントラスト テーマに切り替え、UI が読みやすく使いやすいことを確認します。
    • UI が情報を伝える唯一の手段として色を使っていないことを確認します。

    詳しくは、「ハイ コントラスト テーマのサポート」と「アクセシビリティに対応したテキストの要件の適合」をご覧ください。

  8. ページを論理的な領域に分割し、領域をランドマーク ロールとアクセシビリティ対応の名前でマークします。 これにより、支援技術でページの概要を表示し、より効率的なナビゲーションを行うことができます。

    詳しくは、アプリの論理構造の公開に関するページをご覧ください。

  9. アクセシビリティ ツールを実行し、報告された問題に対処して、画面の読み上げを確認します。

    Inspect を使ってプログラムによるアクセスを検証し、UI Accessibility Checker (AccChecker) を実行して一般的なエラーを見つけます。画面の読み上げの確認には、ナレーターを使います。

    詳しくは、「アプリのアクセシビリティのテスト」をご覧ください。

  10. Windows ストアでアプリがアクセシビリティ対応であることを宣言します。

    アクセシビリティ サポートの基準を実装したら、Windows ストアでアプリがアクセシビリティ対応であることを宣言することで、より多くのユーザーにアプリを提供し、さらに良い評価を得ることができます。

    詳しくは、「Windows ストアでアプリをアクセシビリティ対応と宣言する」をご覧ください。アプリをアクセシビリティ対応と宣言することと Windows Phone とは関係ないことに注意してください。

関連トピック

JavaScript と HTML を使った Windows ランタイム アプリのアクセシビリティ

 

 

表示:
© 2015 Microsoft