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

Transcript

1. 15分でわかる モバイルアクセシビリティ
2. 2 W3C: Mobile Accessibility https://www.w3.org/TR/mobile-accessibility-mapping/
3. WCAG 2.0 などをモバイルに適用するには How WCAG 2.0 and Other W3C/WAI Guidelines Apply to Mobile  WCAG2.0は抽象的で特定技術に依存しない、 よってベースはあくまでWCAG 2.0  モバイルウェブサイト、モバイルウェブアプリ、 ネイティブアプリ、ハイブリッドアプリが対象 3
4. 1. はじめに 4
5. よくある質問 モバイルサイトやアプリではどうすれば? Webとネイティブで違いはあるのか? なにか特別な対応が必要なのか? 5
6. 回答：やることは同じ 現実にはカテゴリ間の絶対的な差はない  デスクトップにタッチスクリーン搭載  モバイルにキーボードやマウスが繋がる  レスポンシブ、PC上でもモバイル幅にできる  モバイルOSがラップトップでも使われる  デスクトップのUIはモバイルでも活用： テキスト、リンク、表、ボタン、メニューなど 6
7. 回答：That said... 「とはいえモバイルデバイスにおいては、 典型的なデスクトップ/ラップトップにおける アクセシビリティの問題とは異なるものが 入り混じってきます」 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. モバイルアクセシビリティ：抄訳版 44 http://qiita.com/magi1125/items/2c2e9d78c6db2724a826
45. ピンク本にもそこそこ載ってます 45 https://www.amazon.co.jp/dp/4862462650
46. ありがとうございました 46