アクセシビリティツールと支援技術
次に、アクセシビリティツールについて取り上げます。ここでは、アクセシビリティの課題を解決するために使用できるツールの種類について情報を提供し、障碍のある方がウェブを閲覧する際に利用する支援技術について理解を深めていただきます。ここで紹介するツールは、今後の記事で繰り返し使用することになります。
| 前提条件: | HTML、CSS、基本的なアクセシビリティの概念の理解の知識。 |
|---|---|
| 学習成果: |
|
アクセシビリティツール
ここでは、ウェブサイトのアクセシビリティを検査し、発見された課題を修正するために使用できるツールや手法について見ていきましょう。
ソース順のテスト
コンテンツは、ソース上の順序において論理的に整合性がとれている必要があります。後で CSS を用いて表示方法を変更することは常に可能ですが、まずは基礎となる構造を正しく整えておくべきです。これは、支援技術がウェブサイトのコンテンツをソースの順序に基づいて読み上げるためであり、また、障碍のあるユーザーは、コンテンツをより読みやすくするために CSS の一部を変更したり無効にしたりすることがよく場合あります（一般的な例としては、フォントサイズの拡大や高コントラストの配色の適用などが挙げられます）。
ソースの順序を確認するために、サイトの CSS をオフにして、 CSS なしでどれだけ理解できるかを確認することができます。 CSS をコードから除去するだけなら手動でもできますが、最も簡単な方法はブラウザー機能を使用することです。例えば次のようにします。
- Firefox: メインメニューから 表示 > スタイルシート > スタイルシートを使用しない を選択
- Safari: ブラウザーの開発者ツールを開き、開発者ツールパネルの左上付近にある Device Settings ボタンをクリックしてから、そこで現れるパネルの "Disable CSS" チェックボックスをチェック
- Chrome/Edge: Web Developer Toolbar 拡張機能をインストールし、ブラウザーを再起動します。拡張機能メニューから利用できるようになる "Web Developer" ギアアイコンをクリックし、 CSS > Disable All Styles を選択。
色とカラーコントラスト
ウェブサイトの配色を選択するときは、テキスト（前景）のカラーコントラストが背景色とよく合うことを確認するべきです。あなたのデザインはかっこいいかもしれませんが、コンテンツを読むことができなかったら、それは良くありません。配色に十分なコントラストがあるかどうかチェックするために WebAIM のカラーコントラストチェッカー(英語)のようなツールを使ってください。
もう1つのヒントは、道標や重要な情報の強調表示に色だけを使用することを避けることです。色覚異常などの視覚障碍を持つ人にとっては、見落とされてしまうことがあるからです。例えば、フォームの必須項目を赤でマークするのではなく、アスタリスクと赤の文字で表示するようにしましょう。
メモ: コントラスト比が高いと、光沢のある画面を備えたスマートフォンやタブレットを使用している人は誰でも、日光のような明るい環境にいるときにページを読みやすくなります。
監査ツール
ウェブページを読み込ませることができる、利用できる監査ツールはいくつかあります。それらのツールは、ページを検証し、ページに存在するアクセシビリティ上の問題のリストを返します。 例えば、Wave というオンラインのアクセシビリティテストツールを使用すると、ウェブアドレスを入力すると、アクセシビリティ上の問題がハイライトされた注釈付きのページを表示することができます。
- Wave のホームページ(英語)に行きます。
- ページの上部にあるテキスト入力ボックスに bad-form.html の例の URL を入力してください。その後、Enter キーを押すか、入力ボックスの右端にある矢印をクリック/タップしてください。
- このサイトでは、存在するアクセシビリティ上の問題を明確に示しています。表示されているアイコンをクリックすると、Wave による評価で特定されたそれぞれの課題に関する詳細情報を確認できます。
他にもチェックする価値のある監査ツールがあります。
メモ: このようなツールは、アクセシビリティの問題を全て自分で解決するのに十分ではありません。 全体像を把握するには、これらの組み合わせ、知識と経験、ユーザーテストなどが必要です。
Deque の aXe ツール(英語)は、前述した監査ツールよりも少しばかり進化しています。 他のものと同様に、ページをチェックしてアクセシビリティエラーを返します。 その最もすぐに役立つ形式は、おそらく次のブラウザー拡張機能です。
- Chrome 用の aXe(英語)
- Firefox 用の aXe(英語)
これらはブラウザー開発者ツールにアクセシビリティタブを追加します。 例えば、Firefox 用のバージョンをインストールし、それを使用して bad-table.html の例を監査すると、次の結果が得られます。
aXe は npm を使ってもインストール可能で、Grunt や Gulp のようなタスクランナー、Selenium や Cucumber のような自動化フレームワーク、Jasmine のような単体テストフレームワークなどと統合することができます（やはり、詳細についてはメインの aXe ページ(英語)を参照してください）。
スクリーンリーダー
障碍者が利用する支援技術 (AT) の中で特に一般に広く使われているものの一つ ― そして、ウェブページのアクセシビリティを検査する際にも最もよく使われるものの一つ ― が、スクリーンリーダーです。これは、ウェブページのコンテンツや、OS にインストールされている他のアプリのコンテンツを読み上げてくれるソフトウェアです。スクリーンリーダーがあれば、視覚的なコンテンツを見なくてもコンピューターを利用することができます。
ブラウザーは、スクリーンリーダー（およびその他の支援技術）がアクセシビリティツリーと呼ばれる表現を通じてユーザーに情報を伝達できるよう、ページのコンテンツに関する情報を公開しています。これにより、要素の名前や説明、その目的や役割（ボタンなのか、入力フィールドなのか？）、具体的な状態にあるかどうか（例えば、ダイアログボックスが開いているか閉じられた状態なのか？）といった意味的な情報が提供されます。
テキストの段落の場合、これは些細なことかもしれません。テキストは基本的に書かれた通りに読み上げられるからです。しかし、ドロップダウンメニューや動画プレーヤーといったユーザーインターフェイスの機能となると、事情は複雑になります。だからこそ、意味的な HTML を正しく使用することが非常に重要であり、これについてはこのモジュールの次の記事で詳しく解説します。間違った要素を使ってコンテンツをマークアップすると、スクリーンリーダーのユーザーを混乱させてしまう可能性があります。
開発用マシンにスクリーンリーダーを 1 つか 2 つインストールしておき、下記のように、お気に入りのウェブサイトをスクリーンリーダーを使って使用してみてください。視覚障碍のある人々がどのようにウェブを利用しているかを理解することは、すべての人にとってより使いやすい製品を設計するための鍵となります。
どのようスクリーンリーダーが利用できるか
利用できるスクリーンリーダーには、次のようなものがあります。
- JAWS (Windows) のような有料製品もあります。
- NVDA (Windows)、ChromeVox（Chrome、Windows、Mac OS X）、Orca (Linux) などの無料製品もあります。
- VoiceOver (Mac OS X、iOS)、ChromeVox（Chromebook 上）、TalkBack (Android) など、一部はオペレーティングシステムに組み込まれています。
一般的に、スクリーンリーダーはホスト OS 上で動作する独立したアプリであり、ウェブページや他のアプリ内のコンテンツも読み上げることができます（ただし、常にそうとは限りません。例えば、ChromeVox はブラウザー拡張機能です）。スクリーンリーダーによって、具体的な動作やコントロールに多少の違いがある傾向があるため、詳細については、使用するスクリーンリーダーのドキュメントを参照する必要があります。とはいえ、基本的な仕組みはすべてほぼ同じです。
次のいくつかの節では、いくつかの異なるスクリーンリーダーを使ってテストを行い、それらの作業方法や、それらを用いたテストの方法について大まかな概要を説明します。
メモ: WebAIM のスクリーンリーダーの互換性のための設計(英語)では、スクリーンリーダーの使用方法とスクリーンリーダーに最適な機能についての役立つ情報が提供されています。 いくつかの興味深いスクリーンリーダーの使用統計については、第 10 回スクリーンリーダーのユーザー調査の結果(英語)も参照してください。
VoiceOver
VoiceOver (VO) は Apple mac/iPhone/iPad には無料で含まれているので、Apple 製品を使っているならそれはデスクトップ/モバイルでテストするのに役に立ちます。 ここでは、MacBook Pro の Mac OS X でテストしました。
オンにするには、Cmd + F5 を押します。 今までに VO を使ったことがない場合は、ようこそ画面が表示され、そこで VO を起動するかどうかを選択できます。 また、使い方を学ぶためにかなり役に立つチュートリアルを実行することもできます。 再びオフにするには、もう一度 Cmd + F5 を押します。
メモ: チュートリアルは少なくとも一度は実行するべきです — これは VO を学ぶ上で非常に便利な方法です。
VO がオンになっていると、ディスプレイはほぼ同じに見えますが、画面の左下に、現在選択されている VO に関する情報を含む黒いボックスが表示されます。 現在の選択範囲も黒枠で強調表示されます — この強調表示は VO カーソルと呼ばれます。
VO を使用するには、「VO 修飾キー」を多用します — これは、実際の VO ショートカットキーに加えて、それらを機能させるために押す必要があるキーまたはキーの組み合わせです。 このような修飾キーを使用するのは、スクリーンリーダーに共通で、他のコマンドとコマンドが衝突しないようにするためです。 VO の場合、修飾キーは CapsLock と Ctrl + Option のどちらかです。
VO にはたくさんのキーボードコマンドがありますので、ここではそれら全てをリストしません。 ウェブページのテストに必要な基本的なものは、次の表のとおりです。 ショートカットキーでは、 "VO" は「VoiceOver 修飾キー」を意味します。
| ショートカットキー | 説明 |
|---|---|
| VO + 矢印キー | VO カーソルを上下左右に移動します。 |
| VO + スペースバー | VO カーソルで強調表示されている項目を選択/アクティブ化します。 これには、ローター（下記参照）で選択した項目が含まれます。 |
| VO + Shift + 下矢印 | HTML の表やフォームなどのアイテムのグループ内へ移動します。グループ内に入ったら、以上で説明したコマンドを通常通り使用して、そのグループ内のアイテム間を移動したり、アイテムを選択したりすることができます。 |
| VO + Shift + 上矢印 | グループから出ます。 |
| VO + C | （表内の場合）現在の列のヘッダーを読み上げます。 |
| VO + R | （表内の場合）現在の行のヘッダーを読み上げます。 |
| VO + C + C （2 つの連続した C） | （表内の場合）ヘッダーを含む現在の列全体を読み上げます。 |
| VO + R + R（2 つの連続した R） | （表内の場合）各セルに対応するヘッダーを含め、現在の行全体を読み上げます。 |
| VO + 左矢印、VO + 右矢印 | （日付の選択などの一部の水平オプション内の場合）オプション間を移動します。 |
| VO + 上矢印、VO + 下矢印 | （日付の選択などの一部の水平オプション内の場合）現在のオプションを変更します。 |
| VO + U | 簡単にナビゲーションできるように、見出し、リンク、フォームコントロールなどのリストを表示するローターを開きます。 |
| VO + 左矢印、VO + 右矢印 | （ローター内の場合）ローターで利用可能な異なるリスト間を移動します。 |
| VO + 上矢印、VO + 下矢印 | （ローター内の場合）現在のローターリスト内の異なる項目間を移動します。 |
| Esc | （ローター内の場合）ローターを終了します。 |
| Ctrl | （VO が話している場合）読み上げを一時停止/再開します。 |
| VO + Z | 読み上げの最後の部分をやり直します。 |
| VO + D | mac の Dock に入るので、その中で実行するアプリを選択できます。 |
たくさんのコマンドがあるように見えますが、慣れればそれほど悪くありませんし、VOは特定の配置で使用するコマンドを定期的に教えてくれます。これで VO で遊んでみてください。この後、スクリーンリーダーのテスト節にあるいくつかの例で遊ぶことができます。
NVDA
NVDA は Windows 専用で、インストールする必要があります。
- NVDA を nvaccess.org からダウンロードしてください。 寄付をするか無料でダウンロードするかを選択できます。 ダウンロードする前にメールアドレスを入力する必要もあるでしょう。
- インストール後、NVDA を起動するには、プログラムファイル/ショートカットをダブルクリックするか、ショートカットキーの Ctrl + Alt + N を使用します。 起動すると NVDA にようこそダイアログが表示されます。 ここでは、いくつかのオプションから選択し、次に［OK］ボタンを押して作業を進めます。
これで NVDA はあなたのコンピューター上でアクティブになります。
NVDA を使用するには、「NVDA 修飾キー」を多用します — これは、実際の NVDA のショートカットキーに加えて、それらを機能させるために押す必要があるキーです。NVDA の場合、修飾キーは Insert（デフォルト）、または CapsLock（［OK］を押す前に NVDA へようこそダイアログボックスの最初のチェックボックスをオンにして選択できます）のいずれかになります。
メモ: NVDA は、VoiceOver よりも、それがどこにあるのか、また何をしているのかを強調する方法という点では微妙です。 見出しやリストなどをスクロールしているとき、あなたが選択している項目は一般的に微妙なアウトラインでハイライトされますが、これはいつも全てのことに当てはまるわけではありません。 完全に迷子になった場合は、Ctrl + F5 を押して現在のページを更新し、もう一度上から始めることができます。
NVDA にはたくさんのキーボードコマンドがありますので、ここではそれら全てをリストしません。 ウェブページのテストに必要な基本的なものは、次の表のとおりです。 ショートカットキーでは、NVDA は「NVDA 修飾キー」を意味します。
| ショートカットキー | 説明 |
|---|---|
| NVDA + Q | 起動している NVDA を再びオフにします。 |
| NVDA + 上矢印 | 現在行を読み上げます。 |
| NVDA + 下矢印 | 現在位置から読み上げを始めます。 |
| 上矢印 と 下矢印、または Shift + Tab と Tab | ページ内の前/次の項目に移動して、それを読み上げます。 |
| 左矢印 と 右矢印 | 現在の項目の前/次の文字に移動して、それを読み上げます。 |
| Shift + H と H | 前/次の見出しに移動して、それを読み上げます。 |
| Shift + K と K | 前/次のリンクに移動して、それを読み上げます。 |
| Shift + D と D |
前/次の文書のランドマーク（<nav> など）に移動して、それを読み上げます。
|
| Shift + 1 〜 6 と 1 〜 6 | 前/次の見出し（レベル 1 〜 6）に移動して読み上げます。 |
| Shift + F と F | 前/次のフォーム入力に移動して、それにフォーカスを当てます。 |
| Shift + T と T | 前/次のデータ表に移動して、それにフォーカスを当てます。 |
| Shift + B と B | 前/次のボタンに移動して、ラベルを読み上げます。 |
| Shift + L と L | 前/次のリストに移動して、その最初のリスト項目を読み上げます。 |
| Shift + I と I | 前/次のリスト項目に移動して、それを読み上げます。 |
| Enter/Return | （リンク/ボタンまたは他のアクティブ化可能項目が選択されている場合）項目をアクティブ化します。 |
| NVDA + スペースバー | （フォームが選択されている場合）個々の項目を選択できるようにフォーム内に入るか、すでにフォームに入っている場合はフォームから出ます。 |
| Shift + Tab と Tab | （フォーム内の場合）フォーム入力間を移動します。 |
| 上矢印 と 下矢印 | （フォーム内の場合）フォーム入力の値を変更します（選択ボックスなどのコントロールの場合）。 |
| スペースバー | （フォーム内の場合）選択値を選択します。 |
| Ctrl + Alt + 矢印キー | （表が選択されている場合）表のセル間を移動します。 |
スクリーンリーダーのテスト
スクリーンリーダーを使用することに慣れてきましたが、スクリーンリーダーがどのようにウェブページの良い機能と悪い機能に対処するかを理解するために、簡単なアクセシビリティテストを行うためにスクリーンリーダーを使用したいと思います。
- good-semantics.html を見て、見出しがスクリーンリーダーによってどのように見つけられ、ナビゲーションに使用できるかに注目してください。 では、bad-semantics.html を見て、スクリーンリーダーがどのようにしてこの情報を取得できないのかに注目してください。 本当に長いページのテキストをナビゲートしようとすると、これがどれほど面倒なことになるか想像してください。
- good-links.html を見て、コンテキスト、たとえば VoiceOver Rotor から見たときにそれらがどのように意味をなすかに注目してください。 bad-links.html ではそうではありません — それらは全てただの「ここをクリック」です。
- good-form.html を見て、適切な
<label>要素を追加することで、フォーム入力がラベルで説明される様子に注目してください。 bad-form.html では、それらは「空白」の行に沿って役に立たないラベルを取得します。 - punk-bands-complete.html の例を見て、表見出しを正しく定義したので、スクリーンリーダーがどのようにしてコンテンツの列と行を関連付け、それらを全て読み取ることができるかを確認します。 bad-table.html では、どのセルも関連付けることができません。 1 つのページに 1 つの表しかない場合、NVDA はやや奇妙なふるまいをするようです。 代わりに WebAIM の表のテストのページ(英語)を試すことができます。
その他のツール
スクリーンリーダーは、ウェブ開発者として最もよく目にする支援技術の一つですが、他にもさまざまな種類の支援技術が存在します。ユーザーがコンテンツにアクセスするためにどのような支援技術を使用している可能性があるかを把握しておくことは有益です。この節では、そのうちのいくつかをまとめます。
拡大文字キーボードや点字キーボード
視覚障碍者や高齢者のために設計された拡大文字キーボードや、全盲や重度の視覚障碍者でも使用できるように設計された点字キーボードを入手することができます。
代替ポインティングデバイス
ポインティングデバイスといえば、マウスが真っ先に思い浮かびますが、さまざまな運動機能障碍を持つユーザーがユーザーインターフェイスをより簡単に操作できるように設計された、他のポインティングデバイスも存在します。
- トラックボール：いわば「逆さまのマウス」のようなもので、机の上に固定されたボールが搭載されており、これを転がすことでポインターを移動することができます。特に手の動きに制限がある人にとっては、マウスよりも操作が正確で扱いやすいとされています。
- ジョイスティック：スティックを動かすことでポインターを移動させる操作装置です。ジョイスティックはトラックボールほど正確ではありませんが、幅広い障碍を持つ方、さらには重度の障碍を持つ方でも使用可能です。
- タッチパッド：現行のノートパソコンのほとんどにはタッチパッド（トラックパッドと呼ばれることもあります）が搭載されています。これは平らなタッチセンサーで、指でポインターを移動するだけでなく、モバイル端末のジェスチャーと同様に、複数本の指を使った操作も可能です。内蔵タッチパッドがない端末用に、外付けのタッチパッドを購入することもできます。マウスよりも操作が精密だと感じる人もいます。
画面拡大ツール
画面拡大ツールは、視力が低下しているユーザーに対し、端末の画面を拡大表示することで、コンテンツをより容易に理解し、操作できるようにします。また、色覚異常に対応するための色調整や、マウスポインターやテキストカーソルのサイズ調整など、視認性を高める機能も備えています。
画面拡大ツールには、ソフトウェアのものとハードウェアのものがあります。
- 現行のほとんどのオペレーティングシステムには、画面全体または一部を拡大するためのアプリが組み込まれています。例えば、mac の "Zoom" や Windows の「拡大鏡」などです。また、テキストサイズやマウスカーソルのサイズなどを一括して拡大するオプションも指定されていることが一般的です。サードパーティー製のツールも利用可能です。
- ハードウェア式の画面拡大装置には、通常、端末の画面の横や前に設置される別個のディスプレイがあり、画面全体またはその一部を拡大して表示します。
音声認識ソフトウェア
音声（または会話）認識ソフトウェアを使えば、音声でコマンドを発して端末を制御したり、メールや文書のテキストを口頭で伝え、コンピューターに代わりに文字を入力させたりすることができます。これは、キーボードやその他の操作手段を使用できない人にとって非常に便利です。
現行のオペレーティングシステムには、この機能を実現するための機能が組み込まれています（例えば、Mac の「ディクテーション」や Windows の「Voice Access」など）。また、デスクトップアプリからブラウザー拡張機能に至るまで、サードパーティー製のアプリも利用可能です。
スイッチ制御
スイッチ制御は、身体的な動きがとても制限されているユーザーや、認知障碍のあるユーザーが、端末と対話するための仕組みを提供します。
スイッチ制御の設定には、通常、以下の 2 つの要素が含まれます。
- 端末上のオプションを起動するための物理的なスイッチまたはボタン。同時に、通常の端末ボタン（音量調節ボタンなど）やキーボードのキーに、スイッチ機能を割り当てることもできます。
- 端末をスイッチやボタン操作に対応させるための、端末のモードまたはサードパーティ製ソフトウェアのアドオン。例えば、Android の「Switch Access」は、さまざまな状況（ホーム画面上のアプリなど）における異なるオプションを順に切り替え、目的のオプションに到達した時点でボタンやスイッチを使って選択できるモードです。
アクセシビリティの計画
それぞれのプロジェクトの始まる当初から、アクセシビリティについて慎重に検討する必要があります。初期の設計段階でアクセシビリティが確実に考慮されるようにし、以下のことが可能になるようにしてください。
ユーザーテスト
サイトのアクセシビリティ上の問題を特定するには、自動化ツールだけに頼るべきではありませ ん。すべてのウェブサイトプロジェクトには、ユーザーテスト戦略が必要であり、アクセシビリティに関するユーザーグループをいくつか含めること強く推奨されます。
- スクリーンリーダー利用者、キーボードのみを利用する利用者、聴覚障碍者、身体障碍者などを参加させるよう努めてください。
- それぞれのグループに、まずトップページやそれ以外にも主要なページを見ていき、主要な機能をいくつか試すことから始めて、ウェブサイト全体を一般的に利用してもらいます。典型的な例としては、商品の購入や予約の申し込みなどが含まれます。参加者に、どのような印象を持ったか、どのような問題に遭遇したかを依頼してください。
- 次に、複雑なフォームコントロールや動画プレーヤーなど、アクセシビリティに関して特に懸念がある機能やワークフローに焦点を当ててもらいます。使い勝手の観点から何が不足しているか、どのような変更を希望するかについて尋ねてください。
プロジェクトによっては、テストグループへの報酬を支払う予算がある場合もあれば、無報酬のボランティアや、同僚・友人に頼る場合もあります。
アクセシビリティテストのチェックリスト
次のリストは、プロジェクトで推奨されるアクセシビリティテストを確実に実行したことを確認するためのチェックリストです。
- HTML が意味論的にできるだけ正しいことを確認してください。 監査ツールを使用して、それを検証することからスタートするといいでしょう。
- CSS がオフになっているときにコンテンツが意味をなすことを確認してください。
- 機能がキーボードからアクセス可能であることを確認してください（詳しくは可能であれば意味のある UI コントロールを使用するを参照）。 Tab、Return/Enter などを使ってテストします。
- テキスト以外のコンテンツに代替テキストがあることを確認してください。 監査ツールはそのような問題を捉えるのに適しています。
- 適切なチェックツールを使用して、サイトのカラーコントラストが許容範囲内であることを確認してください。
- 隠されたコンテンツがスクリーンリーダーに見えるようにしてください。
- 可能な限り JavaScript がなくても機能が使えることを確認してください。
- 適切な場合は、ARIA を使用してアクセシビリティを向上させます。
- 監査ツールを通してサイトを運営してください。
- スクリーンリーダーでテストしてください。
- あなたが行ったことを言うために、あなたのサイトのどこかに見つけることができるアクセシビリティの方針/声明を含めてください。
まとめ
この記事が、アクセシビリティの課題を修正するために使用できるツールの種類について、アイディアを提示するものとなっていれば幸いです。また、無効なユーザーがウェブにアクセスするのを手助けするために保有する支援技術についても紹介しています。
次の記事では、アクセシブルな HTML の書き方を見ていきます。