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