モバイルデバイスでのウェブアクセスは非常に人気があり、iOS や Android などの一般的なプラットフォームには本格的なアクセシビリティツールが備わっているため、これらのプラットフォームでのウェブコンテンツのアクセシビリティを考慮することが重要です。この記事では、モバイル固有のアクセシビリティについて検討します。
| 前提知識 | 基本的なコンピューターの知識、HTML、CSS、JavaScript の基本的な知識、前回までの記事の理解。 |
|---|---|
| 学習目標 | モバイルデバイスのアクセシビリティにどのような問題があるのか、またそれらを克服する方法を理解すること。 |
アクセシビリティの現状と、ウェブ標準全般のサポートは、現代のモバイルデバイスでは優れています。モバイルデバイスがデスクトップブラウザーとはまったく異なるウェブ技術を実行し、開発者がブラウザースニッフィングを使用してそれらを完全に別々のサイトで提供することを余儀なくされた時代は終わりました（ただし、かなりの数の企業が依然としてモバイルデバイスの使用を検出し、それらに別のモバイルドメインを提供しています）。
最近の一般的なモバイルデバイスは、「脂肪分たっぷり」のウェブサイトを扱うことができ、主なプラットフォームには視覚障害のあるユーザーがそれらをうまく使えるようにスクリーンリーダーが組み込まれています。最近のモバイルブラウザーは WAI-ARIA もよくサポートしています。
ウェブサイトをモバイルでアクセス可能かつ使用可能にするには、一般的な優れたウェブデザインとアクセシビリティのベストプラクティスに従う必要があるだけです。
モバイルに特別な配慮が必要な例外がいくつかあります。主なものは次のとおりです。
最も一般的なモバイルプラットフォームは完全に機能的なスクリーンリーダーを持っています。これらはデスクトップのスクリーンリーダーとほとんど同じように機能しますが、キーの組み合わせではなくタッチジェスチャーを使用して主に操作される点が異なります。
主な 2 つを見てみましょう: Android の TalkBack と iOS の VoiceOver です。
TalkBack スクリーンリーダーは Android オペレーティングシステムに組み込まれています。
オンにするには、スマートフォンのモデルと Android バージョンを調べて、TalkBack メニューの場所を探します。これは Android のバージョンやスマートフォンのモデルによっても大きく違います。あるスマートフォンメーカー(Samusung など)では、最新の機種で TalkBack がなくて、代わりに独自のスクリーンリーダーを選んでいることもあります。
TalkBack メニューが見つかったら、スライダースイッチを押してオンにします。画面に表示される追加の指示に従います。
TalkBack がオンになっているとき、あなたの Android デバイスの基本的なコントロールは少し違います。例えば、
TalkBack をオフにしたい場合は、
注: 連続した動きで上にスワイプしてから左にスワイプすると、いつでもホーム画面にアクセスできます。複数のホーム画面がある場合は、左右に 2本指でスワイプすることでそれらの間を移動できます。
TalkBack ジェスチャーのより完全なリストについては、TalkBack ジェスチャーを利用するを参照してください。
TalkBack がオンになっているとき、端末のロック解除は少し違います。
ロック画面の下から上に 2本指でスワイプすることができます。デバイスのロックを解除するためのパスコードまたはパターンを設定している場合は、関連する入力画面に移動して入力します。
画面の中央下部にある [ロック解除] ボタンをタッチで探索してから、ダブルタップすることもできます。
TalkBack を使用すると、デバイス上のどこに移動しても、グローバルおよびローカルのコンテキストメニューにアクセスできます。前者はデバイス全体に関するグローバルオプションを提供し、後者は現在のアプリや画面だけに関するオプションを提供します。
これらのメニューにアクセスするには、
グローバルおよびローカルのコンテキストメニューで使用可能なすべてのオプションの詳細については、グローバル コンテキストメニューとローカル コンテキスト メニューを使うを参照してください。
ウェブブラウザーでローカルコンテキストメニューを使用して、見出し、フォームコントロール、リンク、行単位の移動などウェブページを移動するためのオプションを見つけることができます。
例えば、TalkBack をオンにした場合、
注: より完全なドキュメントは Android で TalkBack を使ってみるをご覧ください。
VoiceOver のモバイル版は iOS オペレーティングシステムに組み込まれています。
それをオンにするには、あなたの設定アプリに行き、[一般] > [アクセシビリティ] > [VoiceOver] を選択してください。VoiceOver スライダを押して有効にします（このページには VoiceOver に関連する他の多数のオプションも表示されます）。
記: 古い iOS 端末では VoiceOver メニューは 設定 > 一般 > アクセシビリティ > VoiceOverにあります。
VoiceOver が有効になると、iOS の基本的なコントロールジェスチャーは次のように少し違います。
もう一度オフにするには、上記のジェスチャを使用して [設定] > [一般] > [アクセシビリティ] > [VoiceOver] に戻り、[VoiceOver] スライダをオフに切り替えます。
端末のロックを解除するには、通常どおりホームボタンを押す（またはスワイプする）必要があります。パスコードが設定されている場合は、上で説明したようにスワイプ/スライドして各番号を選択し、次に正しい番号を見つけたらダブルタップして各番号を入力できます。
VoiceOver がオンになっているとき、ローターと呼ばれるナビゲーション機能を使えます。それは素早く多くの一般的で役に立つオプションから選ぶことを可能にします。それを使用するには、
ローターで利用可能なオプションは状況依存型です — それらはどのアプリやビューにいるかによって異なります（例については下記を参照）。
VoiceOver を使ったウェブブラウジングを試してみましょう。
注: 利用可能な VoiceOver ジェスチャおよび iOS でのアクセシビリティテストに関するその他のヒントを網羅した詳細なリファレンスについては、VoiceOver を使用してデバイスのアクセシビリティをテストする（英語）を参照してください。
CSS および JavaScript のアクセシビリティの記事では、特定の種類の制御機構に固有のイベントの概念を調べました（マウスに特有のイベントを参照）。要約すると、他の制御機構は関連する機能をアクティブにできないため、これらはアクセシビリティの問題を引き起こします。
例えば、click イベントはアクセシビリティの点で優れています — 関連付けられているイベントハンドラは、ハンドラが設定されている要素をクリックするか、タブ移動して Enter / Return キーを押すか、タッチスクリーンデバイスでタップすることで起動できます。simple-button-example.html の例を試してみてください（ライブで動いているのを見る）。
あるいは、mousedown や mouseup のようなマウス固有のイベントは問題を引き起こします — それらのイベントハンドラはマウス以外の制御を使って呼び出すことはできません。
キーボードまたはタッチで、simple-box-drag.html の例を制御しようとすると、問題が発生します（ライブで例を見る）。これは、次のようなコードを使用しているために発生します。
div.onmousedown = function() {
initialBoxX = div.offsetLeft;
initialBoxY = div.offsetTop;
movePanel();
}
document.onmouseup = stopMove;他の形式の制御を有効にするには、異なるが同等のイベントを使用する必要があります — 例えば、タッチイベントはタッチスクリーンデバイスで機能します。
div.ontouchstart = function(e) {
initialBoxX = div.offsetLeft;
initialBoxY = div.offsetTop;
positionHandler(e);
movePanel();
}
panel.ontouchend = stopMove;マウスイベントとタッチイベントを一緒に使用する方法を示す簡単な例を示しました — multi-control-box-drag.html を参照してください（この例もライブで見てください）。
注: ゲーム制御機構の実装では、さまざまな制御機構を実装する方法を示す完全に機能する例も見ることができます。
レスポンシブデザインは、画面のサイズや解像度などの要因に応じて、レイアウトやその他のアプリの機能を動的に変更することです。だから、さまざまなデバイスタイプのユーザーにとって使用可能でアクセス可能です。
特に、モバイルに関して対処する必要がある最も一般的な問題は次のとおりです。
注: レスポンシブデザインのテクニックについては、MDN の他の場所で説明されているため、ここでは詳しく説明しません（上記のリンクを参照）。
モバイルでサイトにアクセスしやすくするために考慮すべき他の重要な問題があります。ここにその一部を列挙しましたが、私たちがそれらを考えるときにはさらに追加します。
ビューポートを使用すると、ズームを無効にすることができます。常にリサイズ可能にして、{{htmlelement("head")}} で端末の幅にあわせるにはこうします:
<meta name="viewport" content="width=device-width; user-scalable=yes">なるべくuser-scalable=no とはセットしないでください — 多くの人があなたのウェブサイトのコンテンツを見るためにズームに頼るので、この機能を奪うことは本当に悪い考えです。ズーミングによって UI が壊れる場合があります。そのような場合、絶対にズームを無効にする必要があると感じる場合は、UI を壊さないようにテキストサイズを大きくするためのコントロールのような、他の同等の機能を提供するべきです。
モバイルデバイスでは画面が非常に狭いため、メディアクエリやその他の技術を使用して、ナビゲーションメニューをディスプレイ上部の小さなアイコンに縮小するのがとても一般的です — これは一般的に「3本の水平線」アイコンで表され、デザインパターンでは「ハンバーガーメニュー」と呼ばれています — サイトがモバイルで表示されるときに必要です。
そのようなメニューを実装するときは、上記の制御機構で説明したように、それを明らかにするためのコントロールは適切な制御機構（通常はモバイル用タッチ）でアクセスできること確認する必要があります。また、メニューの操作中に混乱しないように、メニューにアクセスしている間はページの残りの部分が邪魔にならないように移動するか、何らかの方法で非表示にします。
良いハンバーガーメニューの例（ドイツ語）を参照してください。
モバイルデバイスでは、データを入力することは、デスクトップコンピューター上の同等の経験よりもユーザーにとってより面倒なことが多いです。タッチスクリーンの仮想キーボードや小型のモバイル物理キーボードよりも、デスクトップやラップトップのキーボードを使用してテキストをフォーム入力に入力する方が便利です。
このため、必要なタイピングの量を最小限に抑えることを試みる価値があります。例として、通常のテキスト入力を使用して毎回ユーザーに役職を記入させるのではなく、最も一般的な選択肢を含む <select> メニューを提供できます（データ入力の一貫性を保つのにも役立ちます）。そして、それ以外の値を入力するテキストフィールドを表示する「その他」選択肢を提供できます。common-job-types.html で、このアイデアの簡単な例を実際に見ることができます（一般的な仕事の例をライブで見る）。
モバイルプラットフォームでの日付などの HTML5 フォームの入力タイプを使用することも考慮する価値があります。例えば、Android と iOS の両方で、デバイスエクスペリエンスに適した使用可能なウィジェットが表示されます。いくつかの例については html5-form-examples.html を参照してください（HTML5 フォームの例をライブで見る） - これらをモバイルデバイスでロードして操作してみてください。例えば、
number）、電話番号（tel）、電子メール（email）の入力では、番号や電話番号を入力するための適切な仮想キーボードを表示します。date, time）の入力では、日時を選択するための適切なピッカーを表示します。デスクトップとは別の解決策を提供したい場合は、機能検出を使用して、モバイルデバイスに常に別のマークアップを提供できます。さまざまな入力タイプの検出に関する生の情報については入力タイプ（英語）を参照してください。また、より多くの情報については機能検出の記事をチェックしてください。
この記事では、モバイルのアクセシビリティ固有の一般的な問題とその解決方法について詳しく説明しました。また、アクセシビリティテストを支援するために、最も一般的なスクリーンリーダーの使い方を紹介しました。