2016年8月に株式会社サイバーエージェントで開催された社内勉強会で使用したスライドです。

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

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

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

4. 1. はじめに
4

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

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

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

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

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

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

11. 2.2ズーム/拡大
11

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

34. 4.5アクション要素であることを明示
34

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

36. 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

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

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

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

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

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

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

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

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

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

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