Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
15分でわかる
モバイルアクセシビリティ
2
W3C:MobileAccessibility
https://www.w3.org/TR/mobile-accessibility-mapping/
WCAG2.0などをモバイルに適用するには
HowWCAG2.0andOtherW3C/WAI
GuidelinesApplytoMobile
 WCAG2.0は抽象的で特定技術に依存しない、
よってベースはあくまでWCAG2.0
 モバ...
1. はじめに
4
よくある質問
モバイルサイトやアプリではどうすれば?
Webとネイティブで違いはあるのか?
なにか特別な対応が必要なのか?
5
回答:やることは同じ
現実にはカテゴリ間の絶対的な差はない
 デスクトップにタッチスクリーン搭載
 モバイルにキーボードやマウスが繋がる
 レスポンシブ、PC上でもモバイル幅にできる
 モバイルOSがラップトップでも使われる
 デス...
回答:Thatsaid...
「とはいえモバイルデバイスにおいては、
典型的なデスクトップ/ラップトップにおける
アクセシビリティの問題とは異なるものが
入り混じってきます」
7
2.「原則1:知覚可能」関連
8
2.1小さな画面サイズ
9
http://ascii.jp/elem/000/001/134/1134123/
2.1小さな画面サイズ
一度に見わたせる情報量に制限があるので
 モバイル版を作る、レスポンシブにする
 要素の大きさを適切にする(後述)
 リンクを表示幅いっぱいに広げる
 フォームのラベルは入力欄の上に置く
10
2.2ズーム/拡大
11
2.2ズーム/拡大
小さい画面は拡大したいので
 ピンチズームを殺さない、
user-scalableとmaximum-scaleは封印
 文字サイズ拡大でのリフローのほうがベター、
