HTML/JavaScript アプリをアクセシビリティ対応にする

Article
09/27/2012

Windows 8 アプリの特徴の 1 つは、アクセシビリティがプラットフォームに組み込まれているということです。アクセシビリティ機能を使うと、ほんの少しの労力でより多くの方にアプリを使ってもらえるようになります。私たちは、開発者とユーザーの両方からこのアプローチに対する肯定的なフィードバックをいただき、プラットフォームを改良しました。ここでは、設計フェーズにおける HTML アプリと JavaScript アプリのアクセシビリティに関する考え方について段階的に説明し、一般的な UI パターンのいくつかにアクセシビリティを実装してテストする方法を示します。さらに、私たちがカスタム UI コントロールを作成するときに使ったベストプラクティスを示し、アクセシビリティに対応することであらゆる Windows ユーザーに使ってもらえるようにする機会についてお話しします。

このブログの情報とサンプルは HTML/JavaScript に限定されていますが、アクセシビリティは XAML アプリにも組み込まれています。開発ツールに用意されているテンプレートとコントロールを使い、デベロッパーセンターにあるガイダンスと避けるべき事項を参照すると、アクセシビリティ対応の XAML アプリを作成することができます。

アクセシビリティの重要性

Windows 8 の開発にあたり、私たちはすべてのユーザーがリッチなアプリエコシステムから恩恵を受け、優れたアクセシビリティ対応アプリによって毎日の生活が充実したものとなるようにしたいと思いました。Visual Studio テンプレート、IntelliSense、共通コントロールにアクセシビリティを組み込み、テストツールを提供し、アプリをアクセシビリティ対応と宣言する方法を用意したのはこのためです。アプリをアクセシビリティ対応にすることは重要です。世界人口の約 15% に影響を与えるからです。このようなユーザー層に訴えかけることができるように、私たちは、社内で独自のアプリ向けに使っているベストプラクティスの一部を皆さんにも採用してほしいと思っています。これらのプラクティスは、アプリをアクセシビリティ対応にするための最適な足がかりとなります。この記事では、次の方法について説明します。

アクセシビリティのシナリオと、それらのシナリオをアプリで簡単にサポートする方法を特定する。
プラットフォームのコントロールを使う。無料で利用できる組み込みのアクセシビリティ機能が多数用意されています。
アプリがアクセシビリティの要件を満たしているかどうかを確認する。
アクセシビリティのテストを計画し、SDK ツール (Inspect および UI Accessibility Checker) を利用する。スクリーンリーダーを使う必要のあるユーザー、キーボードだけを使うユーザー、コントラストやスケーリングの変更が必要なユーザーのシナリオへの対応に焦点を当てます。
ストアでのアクセシビリティ対応宣言の方法と、それが幅広いユーザーにアピールするうえでどのように役立つかを理解する。

ベストプラクティスに従うことで、障碍をお持ちのユーザーがアプリを利用する方法だけなく、より幅広いユーザーのニーズを満たすアプリを開発する方法についても理解することができます。

アクセシビリティ対応アプリの基本要素

アプリは、タイル、アプリバー、ListView、ナビゲーションなどの基本要素で構成されています。これらの要素について、どのくらい簡単にアクセシビリティに対応できるかを見ていきましょう。

タイル

タイル (英語) は、アプリをスタート画面に表示する手段であり、ユーザーがアプリに最初に接する部分です。タイルは既定でアクセシビリティに対応しており、スクリーンリーダーが組み込まれています。さらに、ハイコントラストへの対応を有効にするには、ハイコントラストバージョンのタイルを Visual Studio プロジェクトに追加するだけです。

/ProjectFolder

/images/

logo.png

/contrast-black

logo.png

/contrast-white

logo.png

/ProjectFolder

/images

logo.png

/contrast-black

logo.png

/contrast-white

logo.png

/ProjectFolder

/images

logo.png

/contrast-black

logo.png

/contrast-white

logo.png

