Submit Search
Upload
15分でわかるモバイルアクセシビリティ
•
10 likes
•
7,614 views
力也 伊原
Follow
2016年8月に株式会社サイバーエージェントで開催された社内勉強会で使用したスライドです。
Read less
Read more
Design
Report
Share
Report
Share
1 of 46
Download now
Download to read offline
Recommended
UXデザインに学ぶ、ターゲット心理の分析テクニック:2014年6月21日 リンクシェア フェア 2014
UXデザインに学ぶ、ターゲット心理の分析テクニック:2014年6月21日 リンクシェア フェア 2014
Yoshiki Hayama
なぜ、サイボウズでアクセシビリティなのか?
なぜ、サイボウズでアクセシビリティなのか?
力也 伊原
UXデザイン・UXリサーチってだいぶ広まったよね?
UXデザイン・UXリサーチってだいぶ広まったよね?
Yoshiki Hayama
“UXデザイン”のキモ『ユーザーインタビュー』の具体的テクニックを詳解!| UXデザイン基礎セミナー 第2回
“UXデザイン”のキモ『ユーザーインタビュー』の具体的テクニックを詳解!| UXデザイン基礎セミナー 第2回
Yoshiki Hayama
UXデザインの海外最新「UXトレンドレポート2022」を読んで、考える
UXデザインの海外最新「UXトレンドレポート2022」を読んで、考える
Yoshiki Hayama
実はできている!? Webアクセシビリティ
実はできている!? Webアクセシビリティ
力也 伊原
Lean UX
Lean UX
Dinesh Joshi
UX専門家から見た「Running Lean」の改善ポイント 〜「Lean Customer Development」と読み比べ〜:2015年10月9日 ...
UX専門家から見た「Running Lean」の改善ポイント 〜「Lean Customer Development」と読み比べ〜:2015年10月9日 ...
Yoshiki Hayama
Recommended
UXデザインに学ぶ、ターゲット心理の分析テクニック:2014年6月21日 リンクシェア フェア 2014
UXデザインに学ぶ、ターゲット心理の分析テクニック:2014年6月21日 リンクシェア フェア 2014
Yoshiki Hayama
なぜ、サイボウズでアクセシビリティなのか?
なぜ、サイボウズでアクセシビリティなのか?
力也 伊原
UXデザイン・UXリサーチってだいぶ広まったよね?
UXデザイン・UXリサーチってだいぶ広まったよね?
Yoshiki Hayama
“UXデザイン”のキモ『ユーザーインタビュー』の具体的テクニックを詳解!| UXデザイン基礎セミナー 第2回
“UXデザイン”のキモ『ユーザーインタビュー』の具体的テクニックを詳解!| UXデザイン基礎セミナー 第2回
Yoshiki Hayama
UXデザインの海外最新「UXトレンドレポート2022」を読んで、考える
UXデザインの海外最新「UXトレンドレポート2022」を読んで、考える
Yoshiki Hayama
実はできている!? Webアクセシビリティ
実はできている!? Webアクセシビリティ
力也 伊原
Lean UX
Lean UX
Dinesh Joshi
UX専門家から見た「Running Lean」の改善ポイント 〜「Lean Customer Development」と読み比べ〜:2015年10月9日 ...
UX専門家から見た「Running Lean」の改善ポイント 〜「Lean Customer Development」と読み比べ〜:2015年10月9日 ...
Yoshiki Hayama
これでわかる!Webアクセシビリティって?JIS X 8341-3って?
これでわかる!Webアクセシビリティって?JIS X 8341-3って?
Web Accessibility Infrastructure Committee (WAIC)
一般企業におけるWebアクセシビリティの進め方
一般企業におけるWebアクセシビリティの進め方
Web Accessibility Infrastructure Committee (WAIC)
Design Sprints for Awesome Teams: Running Design Sprints for Rapid Digital Pr...
Design Sprints for Awesome Teams: Running Design Sprints for Rapid Digital Pr...
Dana Mitroff Silvers
「UXデザインと組織論」に、正面から向きあってみた:2016年2月27日 『人間中心デザイン』HCD導入設計論
「UXデザインと組織論」に、正面から向きあってみた:2016年2月27日 『人間中心デザイン』HCD導入設計論
Yoshiki Hayama
HCDのはじめの一歩を体験しよう! ユーザーインタビューの基本:2016年8月5日 メンバーズキャリア
HCDのはじめの一歩を体験しよう! ユーザーインタビューの基本:2016年8月5日 メンバーズキャリア
Yoshiki Hayama
「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!
「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!
Yoshiki Hayama
UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
Yoshiki Hayama
UXデザインを速く! 軽く! そして根拠をもって、回せ! すばやいユーザー調査からつなげるアジャイルUX
UXデザインを速く! 軽く! そして根拠をもって、回せ! すばやいユーザー調査からつなげるアジャイルUX
Yoshiki Hayama
Webアクセシビリティ 海外の最新動向 2018
Webアクセシビリティ 海外の最新動向 2018
Makoto Ueki
あなたの手元の本よりいい方法がある! UXデザインのプロはこうやってユーザーのインサイトを確実に見つける
あなたの手元の本よりいい方法がある! UXデザインのプロはこうやってユーザーのインサイトを確実に見つける
Yoshiki Hayama
はじめてのUXデザイン、はじめてのデザイン思考 〜現場で使えるように〜:ISE Technical Conference 2018
はじめてのUXデザイン、はじめてのデザイン思考 〜現場で使えるように〜:ISE Technical Conference 2018
Yoshiki Hayama
Pirate Metrics 2.0 - AARRR
Pirate Metrics 2.0 - AARRR
Ash Maurya
UXデザインのはじめの一歩を体験しよう! ユーザーインタビュー、ユーザー心理分析の基本:DevLOVE関西
UXデザインのはじめの一歩を体験しよう! ユーザーインタビュー、ユーザー心理分析の基本:DevLOVE関西
Yoshiki Hayama
お客様の目を覚ませ! ついでに自分の目も覚ませ! デザイン思考のクライアントワークのプレセールス
お客様の目を覚ませ! ついでに自分の目も覚ませ! デザイン思考のクライアントワークのプレセールス
Yoshiki Hayama
WCAG 2.2で追加される達成基準
WCAG 2.2で追加される達成基準
Mitsue-Links Co.,Ltd. Accessibility Department
Working Together: the UX role in a Scaled Agile Framework
Working Together: the UX role in a Scaled Agile Framework
Kelley Howell
なぜ企業はWebアクセシビリティに取り組むのか?
なぜ企業はWebアクセシビリティに取り組むのか?
Web Accessibility Infrastructure Committee (WAIC)
UX & UI Design 101
UX & UI Design 101
Kevin Jackson
UX Design Process
UX Design Process
Rıza Selçuk Saydam
ユーザーインタビューからその後どうするの?得られた情報を「UXデザイン」に落とし込む方法 | UXデザイン基礎セミナー 第3回
ユーザーインタビューからその後どうするの?得られた情報を「UXデザイン」に落とし込む方法 | UXデザイン基礎セミナー 第3回
Yoshiki Hayama
モバイルWebアプリのこれまでとこれから。Sencha Touch vs jQuery Mobile
モバイルWebアプリのこれまでとこれから。Sencha Touch vs jQuery Mobile
dsuke Takaoka
そのアプリ、目を閉じても使えますか? 〜 アクセシビリティの基礎と対応の考え方 〜
そのアプリ、目を閉じても使えますか? 〜 アクセシビリティの基礎と対応の考え方 〜
Toru MOCHIDA
More Related Content
What's hot
これでわかる!Webアクセシビリティって?JIS X 8341-3って?
これでわかる!Webアクセシビリティって?JIS X 8341-3って?
Web Accessibility Infrastructure Committee (WAIC)
一般企業におけるWebアクセシビリティの進め方
一般企業におけるWebアクセシビリティの進め方
Web Accessibility Infrastructure Committee (WAIC)
Design Sprints for Awesome Teams: Running Design Sprints for Rapid Digital Pr...
Design Sprints for Awesome Teams: Running Design Sprints for Rapid Digital Pr...
Dana Mitroff Silvers
「UXデザインと組織論」に、正面から向きあってみた:2016年2月27日 『人間中心デザイン』HCD導入設計論
「UXデザインと組織論」に、正面から向きあってみた:2016年2月27日 『人間中心デザイン』HCD導入設計論
Yoshiki Hayama
HCDのはじめの一歩を体験しよう! ユーザーインタビューの基本:2016年8月5日 メンバーズキャリア
HCDのはじめの一歩を体験しよう! ユーザーインタビューの基本:2016年8月5日 メンバーズキャリア
Yoshiki Hayama
「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!
「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!
Yoshiki Hayama
UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
Yoshiki Hayama
UXデザインを速く! 軽く! そして根拠をもって、回せ! すばやいユーザー調査からつなげるアジャイルUX
UXデザインを速く! 軽く! そして根拠をもって、回せ! すばやいユーザー調査からつなげるアジャイルUX
Yoshiki Hayama
Webアクセシビリティ 海外の最新動向 2018
Webアクセシビリティ 海外の最新動向 2018
Makoto Ueki
あなたの手元の本よりいい方法がある! UXデザインのプロはこうやってユーザーのインサイトを確実に見つける
あなたの手元の本よりいい方法がある! UXデザインのプロはこうやってユーザーのインサイトを確実に見つける
Yoshiki Hayama
はじめてのUXデザイン、はじめてのデザイン思考 〜現場で使えるように〜:ISE Technical Conference 2018
はじめてのUXデザイン、はじめてのデザイン思考 〜現場で使えるように〜:ISE Technical Conference 2018
Yoshiki Hayama
Pirate Metrics 2.0 - AARRR
Pirate Metrics 2.0 - AARRR
Ash Maurya
UXデザインのはじめの一歩を体験しよう! ユーザーインタビュー、ユーザー心理分析の基本:DevLOVE関西
UXデザインのはじめの一歩を体験しよう! ユーザーインタビュー、ユーザー心理分析の基本:DevLOVE関西
Yoshiki Hayama
お客様の目を覚ませ! ついでに自分の目も覚ませ! デザイン思考のクライアントワークのプレセールス
お客様の目を覚ませ! ついでに自分の目も覚ませ! デザイン思考のクライアントワークのプレセールス
Yoshiki Hayama
WCAG 2.2で追加される達成基準
WCAG 2.2で追加される達成基準
Mitsue-Links Co.,Ltd. Accessibility Department
Working Together: the UX role in a Scaled Agile Framework
Working Together: the UX role in a Scaled Agile Framework
Kelley Howell
なぜ企業はWebアクセシビリティに取り組むのか?
なぜ企業はWebアクセシビリティに取り組むのか?
Web Accessibility Infrastructure Committee (WAIC)
UX & UI Design 101
UX & UI Design 101
Kevin Jackson
UX Design Process
UX Design Process
Rıza Selçuk Saydam
ユーザーインタビューからその後どうするの?得られた情報を「UXデザイン」に落とし込む方法 | UXデザイン基礎セミナー 第3回
ユーザーインタビューからその後どうするの?得られた情報を「UXデザイン」に落とし込む方法 | UXデザイン基礎セミナー 第3回
Yoshiki Hayama
What's hot
(20)
これでわかる!Webアクセシビリティって?JIS X 8341-3って?
これでわかる!Webアクセシビリティって?JIS X 8341-3って?
一般企業におけるWebアクセシビリティの進め方
一般企業におけるWebアクセシビリティの進め方
Design Sprints for Awesome Teams: Running Design Sprints for Rapid Digital Pr...
Design Sprints for Awesome Teams: Running Design Sprints for Rapid Digital Pr...
「UXデザインと組織論」に、正面から向きあってみた:2016年2月27日 『人間中心デザイン』HCD導入設計論
「UXデザインと組織論」に、正面から向きあってみた:2016年2月27日 『人間中心デザイン』HCD導入設計論
HCDのはじめの一歩を体験しよう! ユーザーインタビューの基本:2016年8月5日 メンバーズキャリア
HCDのはじめの一歩を体験しよう! ユーザーインタビューの基本:2016年8月5日 メンバーズキャリア
「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!
「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!
UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
UXデザインを速く! 軽く! そして根拠をもって、回せ! すばやいユーザー調査からつなげるアジャイルUX
UXデザインを速く! 軽く! そして根拠をもって、回せ! すばやいユーザー調査からつなげるアジャイルUX
Webアクセシビリティ 海外の最新動向 2018
Webアクセシビリティ 海外の最新動向 2018
あなたの手元の本よりいい方法がある! UXデザインのプロはこうやってユーザーのインサイトを確実に見つける
あなたの手元の本よりいい方法がある! UXデザインのプロはこうやってユーザーのインサイトを確実に見つける
はじめてのUXデザイン、はじめてのデザイン思考 〜現場で使えるように〜:ISE Technical Conference 2018
はじめてのUXデザイン、はじめてのデザイン思考 〜現場で使えるように〜:ISE Technical Conference 2018
Pirate Metrics 2.0 - AARRR
Pirate Metrics 2.0 - AARRR
UXデザインのはじめの一歩を体験しよう! ユーザーインタビュー、ユーザー心理分析の基本:DevLOVE関西
UXデザインのはじめの一歩を体験しよう! ユーザーインタビュー、ユーザー心理分析の基本:DevLOVE関西
お客様の目を覚ませ! ついでに自分の目も覚ませ! デザイン思考のクライアントワークのプレセールス
お客様の目を覚ませ! ついでに自分の目も覚ませ! デザイン思考のクライアントワークのプレセールス
WCAG 2.2で追加される達成基準
WCAG 2.2で追加される達成基準
Working Together: the UX role in a Scaled Agile Framework
Working Together: the UX role in a Scaled Agile Framework
なぜ企業はWebアクセシビリティに取り組むのか?
なぜ企業はWebアクセシビリティに取り組むのか?
UX & UI Design 101
UX & UI Design 101
UX Design Process
UX Design Process
ユーザーインタビューからその後どうするの?得られた情報を「UXデザイン」に落とし込む方法 | UXデザイン基礎セミナー 第3回
ユーザーインタビューからその後どうするの?得られた情報を「UXデザイン」に落とし込む方法 | UXデザイン基礎セミナー 第3回
Similar to 15分でわかるモバイルアクセシビリティ
モバイルWebアプリのこれまでとこれから。Sencha Touch vs jQuery Mobile
モバイルWebアプリのこれまでとこれから。Sencha Touch vs jQuery Mobile
dsuke Takaoka
そのアプリ、目を閉じても使えますか? 〜 アクセシビリティの基礎と対応の考え方 〜
そのアプリ、目を閉じても使えますか? 〜 アクセシビリティの基礎と対応の考え方 〜
Toru MOCHIDA
Web標準化 (W3C) とHTML5の状況 Remix
Web標準化 (W3C) とHTML5の状況 Remix
Yasuhisa Hasegawa
完全負け組なモバイルWebが、これから復活する(多分)
完全負け組なモバイルWebが、これから復活する(多分)
Hiroshi Kawada
アンドロイド勉強会第二回 080525 3
アンドロイド勉強会第二回 080525 3
shimay
Sp design2013 v2
Sp design2013 v2
Yukio Andoh
Cordova を使って本気で商用ハイブリッドアプリ開発をやってみた
Cordova を使って本気で商用ハイブリッドアプリ開発をやってみた
Shin Ogata
Sp design2013 v2
Sp design2013 v2
Yoshinori Wakizaka
第2回ビジネスモバイル研究会
第2回ビジネスモバイル研究会
Shuichi Yukimoto
Windows azure mobile services を使った windows ストアアプリ開発 1027
Windows azure mobile services を使った windows ストアアプリ開発 1027
Shotaro Suzuki
Html5勉強会 20120423
Html5勉強会 20120423
Nobuhiro Sue
クラウド研究会 20120712 BaaS
クラウド研究会 20120712 BaaS
Nobuhiro Sue
Wireless Japan[講演]八子 20110526
Wireless Japan[講演]八子 20110526
知礼 八子
Enterpriseでもモバイル開発
Enterpriseでもモバイル開発
Mitch Okamoto
Solution semniar vs2013_multi_device-1209-new
Solution semniar vs2013_multi_device-1209-new
Shotaro Suzuki
スマフォセキュリティセミナ(配付用) R 20110417
スマフォセキュリティセミナ(配付用) R 20110417
知礼 八子
HTML5時代のWebデザイン
HTML5時代のWebデザイン
masaaki komori
スマートコンバートセミナー資料 - 201209
スマートコンバートセミナー資料 - 201209
Yoichiro Shiba
モバイルWebアプリのこれまでとこれから
モバイルWebアプリのこれまでとこれから
dsuke Takaoka
HTML5 クロスプラットフォームアプリ開発の現実解
HTML5 クロスプラットフォームアプリ開発の現実解
Monaca
Similar to 15分でわかるモバイルアクセシビリティ
(20)
モバイルWebアプリのこれまでとこれから。Sencha Touch vs jQuery Mobile
モバイルWebアプリのこれまでとこれから。Sencha Touch vs jQuery Mobile
そのアプリ、目を閉じても使えますか? 〜 アクセシビリティの基礎と対応の考え方 〜
そのアプリ、目を閉じても使えますか? 〜 アクセシビリティの基礎と対応の考え方 〜
Web標準化 (W3C) とHTML5の状況 Remix
Web標準化 (W3C) とHTML5の状況 Remix
完全負け組なモバイルWebが、これから復活する(多分)
完全負け組なモバイルWebが、これから復活する(多分)
アンドロイド勉強会第二回 080525 3
アンドロイド勉強会第二回 080525 3
Sp design2013 v2
Sp design2013 v2
Cordova を使って本気で商用ハイブリッドアプリ開発をやってみた
Cordova を使って本気で商用ハイブリッドアプリ開発をやってみた
Sp design2013 v2
Sp design2013 v2
第2回ビジネスモバイル研究会
第2回ビジネスモバイル研究会
Windows azure mobile services を使った windows ストアアプリ開発 1027
Windows azure mobile services を使った windows ストアアプリ開発 1027
Html5勉強会 20120423
Html5勉強会 20120423
クラウド研究会 20120712 BaaS
クラウド研究会 20120712 BaaS
Wireless Japan[講演]八子 20110526
Wireless Japan[講演]八子 20110526
Enterpriseでもモバイル開発
Enterpriseでもモバイル開発
Solution semniar vs2013_multi_device-1209-new
Solution semniar vs2013_multi_device-1209-new
スマフォセキュリティセミナ(配付用) R 20110417
スマフォセキュリティセミナ(配付用) R 20110417
HTML5時代のWebデザイン
HTML5時代のWebデザイン
スマートコンバートセミナー資料 - 201209
スマートコンバートセミナー資料 - 201209
モバイルWebアプリのこれまでとこれから
モバイルWebアプリのこれまでとこれから
HTML5 クロスプラットフォームアプリ開発の現実解
HTML5 クロスプラットフォームアプリ開発の現実解
More from 力也 伊原
年末調整の情報設計
年末調整の情報設計
力也 伊原
情報構造設計の基礎知識
情報構造設計の基礎知識
力也 伊原
あなたの価値を高めるWebアクセシビリティ(JAC Special Ver.)
あなたの価値を高めるWebアクセシビリティ(JAC Special Ver.)
力也 伊原
あなたの価値を高めるWebアクセシビリティ(!importantバージョン)
あなたの価値を高めるWebアクセシビリティ(!importantバージョン)
力也 伊原
あなたの価値を高めるWebアクセシビリティ(アクセシビリティの祭典バージョン)
あなたの価値を高めるWebアクセシビリティ(アクセシビリティの祭典バージョン)
力也 伊原
今やWeb制作者じゃなくなった私の仕事実態
今やWeb制作者じゃなくなった私の仕事実態
力也 伊原
可能性のデザイン
可能性のデザイン
力也 伊原
サイトをアクセシブルにするための受発注のセオリー
サイトをアクセシブルにするための受発注のセオリー
力也 伊原
あなたの価値を高めるWebアクセシビリティ
あなたの価値を高めるWebアクセシビリティ
力也 伊原
プロトタイピングツール投入のケーススタディ
プロトタイピングツール投入のケーススタディ
力也 伊原
働き方のプロトタイピング
働き方のプロトタイピング
力也 伊原
フロントエンドからの発想
フロントエンドからの発想
力也 伊原
アクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザイン
力也 伊原
アクセシブルなナビゲーションデザインの考え方
アクセシブルなナビゲーションデザインの考え方
力也 伊原
WAI-ARIAで実現するマルチデバイス環境のWebアプリケーション
WAI-ARIAで実現するマルチデバイス環境のWebアプリケーション
力也 伊原
アクセシビリティ対応をプロジェクトに取り入れるには?
アクセシビリティ対応をプロジェクトに取り入れるには?
力也 伊原
NTTデータグループウェブサイトのマルチデバイス対応
NTTデータグループウェブサイトのマルチデバイス対応
力也 伊原
アクセシビリティ対応をプロジェクトに取り入れるには?
アクセシビリティ対応をプロジェクトに取り入れるには?
力也 伊原
マークアップエンジニアと情報アーキテクチャ
マークアップエンジニアと情報アーキテクチャ
力也 伊原
More from 力也 伊原
(19)
年末調整の情報設計
年末調整の情報設計
情報構造設計の基礎知識
情報構造設計の基礎知識
あなたの価値を高めるWebアクセシビリティ(JAC Special Ver.)
あなたの価値を高めるWebアクセシビリティ(JAC Special Ver.)
あなたの価値を高めるWebアクセシビリティ(!importantバージョン)
あなたの価値を高めるWebアクセシビリティ(!importantバージョン)
あなたの価値を高めるWebアクセシビリティ(アクセシビリティの祭典バージョン)
あなたの価値を高めるWebアクセシビリティ(アクセシビリティの祭典バージョン)
今やWeb制作者じゃなくなった私の仕事実態
今やWeb制作者じゃなくなった私の仕事実態
可能性のデザイン
可能性のデザイン
サイトをアクセシブルにするための受発注のセオリー
サイトをアクセシブルにするための受発注のセオリー
あなたの価値を高めるWebアクセシビリティ
あなたの価値を高めるWebアクセシビリティ
プロトタイピングツール投入のケーススタディ
プロトタイピングツール投入のケーススタディ
働き方のプロトタイピング
働き方のプロトタイピング
フロントエンドからの発想
フロントエンドからの発想
アクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザイン
アクセシブルなナビゲーションデザインの考え方
アクセシブルなナビゲーションデザインの考え方
WAI-ARIAで実現するマルチデバイス環境のWebアプリケーション
WAI-ARIAで実現するマルチデバイス環境のWebアプリケーション
アクセシビリティ対応をプロジェクトに取り入れるには?
アクセシビリティ対応をプロジェクトに取り入れるには?
NTTデータグループウェブサイトのマルチデバイス対応
NTTデータグループウェブサイトのマルチデバイス対応
アクセシビリティ対応をプロジェクトに取り入れるには?
アクセシビリティ対応をプロジェクトに取り入れるには?
マークアップエンジニアと情報アーキテクチャ
マークアップエンジニアと情報アーキテクチャ
15分でわかるモバイルアクセシビリティ
1.
15分でわかる モバイルアクセシビリティ
2.
2 W3C:MobileAccessibility https://www.w3.org/TR/mobile-accessibility-mapping/
3.
WCAG2.0などをモバイルに適用するには HowWCAG2.0andOtherW3C/WAI GuidelinesApplytoMobile WCAG2.0は抽象的で特定技術に依存しない、 よってベースはあくまでWCAG2.0 モバイルウェブサイト、モバイルウェブアプリ、 ネイティブアプリ、ハイブリッドアプリが対象 3
4.
1. はじめに 4
5.
よくある質問 モバイルサイトやアプリではどうすれば? Webとネイティブで違いはあるのか? なにか特別な対応が必要なのか? 5
6.
回答:やることは同じ 現実にはカテゴリ間の絶対的な差はない デスクトップにタッチスクリーン搭載 モバイルにキーボードやマウスが繋がる
レスポンシブ、PC上でもモバイル幅にできる モバイルOSがラップトップでも使われる デスクトップのUIはモバイルでも活用: テキスト、リンク、表、ボタン、メニューなど 6
7.
回答:Thatsaid... 「とはいえモバイルデバイスにおいては、 典型的なデスクトップ/ラップトップにおける アクセシビリティの問題とは異なるものが 入り混じってきます」 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.
モバイルアクセシビリティ:抄訳版 44http://qiita.com/magi1125/items/2c2e9d78c6db2724a826
45.
ピンク本にもそこそこ載ってます 45https://www.amazon.co.jp/dp/4862462650
46.
ありがとうございました 46
Download now