モバイルのアクセシビリティ

アクセシビリティの状態、そしてウェブ標準全般への対応は、現行のモバイル端末では良好です。モバイル端末がデスクトップのブラウザーとは完全に異なるウェブ技術を実行し、開発者がブラウザー検出を使用し、完全に別個のサイトを提供することを余儀なくされていた時代はとうの昔に過ぎ去りました（いくつかの企業はまだモバイル端末の使用を検出し、モバイルドメインを別個に提供していますが）。

最近の一般的なモバイル端末は、「脂肪分たっぷり」のウェブサイトを扱うことができ、主なプラットフォームには視覚障害のあるユーザーがそれらをうまく使えるようにスクリーンリーダーが組み込まれています。最近のモバイルブラウザーは WAI-ARIA もよくサポートしています。

ウェブサイトをモバイルでアクセス可能かつ使用可能にするには、一般的な優れたウェブデザインとアクセシビリティのベストプラクティスに従う必要があるだけです。

モバイルに特別な配慮が必要な例外がいくつかあります。主なものは次のとおりです。

• 制御機構 — ボタンのようなインターフェイスのコントロールが、デスクトップやラップトップ（主にマウスとキーボード）と同様に、モバイル（主にタッチスクリーン）でアクセス可能であることを確認する。
• ユーザー入力 — モバイルでのユーザー入力要件をできるだけ苦痛でないものにします（例えば、フォームでは、タイピングを最小限に抑えます）。
• レスポンシブデザイン — レイアウトがモバイルで機能することを確認し、画像のダウンロードサイズを節約し、高解像度画面用の画像の提供について検討します。

最も一般的なモバイルプラットフォームは完全に機能的なスクリーンリーダーを持っています。これらはデスクトップのスクリーンリーダーとほとんど同じように機能しますが、キーの組み合わせではなくタッチジェスチャーを使用して主に操作される点が異なります。

主な 2 つを見てみましょう: Android の TalkBack と iOS の VoiceOver です。

TalkBack スクリーンリーダーは Android オペレーティングシステムに組み込まれています。

オンにするには、スマートフォンのモデルと Android バージョンを調べて、TalkBack メニューの場所を探します。これは Android のバージョンやスマートフォンのモデルによっても大きく違います。あるスマートフォンメーカー(Samusung など)では、最新の機種で TalkBack がなくて、代わりに独自のスクリーンリーダーを選んでいることもあります。

TalkBack メニューが見つかったら、スライダースイッチを押してオンにします。画面に表示される追加の指示に従います。

TalkBack がオンになっているとき、あなたの Android 端末の基本的なコントロールは少し違います。例えば、

1. アプリをシングルタップするとそれが選択され、端末はそのアプリが何かを読み上げます。
2. 左右にスワイプすると、アプリ間、またはコントロールバーにいる場合はボタンやコントロールの間を移動します。端末は各オプションを読み上げます。
3. どこでもダブルタップするとアプリが開いたり、オプションが選択されたりします。
4. また、「タッチで探索」することもできます — ドラッグ（指を画面に置いたまま移動）すると、端末は移動先のさまざまなアプリや項目を読み上げます。

TalkBack をオフにしたい場合は、

1. 上記のジェスチャーを使用して [設定] アプリに移動します。
2. [ユーザー補助] > [TalkBack] に移動します。
3. スライダースイッチに移動してアクティブにすると、オフになります。

TalkBack ジェスチャーのより完全なリストについては、TalkBack ジェスチャーを利用するを参照してください。

端末のロックを解除する

TalkBack がオンになっているとき、端末のロック解除は少し違います。

ロック画面の下から上に 2 本指でスワイプすることができます。端末のロックを解除するためのパスコードまたはパターンを設定している場合は、関連する入力画面に移動して入力します。

画面の中央下部にある [ロック解除] ボタンをタッチで探索してから、ダブルタップすることもできます。

グローバルメニューとローカルメニュー

TalkBack を使用すると、端末上のどこに移動しても、グローバルおよびローカルのコンテキストメニューにアクセスできます。前者は端末全体に関するグローバルオプションを提供し、後者は現在のアプリや画面だけに関するオプションを提供します。

これらのメニューにアクセスするには、

1. すばやく下にスワイプしてから右にスワイプしてグローバルメニューにアクセスします。
2. すばやく上にスワイプしてから右にスワイプしてローカルメニューにアクセスします。
3. 左右にスワイプしてさまざまなオプションを切り替えます。
4. 必要なオプションを選択したら、ダブルタップしてそのオプションを選択します。

グローバルおよびローカルのコンテキストメニューで使用可能なすべてのオプションの詳細については、グローバル コンテキストメニューとローカル コンテキスト メニューを使うを参照してください。

ウェブページのブラウジング

ウェブブラウザーでローカルコンテキストメニューを使用して、見出し、フォームコントロール、リンク、行単位の移動などウェブページを移動するためのオプションを見つけることができます。

