Flashのアクセシビリティについて考える

第2回 キー操作に対応する

この記事を読むのに必要な時間:およそ 2 分

今回は,アクセシビリティのための大きなステップ,キーボード対応について紹介します。

まず,Flash CS4 professionalのFlaファイルを用意しました。FlashAcc_key.zipをダウンロードしてからご覧ください。

ところで,皆さんは,ブラウザをキーボードで操作したことはありますか? たとえば,多くのブラウザで採用されているキー操作として表のようなものがあります。

 ブラウザの代表的なキー操作

キー名動作内容
BackSpaceページを戻る
Tabフォーカスを次のリンク(ボタン)へ移動
Shift+Tabフォーカスを前のリンク(ボタン)へ移動
Enter(Space)リンク(ボタン)をクリック
PageUp前のページをみる
PageDown次のページをみる
行単位で前にいく
行単位で次にいく
Homeページの最初にいく
Endページの最後にいく

最も重要なのは,フォーカスの移動とリンクのクリックです。実際,スクリーンリー ダー・ユーザーは,1文字単位で読むなどの操作もしますが,私たちもこれだけ知っていれば,Webサイトは結構見ることができます。

乱暴な言い方をすれば,これらに対応すれば,とりあえずFlashも大丈夫と言えるはずです。しかし,残念ながら,Flashの使われているページに行くとこのTabキーのフォーカス移動すらまともにできないことがあります。

そこで,今回は最低限必要なこととして,TabキーとEnter(Space)キーに対応したFlashの作り方を紹介します。

キーに反応するボタン

FlashでTabキーに反応するのは,ボタンシンボルまたは,ムービークリップシンボルですが,Enter(Space)キーに対応するのはボタンシンボルだけです。そのため,アクセシビリティに対応するにはボタンシンボルを使用する必要があります。また,ボタンに使用できるイベントの内Enter(Space)キーは,CLICKイベント(AS3)か,onPress/onRelease(AS1/2)にしか反応しません。

タブインデックスとは

Tabキーでフォーカスが当たるボタンの順番をタブ順序(Tab Order)と呼び,Flash Playerはこのタブ順序に沿って動作します。タブ順序はボタンの座標やサイズから自動で順番を割り当てるため,完璧ではありませんがおおむね左上から右下へいくような順番になります。当然ながらデザインによっては自動でつくられたタブ順序は意図通りにはなりません。

そこで,このタブ順序を自ら作ったタブ順序(カスタムタブ順序)にすることができます。カスタムタブ順序を設定するには,タブインデックス(tabIndex)プロパティを使用して,タブ順序になる番号を割り振りますが,その方法はアクセシビリティパネルとActionScriptのどちらでも可能です。

タブインデックスに設定できる値は,正の数,かつ,整数です。また,このプロパティは画面に見えているボタン,ムービークリップやグループの階層とは無関係です。つまり,Tabキーによるフォーカスの順序は見たままの状態のみを示します。

タブインデックスを1つでも設定するとデフォルトのタブ順序を無視してカスタムタブ順序が有効になり,タブインデックスが未設定のオブジェクトはTabキーによるフォーカスが絶対にあたらないので注意してください。

タブインデックスは,ボタンやテキスト入力につけますが,ムービークリップやテキストフィールドに適用した場合は,スクリーンリーダーがステージ上の全文を読み上げる際の「読み上げ順序」に影響します。これは,次回「音声によるガイドを意識する」で詳述する予定です。

サンプルでは,ボタンに数字の順序通りになるようにタブ順序を設定しました。

次からは実際に,その方法を紹介していきます。

 タブ順序を設定すると,Tabキー押下で次から次へと数字のとおりにボタンを移動します

図 タブ順序を設定すると,Tabキー押下で次から次へと数字のとおりにボタンを移動します

アクセシビリティパネルで設定する 参照ソース:btns_accsPanel.fla

アクセシビリティパネルは[ウィンドウ]⁠⁠他のパネル]⁠⁠アクセシビリティ]で開くことができます。

 アクセシビリティパネルを開きます

図 アクセシビリティパネルを開きます

ステージ上にあるボタンを選択すると,アクセシビリティパネルの項目が変わり一番下に「タブインデックス」という名前のフィールドが現れます。

このフィールドに,タブ順序に使用する順番を数値で記述します。タブ順序の順番は小さい数から大きな数へと昇順です。たとえば6個のボタンがあればそれぞれのタブインデックス値を10,20,30,40,50,60とします。番号は詰める必要がありません。むしろ隙間があることで3番目と4番目を入れ替えたいときに,10,20,45,40,50,60などと1箇所の変更で対応できる利点があります。

 ボタン「1」に10というタブインデックスを設定した状態です

図 ボタン「1」に10というタブインデックスを設定した状態です

このアクセシビリティパネルで設定したタブインデックスの値はアクセシビリティパネルなしにステージ上で直接確認できます。⁠表示]メニュー→⁠タブ順序の表示]を選択します。すると,ボタンの左上にタブインデックス番号が表示されます(表示するにはAS2以下でFlaファイルを作成している必要があります)⁠

 AS2以下で作成しているFlashならば,タブインデックスの値が直接表示されます

図 AS2以下で作成しているFlashならば,タブインデックスの値が直接表示されます

著者プロフィール

NORI(伊藤のりゆき)

Twitter:@nori_togoru

有限会社トゴル・カンパニー代表。Flashアクセシビリティをきっかにアクセシビリティ全般に興味を持つ。UIデベロッパとして企業用WebアプリケーションのUIデザインを行う。写真集「Snap or Nothing写真集」(iTunes AppStoreにて)をリリースするなど写真家としても活動している。

コメント

コメントの記入