文字サイズ変更ボタンを置く……?
 OSで設定したシ...
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フォーカス順序(レベル...
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レイアウトの一貫性
アクセシビリティ文脈での「一貫性」
 特定の画面サイズ✕向きにおける
一連の画面・ページ間で一貫しているべき
 異なるデバイス、画面サイズ、向きの
ビュー同士の一貫性の話ではない
 それはマルチデバイスエクスペ...
4.4同じアクションを実行する要素のグループ化
31
4.4同じアクションを実行する要素のグループ化
タップエリアは大きい方がいいので
 リンクラベルやアイコンは同じグループにまとめる
 冗長なフォーカスターゲットが減る
 スクリーンリーダー、キーボード、
スイッチのユーザーにもメリット
...
4.5アクション要素であることを明示
33
?
http://www.nxworld.net/inspiration/ghost-button-design-showcase.html
4.5アクション要素であることを明示
34
4.5アクション要素であることを明示
見た目に明らかにするには
 (慣例的な)形、アイコン、色、スタイル、配置
 複数の視覚的な特徴を用いる
プログラムから明らかにするには
 アクセシブルネームを検出可能にする
 Web:ちゃんとマ...
havelog.ayumusato.com
36
https://havelog.ayumusato.com/develop/a11y/e710-ios_a11y_guidelines.html.html
https://havelog.ayu...
4.6ジェスチャーのインストラクションの提供
37
http://www.blessthisstuff.com/stuff/technology/apps/clear-app-for-iphone/
4.6ジェスチャーのインストラクションの提供
ジェスチャーは発見/実行/記憶が難しいので
 オーバーレイ、ツールチップ、チュートリアル
などでのインストラクションを用意する
 初回起動などのツアー時だけでなく、
後から呼び出し可能にする
...
5.「原則4:堅牢」関連
39
5.1入力データに応じた仮想キーボードの設定
40
https://developer.apple.com/library/ios/documentation/StringsTextFonts/Conceptual/TextAndWebiPho...
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
Upcoming SlideShare
Loading in …5
×

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

6,387 views

Published on

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

Published in: Design
  • Be the first to comment

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

  1. 1. 15分でわかる モバイルアクセシビリティ
  2. 2. 2 W3C:MobileAccessibility https://www.w3.org/TR/mobile-accessibility-mapping/
  3. 3. WCAG2.0などをモバイルに適用するには HowWCAG2.0andOtherW3C/WAI GuidelinesApplytoMobile  WCAG2.0は抽象的で特定技術に依存しない、 よってベースはあくまでWCAG2.0  モバイルウェブサイト、モバイルウェブアプリ、 ネイティブアプリ、ハイブリッドアプリが対象 3
  4. 4. 1. はじめに 4
  5. 5. よくある質問 モバイルサイトやアプリではどうすれば? Webとネイティブで違いはあるのか? なにか特別な対応が必要なのか? 5
  6. 6. 回答:やることは同じ 現実にはカテゴリ間の絶対的な差はない  デスクトップにタッチスクリーン搭載  モバイルにキーボードやマウスが繋がる  レスポンシブ、PC上でもモバイル幅にできる  モバイルOSがラップトップでも使われる  デスクトップのUIはモバイルでも活用: テキスト、リンク、表、ボタン、メニューなど 6
  7. 7. 回答:Thatsaid... 「とはいえモバイルデバイスにおいては、 典型的なデスクトップ/ラップトップにおける アクセシビリティの問題とは異なるものが 入り混じってきます」 7
  8. 8. 2.「原則1:知覚可能」関連 8
  9. 9. 2.1小さな画面サイズ 9 http://ascii.jp/elem/000/001/134/1134123/
  10. 10. 2.1小さな画面サイズ 一度に見わたせる情報量に制限があるので  モバイル版を作る、レスポンシブにする  要素の大きさを適切にする(後述)  リンクを表示幅いっぱいに広げる  フォームのラベルは入力欄の上に置く 10
  11. 11. 2.2ズーム/拡大 11
  12. 12. 2.2ズーム/拡大 小さい画面は拡大したいので  ピンチズームを殺さない、 user-scalableとmaximum-scaleは封印  文字サイズ拡大でのリフローのほうがベター、 文字サイズ変更ボタンを置く……?  OSで設定したシステムフォントを反映する 12
  13. 13. 2.3コントラスト 13 http://techable.jp/archives/19617
  14. 14. 2.3コントラスト まぶしい環境で使ったりもするので  WCAG2.0達成基準のコントラスト比に対応する  デフォルトサイズ: 4.5:1(7:1)  120%bold/ 150%: 3:1(4.5:1) 14
  15. 15. 3.「原則2:操作可能」関連 15
  16. 16. 3.1タッチデバイス用のキーボードコントロール 16 http://ascii.jp/elem/000/000/706/706024/
  17. 17. 3.1タッチデバイス用のキーボードコントロール 物理キーボードを使いたい人もいるので  キーボードで操作可能にする  2.1.1キーボード(レベルA)  2.1.2キーボードトラップなし(レベルA)  2.4.3フォーカス順序(レベルA)  2.4.7フォーカスの可視化(レベルAA) 17
  18. 18. 3.2タッチターゲットのサイズと間隔 18
  19. 19. 3.2タッチターゲットのサイズと間隔 小さすぎたり近すぎると操作をミスるので  タッチターゲットを9mm✕9mm以上にする  マージンを設け、隣接させない 19
  20. 20. 3.3タッチスクリーンジェスチャー 20 http://www.jikanryoko.com/mino.htm
  21. 21. 3.3タッチスクリーンジェスチャー 正確なジェスチャーが難しい場合があるので  可能な限り簡単なジェスチャーにする  単純なタップやスワイプでも代替可能にする  mouseupかtouchendで発火させる 21
  22. 22. 3.4機器操作のジェスチャー 22 http://iphone.ascii.jp/2013/11/25/as131125a/
  23. 23. 3.4機器操作のジェスチャー 振ったり傾けたりが難しい場合があるので  タッチ操作とキーボード操作でも代替可能にする 23
  24. 24. 3.5ボタンにアクセスしやすい配置 24 https://itunes.apple.com/jp/app/path/id403639508?mt=8
  25. 25. 3.5ボタンにアクセスしやすい配置 利き腕だけで使えるとは限らないので  なるべく柔軟な使い方が可能な配置を心がける (訳注:OSのデザインガイドラインを参考に) 25
  26. 26. 4.「原則3:理解可能」関連 26
  27. 27. 4.1画面の向きの変更(縦/横) 27 http://www.cycling-ex.com/2014/07/ingress_toptube_bag.html
  28. 28. 4.1画面の向きの変更(縦/横) デバイスの向きが固定の場合があるので  両方の向きをサポートする  向きを変えてから該当画面に戻れるようにする  向きをプログラムで検出可能にする 28
  29. 29. 4.2レイアウトの一貫性 29 http://www.unic.com/en/referenzen/schweizerische-post-relaunch-website.html
  30. 30. 4.2レイアウトの一貫性 アクセシビリティ文脈での「一貫性」  特定の画面サイズ✕向きにおける 一連の画面・ページ間で一貫しているべき  異なるデバイス、画面サイズ、向きの ビュー同士の一貫性の話ではない  それはマルチデバイスエクスペリエンスとか コンテンツパリティの話 30
  31. 31. 4.4同じアクションを実行する要素のグループ化 31
  32. 32. 4.4同じアクションを実行する要素のグループ化 タップエリアは大きい方がいいので  リンクラベルやアイコンは同じグループにまとめる  冗長なフォーカスターゲットが減る  スクリーンリーダー、キーボード、 スイッチのユーザーにもメリット 32
  33. 33. 4.5アクション要素であることを明示 33 ? http://www.nxworld.net/inspiration/ghost-button-design-showcase.html
  34. 34. 4.5アクション要素であることを明示 34
  35. 35. 4.5アクション要素であることを明示 見た目に明らかにするには  (慣例的な)形、アイコン、色、スタイル、配置  複数の視覚的な特徴を用いる プログラムから明らかにするには  アクセシブルネームを検出可能にする  Web:ちゃんとマークアップ+WAI-ARIA  ネイティブ:UIにテキスト情報を付与する 35
  36. 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. 37. 4.6ジェスチャーのインストラクションの提供 37 http://www.blessthisstuff.com/stuff/technology/apps/clear-app-for-iphone/
  38. 38. 4.6ジェスチャーのインストラクションの提供 ジェスチャーは発見/実行/記憶が難しいので  オーバーレイ、ツールチップ、チュートリアル などでのインストラクションを用意する  初回起動などのツアー時だけでなく、 後から呼び出し可能にする  それ自体を簡単に発見でき、アクセス可能にする 38
  39. 39. 5.「原則4:堅牢」関連 39
  40. 40. 5.1入力データに応じた仮想キーボードの設定 40 https://developer.apple.com/library/ios/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/KeyboardManagement/KeyboardManagement.html
  41. 41. 5.1入力データに応じた仮想キーボードの設定 正しいフォーマットで入力するために  入力内容に応じた仮想キーボードを設定する 41
  42. 42. 5.2データ入力のための簡単な方法を提供 42 https://www.etsy.com/listing/170113557/head-pointer-and-stylus
  43. 43. 5.2データ入力のための簡単な方法を提供 モバイルでの直接入力は時間がかかるので  セレクトメニュー、ラジオボタン、 チェックボックスを提供する  自動的に既知の情報 (例えば、日付、時間、場所)を入力しておく 43
  44. 44. モバイルアクセシビリティ:抄訳版 44http://qiita.com/magi1125/items/2c2e9d78c6db2724a826
  45. 45. ピンク本にもそこそこ載ってます 45https://www.amazon.co.jp/dp/4862462650
  46. 46. ありがとうございました 46

×