例えば、TalkBack をオンにした場合、

1. ウェブブラウザーを開きます。
2. URL バーをアクティブにします。
3. Ebbc.co.uk のフロントページのように、見出しがたくさんあるウェブページを入力します。URL のテキストを入力するには、
   • URL バーが得られるまで左右にスワイプしてから、ダブルタップして URL バーを選択します。
   • 目的の文字が得られるまで仮想キーボードに指を置いたまま動かしてから、指を離して入力します。これを各文字について繰り返します。
   • 終わったら、 Enter キーを見つけて押します。
4. 左右にスワイプすると、ページ上のさまざまな項目間を移動できます。
5. 連続した動きで上にスワイプしてから右にスワイプして、ローカルコンテキストメニューに入ります。
6. [見出しとランドマーク] オプションが見つかるまで右にスワイプします。
7. ダブルタップして選択します。これで、見出しと ARIA のランドマークの間を移動するために左右にスワイプすることができます。
8. デフォルトモードに戻るには、上にスワイプしてから右にスワイプしてローカルコンテキストメニューに再度入り、[デフォルト] を選択してからダブルタップしてアクティブにします。

VoiceOver のモバイル版は iOS オペレーティングシステムに組み込まれています。

VoiceOver　を有効にするには、「設定」アプリで アクセシビリティ > VoiceOver を選択します。　VoiceOver のスライダーを押して有効にします（このページには他にも　VoiceOver　関連のオプションがいくつかあります）。

VoiceOver が有効になると、iOS の基本的なコントロールジェスチャーは次のように少し違います。

1. シングルタップすると、タップした項目が選択されます。端末はあなたがタップした項目を読み上げるでしょう。
2. 左右にスワイプして項目間を移動したり、画面上で指をスライドさせてさまざまな項目間を移動したりして、画面上の項目を移動することもできます（必要な項目が見つかったら、指を離して選択できます）。
3. 選択した項目をアクティブにする（例えば、選択したアプリを開く）には、画面上のどこでもダブルタップします。
4. 3 本指でスワイプしてページをスクロールします。
5. カメラアプリで写真を撮るなど、状況に応じたアクションを実行するには、2 本指でタップします。

もう一度オフにするには、上記のジェスチャを使用して [設定] > [一般] > [アクセシビリティ] > [VoiceOver] に戻り、[VoiceOver] スライダをオフに切り替えます。

端末のロック解除

端末のロックを解除するには、通常どおりホームボタンを押す（またはスワイプする）必要があります。パスコードが設定されている場合は、上で説明したようにスワイプ/スライドして各番号を選択し、次に正しい番号を見つけたらダブルタップして各番号を入力できます。

ローターを使用する

VoiceOver がオンになっているとき、ローターと呼ばれるナビゲーション機能を使えます。それは素早く多くの一般的で役に立つオプションから選ぶことを可能にします。それを使用するには、

1. ダイヤルを回すように、画面上で 2 本の指をひねります。あなたがさらにひねるにつれて、各オプションを読み上げるでしょう。あなたは行ったり来たりしてオプションを切り替えることができます。
2. あなたが望むオプションを見つけたら、
   • 指を離して選択します。
   • それが（音量や話す速度のような）値を反復できるオプションである場合は、選択した項目の値を増減するために上下にスワイプすることができます。

ローターで利用可能なオプションは状況依存型です — それらはどのアプリやビューにいるかによって異なります（例については下記を参照）。

ウェブページの閲覧

VoiceOver を使ったウェブ閲覧を試してみましょう。

1. ウェブブラウザーを開きます。
2. URL バーをアクティブにします。
3. bbc.co.uk のフロントページのように、見出しがたくさんあるウェブページを入力します。URL のテキストを入力するには、
   • URL バーが得られるまで左右にスワイプしてダブルタップし、URL バーを選択します。
   • 各文字について、目的の文字が得られるまで仮想キーボードに指を置いたまま動かしてから、指を離して選択します。ダブルタップして入力します。
   • 終わったら、 Enter キーを見つけて押します。
4. 左右にスワイプすると、ページ上の項目間を移動できます。項目をダブルタップして選択することができます（例えば、リンクをたどる）。
5. デフォルトでは、選択されたローターオプションは話す速度です。現在は上下にスワイプして話す速度を上げ下げできます。
6. 今、ダイヤルのように 2 本指で画面を回転させてローターを表示し、ローターのオプション間を移動します。利用可能なオプションの例をいくつか示します。
   • 話す速度: 話す速度を変更します。
   • コンテナー: ページ上のさまざまな意味論的コンテナー間を移動します。
   • 見出し: ページ上の見出し間を移動します。
   • リンク: ページ上のリンク間を移動します。
   • フォームコントロール: ページ上のフォームコントロール間を移動します。
   • 言語: 利用可能な場合は、さまざまな翻訳間を移動します。
