前置き
Webアプリのアクセシビリティは業務上(少しだけ)意識しますが、モバイル特有のアクセシビリティについては知識がなく、気になったのでまとめました。
調べてみると、MDNにモバイルのアクセシビリティと題したページがあったので読み込んでみます。
該当ページ
MDN Mobile accessibility
日本語ページ
目的
該当ページの目的として、
モバイル端末のアクセシビリティにはどのような問題があるかを理解する、そしてそれを克服する
というものが設定されていました。
なので、該当ページを読めばモバイル端末の問題を理解・克服できるようです。
Accessibility on mobile devices
最近のモバイル端末では、完全な機能を備えたウェブサイトを扱うことができ、主要なプラットフォームには、スクリーンリーダーまで組み込まれていて視覚障害者でも利用できるようになっている。
また、最近のモバイルブラウザではWAI-ARIAもサポートされている。
つまり、この章で言われているのは
モバイルで基本的なウェブサイトをアクセシブルにするには、一般的なWebデザインとアクセシビリティのベストプラクティスに従うだけで良い。
ただしモバイル特有で考慮しないといけない例外がいくつかある、それが以下
- 制御機能
ボタンなどのインターフェース操作は、デスクトップPCのマウスクリック/キーボードと同様の操作ができること(主に画面タッチで) - ユーザー入力
できる限りフォームの入力を最小限にする - レスポンシブデザイン
モバイルでもレイアウトが機能すること、また、画像のダウンロードサイズも最小限に抑えること
(つまりデスクトップPCと同じサイズの画像を表示するわけじゃなくて、モバイル版に適したサイズに出しわけしなさいということ)
※考慮しないといけない3点についての詳細は別で見出しを用意されていたのでそちらで記載します
Summary of screen reader testing on Android and iOS
iOSとAndroidでのスクリーンリーダーの使い方について書かれています。
iOSはVoiceOver、AndroidはTalkBackの使い方が記載されていますが、本記事では割愛します。
Control mechanisms
CSSやJavaScriptでは、特定の種類の制御機構固有のイベントがある。
例えば、mousedownやmouseupのようなマウス固有のイベントを使用した場合、マウス以外の制御で呼び出すことはできない。このような制御機構はアクセシビリティに問題を起こしてしまう。
逆に、clickイベントはアクセシビリティの点で優れている。
要素をクリックするか、タブ移動してフォーカスが要素に合っている状態でEnter/Returnを押すか、画面のタッチ全ての制御でイベントを呼び出すことができる。
Responsive design
レスポンシブデザインとは、画面のサイズや解像度によってレイアウトなどの機能を動的に変更すること。様々な種類の端末で使用可能である必要がある。
その中でも特に対処する必要がある問題は以下
- モバイル端末用のレイアウトの適合性
例えば狭い画面では複数カラムのレイアウトはうまく機能しない。
また、読みやすいようにテキストサイズを大きくしないといけない。
→このような問題はメディアクエリやビューポート、フレックスボックスなどの技術を使用することで解決できる - ダウンロードした画像サイズを節約する
一般的にモバイル端末ではデスクトップと同等の大きさの画像を必要としない。また、低速のネットワーク接続である可能性が高い。
そのため、適宜小さい画像を提供するのが賢明である。 - 高解像度の対応
多くのモバイル端末は高解像度画像を持っているため、ディスプレイがくっきりと鮮明に見えるようにするためにより高解像度の画像が必要。
(2つ目と3つ目の問題は、アプリ側だけの問題ではなく画像を提供する側もアクセシビリティを考慮した用意が必要ということ)
Specific mobile considerations
特定のモバイルに関する考慮事項
- ズームを無効にしない
ビューポートを使用すると、ズームを無効にすることができる
<meta name="viewport" content="width=device-width; user-scalable=yes" />
ただし、なるべくuser-scalable=noは使用しないようにする。
多くのユーザがコンテンツを閲覧するのにズームを使用しており、その機能を無効化するのは良くない手段。
もしズームを無効にしたいと感じるなら、UIを壊さない方法でテキストサイズを大きくコントロールするなど、同等の別手段を取るべき。
- メニューにアクセスできるようにする
モバイル端末では画面がとても狭いため、ナビゲーションメニューの代わりにハンバーガーメニュー
を用意してメニューにアクセスできるようにする必要がある。
User input
基本的に、デスクトップPCに比べて文字入力は煩わしい、そのため文字入力の量は最低限にするのが好ましい。
それに対応する一つの選択肢として、<select>メニューを提供する。
選択肢に該当するものがない場合、その他を選択させてその場合は内容を入力するテキストフィールドを表示する。
例：
通常選択ではテキストフィールドはなし
Otherを選択した際はテキストフィールドを表示
またテキスト入力をするにしても、入力タイプによって適切な仮想キーボードを切り分けるとよりアクセシビリティに良いとのことです。
例えば、数値入力ならデフォルトでテンキー表示の仮想キーボードが表示されるようにするなど
(当たり前のようなことですが、自分が実装する際は意識しないといけないと思いました。)
まとめ
読んでみるとそんなことは当たり前のことだろうと思うこともありましたが、実際レビュー時に意識して見れているかというとそうではないなと思いました。
関連情報としてモバイル開発のガイドラインなど、以下のリンクが貼られていたので次回はこちらを読んでみてまとめてみるのもいいなと思っています。
NCDC株式会社( ncdc.co.jp/ )のエンジニアチームです。 募集中のエンジニアのポジションや、採用している技術スタックの紹介などはこちら( github.com/ncdcdev/recruitment )をご覧ください！ ※エンジニア以外も記事を投稿することがあります
Discussion