O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
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
Próximos SlideShares
Carregando em…5
×

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

6.308 visualizações

Publicada em

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

Publicada em: Design
  • Seja o primeiro a comentar

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

×