7. 見出しを選択します。これで、上下にスワイプしてページ上の見出し間を移動できます。

注: 利用可能な VoiceOver ジェスチャおよび iOS でのアクセシビリティテストに関するその他のヒントを網羅した詳細なリファレンスについては、VoiceOver を使用して端末のアクセシビリティをテストする（英語）を参照してください。

CSS および JavaScript のアクセシビリティの記事では、特定の種類の制御機構に固有のイベントの概念を調べました（マウスに特有のイベントを参照）。要約すると、他の制御機構は関連する機能をアクティブにできないため、これらはアクセシビリティの問題を引き起こします。

例えば、click イベントはアクセシビリティの点で優れています — 関連付けられているイベントハンドラは、ハンドラが設定されている要素をクリックするか、タブ移動して Enter / Return キーを押すか、タッチスクリーン端末でタップすることで起動できます。simple-button-example.html の例を試してみてください（ライブで動いているのを見る）。

あるいは、mousedown や mouseup のようなマウス固有のイベントは問題を引き起こします — それらのイベントハンドラはマウス以外の制御を使って呼び出すことはできません。

キーボードまたはタッチで、simple-box-drag.html の例を制御しようとすると、問題が発生します（ライブで例を見る）。これは、次のようなコードを使用しているために発生します。

div.onmousedown = () => {
  initialBoxX = div.offsetLeft;
  initialBoxY = div.offsetTop;
  movePanel();
};

document.onmouseup = stopMove;

他の形式の制御を有効にするには、異なるが同等のイベントを使用する必要があります — 例えば、タッチイベントはタッチ画面装置で機能します。

div.ontouchstart = (e) => {
  initialBoxX = div.offsetLeft;
  initialBoxY = div.offsetTop;
  positionHandler(e);
  movePanel();
};

panel.ontouchend = stopMove;

マウスイベントとタッチイベントを一緒に使用する方法を示す簡単な例を示しました — multi-control-box-drag.html を参照してください（この例もライブで見てください）。

レスポンシブデザインは、画面のサイズや解像度などの要因に応じて、レイアウトやその他のアプリの機能を動的に変更することです。だから、さまざまな種類の端末のユーザーにとって使用可能でアクセス可能です。

特に、モバイルに関して対処する必要がある最も一般的な問題は次のとおりです。

• モバイル端末用のレイアウトの適合性。例えば、複数列のレイアウトは狭い画面ではうまくいきませんし、見やすくするためにテキストサイズを大きくする必要があるかもしれません。このような問題は、メディアクエリー、ビューポート、フレックスボックスなどの技術を使用してレスポンシブレイアウトを作成することで解決できます。
• ダウンロードした画像サイズを節約する。一般的に、小型画面の端末は、デスクトップと同等の大きさの画像を必要としませんし、低速のネットワーク接続上にある可能性が高くなります。したがって、必要に応じて狭い画面の端末に小さい画像を提供することが賢明です。レスポンシブ画像のテクニックを使用してこれを扱えます。
• 高解像度について考える。多くのモバイル端末は高解像度の画面を持っているため、ディスプレイがくっきりと鮮明に見えるようにするために、より高解像度の画像が必要です。ここでも、レスポンシブ画像テクニックを使用して、必要に応じて画像を提供できます。さらに、SVG ベクター画像フォーマットを使用して多くの画像要件を満たすことができます。これは今日のブラウザー間で十分にサポートされています。SVG はファイルサイズが小さく、表示されているサイズに関係なく鮮明に保たれます（詳細はウェブにベクターグラフィックスを追加するを参照）。

モバイルでサイトにアクセスしやすくするために考慮すべき他の重要な問題があります。ここにその一部を列挙しましたが、私たちがそれらを考えるときにはさらに追加します。

ズームを無効にしない

ビューポートを使用すると、ズームを無効にすることができます。常にリサイズ可能にして、<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) の入力では、日時を選択するための適切なピッカーを表示します。

デスクトップとは別の解決策を提供したい場合は、機能検出を使用して、モバイル端末に常に別のマークアップを提供できます。さまざまな入力タイプの検出に関する生の情報については入力タイプ（英語）を参照してください。また、より多くの情報については機能検出の記事をチェックしてください。

この記事では、モバイルのアクセシビリティ固有の一般的な問題とその解決方法について詳しく説明しました。また、アクセシビリティテストを支援するために、最も一般的なスクリーンリーダーの使い方を紹介しました。

• モバイルウェブ開発のためのガイドライン（英語） — モバイルウェブデザインのためのさまざまな技術を網羅した Smashing Magazine の記事のリスト。
• サイトをタッチ端末で機能させる（英語） — タッチイベントを使用してモバイル端末で対話を機能させるための便利な記事。

• 前のページ
• Overview: アクセシビリティ
• 次のページ