15分でわかるモバイルアクセシビリティ

15分でわかる
モバイルアクセシビリティ

2
W3C:MobileAccessibility
https://www.w3.org/TR/mobile-accessibility-mapping/

WCAG2.0などをモバイルに適用するには
HowWCAG2.0andOtherW3C/WAI
GuidelinesApplytoMobile
 WCAG2.0は抽象的で特定技術に依存しない、
よってベースはあくまでWCAG2.0
 モバイルウェブサイト、モバイルウェブアプリ、
ネイティブアプリ、ハイブリッドアプリが対象
3

よくある質問
モバイルサイトやアプリではどうすれば?
Webとネイティブで違いはあるのか?
なにか特別な対応が必要なのか?
5

回答：やることは同じ
現実にはカテゴリ間の絶対的な差はない
 デスクトップにタッチスクリーン搭載
 モバイルにキーボードやマウスが繋がる
 レスポンシブ、PC上でもモバイル幅にできる
 モバイルOSがラップトップでも使われる
 デスクトップのUIはモバイルでも活用：
テキスト、リンク、表、ボタン、メニューなど
6

回答：Thatsaid...
「とはいえモバイルデバイスにおいては、
典型的なデスクトップ/ラップトップにおける
アクセシビリティの問題とは異なるものが
入り混じってきます」
7

2.「原則1：知覚可能」関連
8

2.1小さな画面サイズ
9
http://ascii.jp/elem/000/001/134/1134123/

2.1小さな画面サイズ
一度に見わたせる情報量に制限があるので
 モバイル版を作る、レスポンシブにする
 要素の大きさを適切にする（後述）
 リンクを表示幅いっぱいに広げる
 フォームのラベルは入力欄の上に置く
10

2.2ズーム/拡大
小さい画面は拡大したいので
 ピンチズームを殺さない、
user-scalableとmaximum-scaleは封印
 文字サイズ拡大でのリフローのほうがベター、
文字サイズ変更ボタンを置く……?
 OSで設定したシステムフォントを反映する
12

2.3コントラスト
13
http://techable.jp/archives/19617

2.3コントラスト
まぶしい環境で使ったりもするので
 WCAG2.0達成基準のコントラスト比に対応する
 デフォルトサイズ： 4.5:1（7:1）
 120%bold/ 150%： 3:1（4.5:1）
14

3.「原則2：操作可能」関連
15

3.1タッチデバイス用のキーボードコントロール
16
http://ascii.jp/elem/000/000/706/706024/

3.1タッチデバイス用のキーボードコントロール
物理キーボードを使いたい人もいるので
 キーボードで操作可能にする
 2.1.1キーボード（レベルA）
 2.1.2キーボードトラップなし（レベルA）
 2.4.3フォーカス順序（レベルA）
 2.4.7フォーカスの可視化（レベルAA）
17

3.2タッチターゲットのサイズと間隔
18

3.2タッチターゲットのサイズと間隔
小さすぎたり近すぎると操作をミスるので
 タッチターゲットを9mm✕9mm以上にする
 マージンを設け、隣接させない
19

3.3タッチスクリーンジェスチャー
20
http://www.jikanryoko.com/mino.htm

3.3タッチスクリーンジェスチャー
正確なジェスチャーが難しい場合があるので
 可能な限り簡単なジェスチャーにする
 単純なタップやスワイプでも代替可能にする
 mouseupかtouchendで発火させる
21

3.4機器操作のジェスチャー
22
http://iphone.ascii.jp/2013/11/25/as131125a/

3.4機器操作のジェスチャー
振ったり傾けたりが難しい場合があるので
 タッチ操作とキーボード操作でも代替可能にする
23

3.5ボタンにアクセスしやすい配置
24
https://itunes.apple.com/jp/app/path/id403639508?mt=8

3.5ボタンにアクセスしやすい配置
利き腕だけで使えるとは限らないので
 なるべく柔軟な使い方が可能な配置を心がける
（訳注：OSのデザインガイドラインを参考に）
25

4.「原則3：理解可能」関連
26

4.1画面の向きの変更（縦/横）
27
http://www.cycling-ex.com/2014/07/ingress_toptube_bag.html

4.1画面の向きの変更（縦/横）
デバイスの向きが固定の場合があるので
 両方の向きをサポートする
 向きを変えてから該当画面に戻れるようにする
 向きをプログラムで検出可能にする
28

4.2レイアウトの一貫性
29
http://www.unic.com/en/referenzen/schweizerische-post-relaunch-website.html

4.2レイアウトの一貫性
アクセシビリティ文脈での「一貫性」
 特定の画面サイズ✕向きにおける
一連の画面・ページ間で一貫しているべき
 異なるデバイス、画面サイズ、向きの
ビュー同士の一貫性の話ではない
 それはマルチデバイスエクスペリエンスとか
コンテンツパリティの話
30

4.4同じアクションを実行する要素のグループ化
31

4.4同じアクションを実行する要素のグループ化
タップエリアは大きい方がいいので
 リンクラベルやアイコンは同じグループにまとめる
 冗長なフォーカスターゲットが減る
 スクリーンリーダー、キーボード、
スイッチのユーザーにもメリット
32

4.5アクション要素であることを明示
33
?
http://www.nxworld.net/inspiration/ghost-button-design-showcase.html

34

見た目に明らかにするには
 （慣例的な）形、アイコン、色、スタイル、配置
 複数の視覚的な特徴を用いる
プログラムから明らかにするには
 アクセシブルネームを検出可能にする
 Web：ちゃんとマークアップ＋WAI-ARIA
 ネイティブ：UIにテキスト情報を付与する
35

havelog.ayumusato.com
36
https://havelog.ayumusato.com/develop/a11y/e710-ios_a11y_guidelines.html.html
https://havelog.ayumusato.com/develop/a11y/e706-android_a11y_guidelines.html

4.6ジェスチャーのインストラクションの提供
37
http://www.blessthisstuff.com/stuff/technology/apps/clear-app-for-iphone/

4.6ジェスチャーのインストラクションの提供
ジェスチャーは発見/実行/記憶が難しいので
 オーバーレイ、ツールチップ、チュートリアル
などでのインストラクションを用意する
 初回起動などのツアー時だけでなく、
後から呼び出し可能にする
 それ自体を簡単に発見でき、アクセス可能にする
38

5.「原則4：堅牢」関連
39

5.1入力データに応じた仮想キーボードの設定
40
https://developer.apple.com/library/ios/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/KeyboardManagement/KeyboardManagement.html

5.1入力データに応じた仮想キーボードの設定
正しいフォーマットで入力するために
 入力内容に応じた仮想キーボードを設定する
41

5.2データ入力のための簡単な方法を提供
42
https://www.etsy.com/listing/170113557/head-pointer-and-stylus

5.2データ入力のための簡単な方法を提供
モバイルでの直接入力は時間がかかるので
 セレクトメニュー、ラジオボタン、
チェックボックスを提供する
 自動的に既知の情報
（例えば、日付、時間、場所）を入力しておく
43

モバイルアクセシビリティ：抄訳版
44http://qiita.com/magi1125/items/2c2e9d78c6db2724a826

ピンク本にもそこそこ載ってます
45https://www.amazon.co.jp/dp/4862462650

ありがとうございました
46

15分でわかるモバイルアクセシビリティ

More Related Content

15分でわかるモバイルアクセシビリティ