Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
15分でわかるモバイルアクセシビリティ
Search
Rikiya Ihara / magi
August 01, 2016
0
22
15分でわかるモバイルアクセシビリティ
Rikiya Ihara / magi
August 01, 2016
Tweet
Share
More Decks by Rikiya Ihara / magi
See All by Rikiya Ihara / magi
最速[要出典]アクセシビリティチェック
magi1125
2
200
デザインプリンシプルのつくりかた(freee技術の日)
magi1125
8
6.6k
Webアプリケーションアクセシビリティ解説ウェビナー「8章 アクセシブルなUI設計の原理を導く」
magi1125
1
370
ゼロから学ぶWebアクセシビリティ~導入編~
magi1125
6
2.5k
アクセシビリティに関わる職種とは?〜freee編〜
magi1125
0
21k
アクセシビリティの効果測定
magi1125
1
8.1k
電子決済等代行事業者協会 アクセシビリティ勉強会「Webアクセシビリティの概要」
magi1125
0
15k
noteアクセシビリティ勉強会 〜画像編〜
magi1125
0
6.8k
自社サービスのアクセシビリティ向上、良いパターンとアンチパターン
magi1125
0
6.9k
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
Bash Introduction
62gerente
610
210k
A Tale of Four Properties
chriscoyier
158
23k
Typedesign – Prime Four
hannesfritz
40
2.5k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Into the Great Unknown - MozCon
thekraken
35
1.6k
GitHub's CSS Performance
jonrohan
1030
460k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Transcript
15分でわかる モバイルアクセシビリティ
2 W3C: Mobile Accessibility https://www.w3.org/TR/mobile-accessibility-mapping/
WCAG 2.0 などをモバイルに適用するには How WCAG 2.0 and Other W3C/WAI Guidelines
Apply to Mobile WCAG2.0は抽象的で特定技術に依存しない、 よってベースはあくまでWCAG 2.0 モバイルウェブサイト、モバイルウェブアプリ、 ネイティブアプリ、ハイブリッドアプリが対象 3
1. はじめに 4
よくある質問 モバイルサイトやアプリではどうすれば? Webとネイティブで違いはあるのか? なにか特別な対応が必要なのか? 5
回答:やることは同じ 現実にはカテゴリ間の絶対的な差はない デスクトップにタッチスクリーン搭載 モバイルにキーボードやマウスが繋がる レスポンシブ、PC上でもモバイル幅にできる モバイルOSがラップトップでも使われる
デスクトップのUIはモバイルでも活用: テキスト、リンク、表、ボタン、メニューなど 6
回答:That said... 「とはいえモバイルデバイスにおいては、 典型的なデスクトップ/ラップトップにおける アクセシビリティの問題とは異なるものが 入り混じってきます」 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で設定したシステムフォントを反映する 12
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 フォーカス順序(レベルA) 2.4.7 フォーカスの可視化(レベルAA) 17
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 レイアウトの一貫性 アクセシビリティ文脈での「一貫性」 特定の画面サイズ✕向きにおける 一連の画面・ページ間で一貫しているべき 異なるデバイス、画面サイズ、向きの ビュー同士の一貫性の話ではない
それはマルチデバイスエクスペリエンスとか コンテンツパリティの話 30
4.4 同じアクションを実行する要素のグループ化 31
4.4 同じアクションを実行する要素のグループ化 タップエリアは大きい方がいいので リンクラベルやアイコンは同じグループにまとめる 冗長なフォーカスターゲットが減る スクリーンリーダー、キーボード、 スイッチのユーザーにもメリット
32
4.5 アクション要素であることを明示 33 ? http://www.nxworld.net/inspiration/ghost-button-design-showcase.html
4.5 アクション要素であることを明示 34
4.5 アクション要素であることを明示 見た目に明らかにするには (慣例的な)形、アイコン、色、スタイル、配置 複数の視覚的な特徴を用いる プログラムから明らかにするには アクセシブルネームを検出可能にする
Web:ちゃんとマークアップ+WAI-ARIA ネイティブ:UIにテキスト情報を付与する 35
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
4.6ジェスチャーのインストラクションの提供 37 http://www.blessthisstuff.com/stuff/technology/apps/clear-app-for-iphone/
4.6ジェスチャーのインストラクションの提供 ジェスチャーは発見/実行/記憶が難しいので オーバーレイ、ツールチップ、チュートリアル などでのインストラクションを用意する 初回起動などのツアー時だけでなく、 後から呼び出し可能にする それ自体を簡単に発見でき、アクセス可能にする
38
5.「原則4:堅牢」関連 39
5.1 入力データに応じた仮想キーボードの設定 40 https://developer.apple.com/library/ios/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/KeyboardManagement/KeyboardManagement.html
5.1 入力データに応じた仮想キーボードの設定 正しいフォーマットで入力するために 入力内容に応じた仮想キーボードを設定する 41
5.2 データ入力のための簡単な方法を提供 42 https://www.etsy.com/listing/170113557/head-pointer-and-stylus
5.2 データ入力のための簡単な方法を提供 モバイルでの直接入力は時間がかかるので セレクトメニュー、ラジオボタン、 チェックボックスを提供する 自動的に既知の情報 (例えば、日付、時間、場所)を入力しておく 43
モバイルアクセシビリティ:抄訳版 44 http://qiita.com/magi1125/items/2c2e9d78c6db2724a826
ピンク本にもそこそこ載ってます 45 https://www.amazon.co.jp/dp/4862462650
ありがとうございました 46