図 1: ミュージック、ビデオ、Xbox LIVE Games のタイルでは、"ハイコントラスト黒" と "ハイコントラスト白" のテーマがサポートされる。太字フォントは、その上のタイルのバージョンを示している。

また、テキストの前景色と背景色のコントラスト比が 4.5:1 になるように設定すると、視覚障碍のあるユーザーへの対応を強化できます。コントラスト比は、W3C 推奨ツール (英語) のいずれかを使って前景と背景の色コードを比較することで確認できます (dark= #2A2A2A、light=#FFFFFF)。

図 2: タイルロゴテキストの Visual Studio マニフェスト設定。
テキストのコントラストが十分に確保されているのは、左側の結果のタイルテキストだけである。

ハイコントラストでの優れたエクスペリエンスを実現し、タイルのロゴテキストのコントラストを十分に確保すると、視覚障碍のあるユーザーにとってのアプリの魅力が高まります。

アプリバー

アプリバーは、アプリに関連するコマンドにすばやく簡単にアクセスできるため、アクセシビリティへの対応が必要です。

タイルと同様、標準 HTML コントロールを使うことで、アプリバーのコマンドは既定でアクセスビリティに対応します。たとえば、次に示すマークアップのように、プラットフォームのボタンコントロールを使用すれば、特に何もしなくてもコマンドは既定でアクセシビリティ対応になります。

例 1: 標準の下部アプリバーのマークアップ。特別なアクセシビリティ属性はなく、すべてが組み込まれている。

 <div id="appbar" data-win-control="WinJS.UI.AppBar">
        <button 
data-win-control="WinJS.UI.AppBarCommand" 
data-win-options="{id:'cmdAdd',label:'Add',icon:'add', section:'global'}">
       </button>
       <button           
                data-win-control="WinJS.UI.AppBarCommand" 
data-win-options="{id:'cmdRemove',label:'Remove',icon:'remove', section:'global'}">
        </button>
        <hr data-win-control="WinJS.UI.AppBarCommand" 
data-win-options="{type:'separator',section:'global'}" />
        <button          
data-win-control="WinJS.UI.AppBarCommand" 
data-win-options="{id:'cmdDelete',label:'Delete',icon:'delete',section:'global'}" >
       </button>
</div>

図 3: アプリバーは既定でアクセシビリティに対応し、スクリーンリーダー、キーボードのみの使用、ハイコントラスト、テキストコントラストがサポートされる。

よく使うコマンドをアプリバーに表示すると、視覚障碍のあるユーザーがコマンドにアクセスしやすくなります。たとえば、私たちが開発したミュージックアプリでは、アプリバーの再生コントロールがアクセシビリティに対応しており、ナレーターなどのスクリーンリーダーによって読み上げられます。

図 4: アプリバーに表示されたミュージックアプリの再生コントロール。すばやく簡単なアクセスが可能になる。

タイルと同様に、アプリバーの各要素でハイコントラストがサポートされ、選択した色がテキストコントラストの要件を満たしていることを確認します。

ListView コントロール

ListView (図 5) は、最もよく使われる WinJS コントロールの 1 つです。データコレクションの表示と操作を行うためのリッチなエクスペリエンスを実現します。これまでに説明した他のプラットフォームコントロールと同じように、ListView は既定で完全にアクセシビリティに対応します。

図 5: ListView はアプリでよく使われる。

次に紹介する Visual Studio 2012 グリッドアプリテンプレートのマークアップは、ListView コントロールのアクセシビリティ属性の設定例を示しています。次の方法を確認できます。

aria-label を使って ListView コントロールにアクセス可能な名前を設定する。
リスト項目テンプレートのデータバインドを定義する。IMG Alt 属性をデータソースのタイトル列にマッピングします。

各リスト項目のアクセス可能な名前は、リスト項目のテキストコンテキストに基づいて既定で設定されます。

例 2: アクセシビリティ対応の Visual Studio 2012 グリッドアプリテンプレート。取り上げた属性がアクセシビリティのために設定されている。

 <!-- These templates display each item in the ListView declared here. -->
<div class="itemtemplate" data-win-control="WinJS.Binding.Template">
    <img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
    <div class="item-info">
        <h4 class="item-title" data-win-bind="textContent: title"></h4>
        <h6 class="item-subtitle " data-win-bind="textContent: subtitle"></h6>
        <h4 class="item-description" data-win-bind="textContent: description"></h4>
    </div>
</div>
<!-- The content that will be loaded and displayed. -->
<div class="fragment groupeditemspage">
    …
    <section aria-label="Main content" role="main">
        <div class="groupeditemslist" 
aria-label="List of groups" data-win-control="WinJS.UI.ListView" 
            data-win-options="{ selectionMode: 'none' }">
        </div>
    </section>
</div>

図 6: アクセシビリティ対応の Visual Studio 2012 グリッドアプリプロジェクトテンプレート。

SDK ツールの Inspect にアクセシビリティのプロパティが表示されている。

アクセシビリティ属性を設定したら、リスト項目のコンテンツでハイコントラストがサポートされ、選択した色がテキストコントラストの要件を満たしていることを確認します。

効率的なキーボードナビゲーション

キーボードナビゲーションが不可欠な理由はいくつかあります。熟練したユーザーは、Windows を高度に使いこなすために今でもキーボードを多用しています。また、キーボードだけでシステムのナビゲーションや操作を行っている Windows ユーザー層もいます。視覚障碍または運動障碍のあるユーザーや、細かい操作が困難なユーザーがコンピューターを使うには、キーボードのサポートが必要です。アプリを設計するときは、このようなユーザーのために、効率的で優れたキーボードナビゲーションのサポートを考慮に入れてください。

さいわい、キーボードナビゲーションも簡単にサポートすることができます。すべてのプラットフォームコントロールには、キーボードナビゲーションが既に組み込まれています。対話型要素はすべて既定でタブオーダーに含められるほか、ListView などのコンテナー要素には内部方向キーナビゲーションが実装されているため、ユーザーは方向キーを使ってリスト内を移動することができます。プラットフォームコントロールを使うと、効率的なキーボードナビゲーションを含むたくさんのアクセシビリティ機能を無料で利用できます。

図 7: メールアプリでは、いくつかのタブストップと、ListView に組み込まれた方向キーによる

ナビゲーションのおかげで、効率的なキーボードナビゲーションが実現されている。

私たちは、アプリの設計中に 1 つの興味深い疑問にぶつかりました。すなわち、テキスト要素がスクリーンリーダーで読み上げられるようにするには、テキスト要素もタブオーダーに追加する必要があるのでしょうか。

答えは "いいえ" です。静的テキストは、既にプラットフォームによって UI オートメーション (UIA) ツリー (英語) に公開されており、このしくみを通じてスクリーンリーダーからアクセスされるため、タブオーダーに含める必要はありません。ナレーターや他のスクリーンリーダーには、読み上げコマンド (たとえば、ナレーターのカーソル位置からテキストを読み上げる CapsLock + M キー) と、すべての UIA ツリー要素を順番に読み上げる UIA ツリーナビゲーションコマンド (CapsLock + 左/右方向キー) が用意されています。このため、スクリーンリーダーのために余分なタブ要素を追加する必要はありません。

カスタム UI のアクセシビリティ対応

前のセクションでは、標準コントロールを使った場合の組み込みアクセシビリティのメリットについて考えました。しかし、複雑なアプリではカスタム UI の構築が必要になることがあります。ここでは、私たちの経験に基づいて、UI をアクセシビリティ対応にするためのいくつかのヒントについてお話しします。

アクセシビリティ対応のカスタム UI の記述

HTML/JavaScript でアクセシビリティ対応のカスタム UI を構築するときは、W3C による Accessbile Rich Internet Application (ARIA) 標準も参照し、利用可能な ARIA のロールとプロパティ (英語) について理解してください。これに加えて、デベロッパーセンターにあるアプリのアクセシビリティ対応のためのガイドを読むと、UI をモデリングしてアクセシビリティのプロパティを設定する際に適切な選択を行うことができます。それでは、カスタム UI のよくあるパターンと、私たちがアプリをアクセシビリティ対応にするために行った作業について見ていきましょう。ここでお話しするヒントとガイドの情報に従うと、カスタム UI の実装に簡単にアクセシビリティを取り入れることができます。

タブリストによるコンテンツの制御

Release Preview で利用できる Travel アプリでは、フライト検索フォームにカスタム UI が使われています。この UI はかなり複雑ですが、アクセシビリティ対応にするのは簡単でした。これは、role、aria-controls、aria-selected の各属性を設定することで行いました。

適切なパターンの選択

私たちは、ボタンを Search、Schedule、Status の各要素として使う代わりに、ナビゲーションのために Travel アプリのフライト検索フォーム全体を ARIA タブリスト (英語) として記述することにしました。これにより、多くの情報を提供できるようになりました。このタブリストには、Search、Schedule、Status の各要素を ARIA タブ (英語) として含めました。また、現在選択されているタブを反映する ARIA-selected 属性と、関連するコンテンツを指す ARIA-controls 属性も設定しました。このアプローチにより、UI に関する詳細と、さらにリッチなアクセシビリティエクスペリエンスをユーザーに提供できるようになりました。

例 3: Bing Travel アプリのフライト検索。タブリストとタブ要素が使われている。

 <div class="…" role="tablist">
    <div … id="flightSearchTripTab" role="tab" aria-controls="flightSearchTripView">
        …
    </div>                                
    <div … id="flightSearchFlightSchedulesTab" role="tab" aria-controls="flightSearchFlightSchedulesView">
        …
    </div>
    <div … id="flightSearchFlightStatusTab" role="tab" aria-controls=" flightSearchFlightStatusView">
        …
    </div>
</div>
…
<!-- Trip view-->
<div … role="tabpanel" role="tabpanel" id="flightSearchTripView"> … </div>
<!-- Flight status view-->
<div … role="tabpanel" id="flightSearchFlightSchedulesView"> … </div>
<!-- Flight status view-->
<div … role="tabpanel" role="tabpanel" id="flightSearchFlightStatusView"> … </div>

_showTabView: function (tab) {
    …
    if (tabElement) {
        WinJS.Utilities.removeClass(tabElement, "flightSearchUnselectedTab");
        WinJS.Utilities.addClass(tabElement, "flightSearchSelectedTab");
        tabElement.setAttribute("aria-selected", "true");
    …
    }
    …
}

図 8: SDK ツールの Inspect で、Bing Travel アプリのタブリストとタブ要素のアクセシビリティデータが表示されている。

アプリで ARIA-controls を使い、タブ要素とそれらのタブ要素が制御するコンテンツの関係についての情報を公開すると、ユーザーはナレーターの [Jump] (ジャンプ) コマンドを使って、関連付けられたコンテンツを持つタブにフォーカスを移動できるようになります (CapsLock + Ins キー)。

プログラムによるタブの選択

タッチ操作専用デバイスで Travel アプリの検索フォームがナレーターとシームレスに連動するようにするためには、プログラムによってタブ要素を選択できるようにする必要がありました (ナレーターでは CapsLock + Space キーまたはダブルタップ)。

これは Search、Schedule、Status を ARIA タブ (英語) として記述することで実現し、結果として、プラットフォームでこれらの要素が UIA SelectionItem コントロールパターン (英語) として公開されるようになりました。したがって、ナレーターでダブルタップジェスチャを実行すると、これらのタブ要素の ARIA-selected プロパティが変更されます。このため、選択されたタブに適したコンテンツが読み込まれるように、タブの ARIA-selected 属性に対する propertychange イベントハンドラーを追加する必要もありました。次に例を示します。

例 4: ARIA-selected プロパティの onpropertychange を処理して、プログラムによるタブ選択の変更を検出する。

 tabElement.attachEvent("onpropertychange", selectionChanged);

function selectionChanged(event) {
        if (event.propertyName === "aria-selected")
if (event.srcElement.getAttribute("aria-selected") === "true") {
    // execute code to load the content that corresponds with the selected tab element 
} else {
// execute code for deselected tab, if needed
        }

}

プログラムによる UI の制御について話すとき、ナレーターのタッチエクスペリエンスが確実にサポートされるようにするために考慮するべきトピックがもう 1 つあります。アクセシビリティ対応のタッチイベントです。

アクセシビリティ対応のタッチイベント

Windows 8 エクスペリエンスがタッチ主導環境として設計されていることを考慮して、スムーズな UI フローとタッチパフォーマンスのためにタッチイベントを使うことをお勧めします。

タッチイベントの MSPointerUp と MSPointerDown しか使わない場合は、スクリーンリーダーによるアクセシビリティエクスペリエンスをサポートするために Click イベントを処理する必要があります。これにより、たとえばナレーターで、CapsLock + Space キーやダブルタップを使ってプログラムを通じて UI と対話できるようになります。これを実現する 1 つの方法は、MSPointerUp イベントハンドラーのコードを別の関数にカプセル化し、その同じ関数 (delayedPointerUp) を Click イベントハンドラーから呼び出すことです。Bing アプリでこれを行った方法を例として次に示します (コードは簡略化されています)。

例 5: タッチイベントをプログラムによりアクセシビリティ対応にし、ナレーターでタッチエクスペリエンスを実現するソリューション。

 Bing apps, platform\js\utilities.js:
element.addEventListener("click", onClick);
element.addEventListener("MSPointerUp", onMsPointerUp);
…
var pointerUpEventObject = null;
var pressedElement = null;
var isClick = false;

function onClick(evt) {
    isClick = true;
    delayedPointerUp();
}

function onMsPointerUp(evt) {
    pointerUpEventObject = evt;
    msSetImmediate(delayedPointerUp);
}
…
function delayedPointerUp() {
    if (isClick || pointerUpEventObject && 
            (pointerUpEventObject.srcElement == pressedElement || … right button checks…)) {
        pointerUpEventObject = null;
        isClick = false;
        invokeItem(pressedElement);
    }
}
…

マウスクリックでは、Click と onMsPointerUp の両方がトリガーされます。1 回のマウスクリックに応答して delayedPointerUp が 2 回実行されるのを防ぐには、次のようにします。

msSetImmediate を使って、MSPointerUp からの delayedPointerUp の呼び出しを延期します。
pointerUpEventObject 変数を使って、MSPointerUp イベントオブジェクトへの参照を保持します。
isClick 変数を使って、Click ハンドラーが実行されたかどうかを追跡します。
delayedPointerUp の 1 回目の実行の後に isClick 変数と pointerUpEventObject 変数をリセットして、delayedPointerUp が 2 回実行されるのを防ぎます。

これらの数行のコードを追加すると、ナレーターのタッチエクスペリエンスが有効になります。ダブルタップジェスチャに応じて、UI 上の対話型要素に関連付けられている機能がプログラムからアクティブ化されます。

オートコンプリート

私たちがメールアプリに実装し、ナレーターなどのスクリーンリーダーと適切に連動する機能のもう 1 つの例として、アドレスコントロールのオートコンプリートがあります。

メールのアドレスコントロール (addressbarToField) のオートコンプリートソリューションの背景にある考えは、アドレス候補のリスト (toDDDDList) と、選択された連絡先を保存する別のリスト (toL) を表示するというものです。これをアクセシビリティ対応にする手順として、まず、入力フィールド (toIF) にはドロップダウンリストが関連付けられているので、その role 属性を combobox (英語) に設定しました。さらに、入力フィールド (toIF) の ARIA-controls 属性を設定して、ユーザーが入力を開始したときに表示される候補リストを指すようにしました。このようにすると、キーボードフォーカスをメイン入力フィールド (toIF) に残したまま、ナレーターで候補リスト (toDDDDList) の選択イベントを読み上げることができます。これを実現した方法を次に示します。

例 6: メールアプリのアドレスフィールドのオートコンプリートをアクセシビリティ対応にするソリューション。

 <div id=" addressbarToField" class="…">
<div id=" toOC" class="…">
              <div id="toL" role="listbox" ><!--chosen contacts--></div>
<input id="toIF" size="1" type="email" role="combobox" aria-autocomplete="list"
aria-controls="toDDDDArea" aria-activedescendant="toDDList0" />
</div>
<div id="toDDDDArea" role="group" class="…">
          <div id=" toDDDDList" role="listbox">
        <div id="toDDList0" role="option" aria-selected="true">…</div>
        <div id="toDDList1" role="option" aria-selected="false">…</div>
…
</div>    
</div>
</div>

このオートコンプリートソリューションにより、ユーザーが入力フィールドに入力すると、候補リストが表示され、ナレーターが最初に選択された連絡先を読み上げるようになります。ユーザーが入力を続けると、候補リストが小さくなって新しい選択イベントがトリガーされ、ナレーターはリストの一番上にある新しい連絡先要素を再度読み上げます。ユーザーがキーボードの方向キーを使って候補リストを上下に移動した場合、ナレーターは選択された連絡先を読み上げ続けます。キーボードのフォーカスは常に入力フィールドに残り続けます。

図 9: リストの変更に応じてナレーターが候補を読み上げる。Inspect には ARIA (activedescendant、controls) で公開された UIA 情報が表示されている。

アクセシビリティ対応のグラフィカル要素

グラフィカル要素にはアクセシビリティに対応するための直接的な方法がありません。このため、グラフィカル要素は常にアクセシビリティにおける課題となってきました。少なくとも、このような要素にアクセス可能な名前とロール (通常は ARIA img (英語) に設定) を設定して、それらの要素が画面に表示されていることをスクリーンリーダーを使うユーザーが認識できるようにします。これらのグラフィカル要素が対話型である場合は、ユーザーが要素をナビゲートするための手段を用意する必要があります。

一方、対話型のグラフィカル要素をアクセシビリティ対応にできれば、その効果は高く、肯定的なカスタマーフィードバックを得られる可能性があります。1 つの良い例として、Bing 天気アプリとその [Historical Weather] (過去の天気) グラフがあります。これらは、ナレーターのキーボードシナリオとハイコントラストテーマのアクセシビリティに対応しています。これを実現する手段として、グラフ内のそれぞれの月は、アクセス可能な名前を持つ別々の UIA ツリー要素として公開されています。グラフの右横に表示される月の過去の情報には ARIA-described by ポインターを追加しました。ユーザーが左方向キーまたは右方向キーを押すと、強調表示されている月が変わります。ナレーターは、月の名前をアナウンスした後、その月の過去の情報を読み上げます。コードスニペットを次に示します。

例 7: Bing 天気アプリ。ARIA-described by が現在選択されている月要素に動的に設定される。

 SetArrowKeyHandler: function (parentNode, chartObject) {
        …
            for (var index = 0, len = tickLabels.length; index < len; index++) {
                tickLabels[index].addEventListener("keydown", function (event) {
            …
                    if (newMonth) {
                        newMonth.focus();
                        newMonth.tabIndex = "0";
                        newMonth.,setAttribute("aria-describedby", "hwModuleShifted");
                        hwChart.HandleMonthClick(newMonthIndex, chartObject);
                        this.blur();
                        this.tabIndex = "-1";
                        this.removeAttribute("aria-describedby");
                    }

                });
            }
        }
図 10: Bing 天気の [Historical Weather] (過去の天気) グラフ。方向キーによるナビゲーションに応じて、ナレーターが月の情報を読み上げることができる。

ARIA による要素の参照

ARIA-controls や ARIA-described by などの ARIA 関係属性を使って他の要素を参照する場合は、ターゲット要素がプラットフォームによって UIA オブジェクトとして認識されるようにしてください。これは、Inspect (英語) を使い、UIA ツリー内でその要素を特定することで確認できます。ただし、要素がツリーから明示的に隠されている場合は確認できません。これには、ARIA-hidden="true" を使っている場合や、要素のスタイルを視覚的に非表示に設定している場合が当てはまります。

次の例では、参照先の "A" DIV タグは INPUT フィールドのアクセス可能な名前に含まれていません。DIV タグは既定で UIA オブジェクトと見なされないため、UIA ツリーにも含められません。一方、"B" DIV タグは INPUT フィールド名に含まれており、role 属性が設定されているため UIA ツリーに存在します。

例 8: 参照先 DOM 要素は UI ツリーに表示される通常の UIA オブジェクトか、UI ツリーから明示的に隠された UIA オブジェクトでなければならない。
 <input type="text" aria-labelledby="idA idB" /><div id="idA">A</div><div id="idB" role="heading">B</div>
アクセシビリティのシナリオのテスト

アプリのアクセシビリティをテストする際の目標は、ユーザーが能力にかかわらずアプリを使えるようにすることです。つまり、アプリの UI 要素ごとにアクセシビリティをテストし、ユーザーがナレーター (キーボードとタッチの両方を使用)、ハイコントラスト (黒および白)、[画面上のすべてのものを大きくする] ([設定] -> [PC 設定の変更] の [簡単操作] 設定を参照) を使ってアプリの各タスクを最初から最後まで完了できることを確認します。

ナレーターは、前述の ARIA 標準をサポートする UI オートメーション API を利用して UI の読み上げと操作を実現しているため、ナレーターをテストするとかなり役立ちます。タッチ操作専用デバイスでナレーターを使うときは、指を UI 要素の上へ動かすことで UI を調べたり、ジェスチャを使ってキーボードフォーカスの移動、UIA ツリーのナビゲート、要素の実行や選択、各種モードでのテキストコンテンツの読み上げ、その他多くの操作を行うことができます。

ストアでのアクセシビリティ対応宣言による幅広いユーザーへのアピール

このブログで説明した例を使ってアクセシビリティ対応アプリを作成し、テストしたら、アクセシビリティのガイドラインに従ってアプリをアクセシビリティ対応と宣言することができます。これは、アクセシビリティを考慮に入れていない他のアプリよりも幅広いユーザーがアプリを使えることを意味します。

良い評判を得て多くのユーザーに利用してもらうには、公開の手続き中にアクセシビリティのチェックボックスをオンにして、アプリをアクセシビリティ対応として宣言します。

図 11: Windows ストアの登録ページ。アプリがアクセシビリティ対応の場合にオンにするチェックボックスが表示されている。

アクセシビリティ対応として宣言されたアプリは、設定でアクセシビリティ対応を選択することでフィルターできます。このようにして、スクリーンリーダーと併用できるアプリや、すべてが大きく表示されるアプリ、ハイコントラスト設定で利用できるアプリをすばやく見つけることができます。

まとめ

アプリをアクセシビリティ対応にするために費やす時間は、アプリをより多くのユーザーに届け、アプリの品質を高めるための価値ある投資と言えます。この作業の多くは、既定でアクセシビリティに対応している標準コントロールを使えば行う必要がありません。しかし、複雑なエクスペリエンスやカスタム UI を追加する必要がある場合は、ここで説明したベストプラクティスと参考資料に従って、アプリをアクセシビリティ対応にしてください。

-- リードプログラムマネージャー Jennifer Norberg

Share via

HTML/JavaScript アプリをアクセシビリティ対応にする

アクセシビリティの重要性

アクセシビリティ対応アプリの基本要素

タイル

アプリバー

例 1: 標準の下部アプリバーのマークアップ。特別なアクセシビリティ属性はなく、すべてが組み込まれている。

ListView コントロール

例 2: アクセシビリティ対応の Visual Studio 2012 グリッドアプリテンプレート。取り上げた属性がアクセシビリティのために設定されている。

効率的なキーボードナビゲーション

カスタム UI のアクセシビリティ対応

アクセシビリティ対応のカスタム UI の記述

タブリストによるコンテンツの制御

適切なパターンの選択

例 3: Bing Travel アプリのフライト検索。タブリストとタブ要素が使われている。

プログラムによるタブの選択

例 4: ARIA-selected プロパティの onpropertychange を処理して、プログラムによるタブ選択の変更を検出する。

アクセシビリティ対応のタッチイベント

例 5: タッチイベントをプログラムによりアクセシビリティ対応にし、ナレーターでタッチエクスペリエンスを実現するソリューション。

オートコンプリート

例 6: メールアプリのアドレスフィールドのオートコンプリートをアクセシビリティ対応にするソリューション。

アクセシビリティ対応のグラフィカル要素

例 7: Bing 天気アプリ。ARIA-described by が現在選択されている月要素に動的に設定される。

ARIA による要素の参照

例 8: 参照先 DOM 要素は UI ツリーに表示される通常の UIA オブジェクトか、UI ツリーから明示的に隠された UIA オブジェクトでなければならない。

アクセシビリティのシナリオのテスト

ストアでのアクセシビリティ対応宣言による幅広いユーザーへのアピール

まとめ

Additional resources

Share via

HTML/JavaScript アプリをアクセシビリティ対応にする

アクセシビリティの重要性

アクセシビリティ対応アプリの基本要素

タイル

アプリ バー

例 1: 標準の下部アプリ バーのマークアップ。特別なアクセシビリティ属性はなく、すべてが組み込まれている。

ListView コントロール

例 2: アクセシビリティ対応の Visual Studio 2012 グリッド アプリ テンプレート。取り上げた属性がアクセシビリティのために設定されている。

効率的なキーボード ナビゲーション

カスタム UI のアクセシビリティ対応

アクセシビリティ対応のカスタム UI の記述

タブ リストによるコンテンツの制御

適切なパターンの選択

例 3: Bing Travel アプリのフライト検索。タブリストとタブ要素が使われている。

プログラムによるタブの選択

例 4: ARIA-selected プロパティの onpropertychange を処理して、プログラムによるタブ選択の変更を検出する。

アクセシビリティ対応のタッチ イベント

例 5: タッチ イベントをプログラムによりアクセシビリティ対応にし、ナレーターでタッチ エクスペリエンスを実現するソリューション。

オートコンプリート

例 6: メール アプリのアドレス フィールドのオートコンプリートをアクセシビリティ対応にするソリューション。

アクセシビリティ対応のグラフィカル要素

例 7: Bing 天気アプリ。ARIA-described by が現在選択されている月要素に動的に設定される。

ARIA による要素の参照

例 8: 参照先 DOM 要素は UI ツリーに表示される通常の UIA オブジェクトか、UI ツリーから明示的に隠された UIA オブジェクトでなければならない。

アクセシビリティのシナリオのテスト

ストアでのアクセシビリティ対応宣言による幅広いユーザーへのアピール

まとめ

Additional resources

アプリバー

例 1: 標準の下部アプリバーのマークアップ。特別なアクセシビリティ属性はなく、すべてが組み込まれている。

例 2: アクセシビリティ対応の Visual Studio 2012 グリッドアプリテンプレート。取り上げた属性がアクセシビリティのために設定されている。

効率的なキーボードナビゲーション

タブリストによるコンテンツの制御

アクセシビリティ対応のタッチイベント

例 5: タッチイベントをプログラムによりアクセシビリティ対応にし、ナレーターでタッチエクスペリエンスを実現するソリューション。

例 6: メールアプリのアドレスフィールドのオートコンプリートをアクセシビリティ対応にするソリューション。