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
WAI-ARIAで実現するマルチデバイス環境のWebアプリケーション
Search
Rikiya Ihara / magi
May 14, 2015
0
29
WAI-ARIAで実現するマルチデバイス環境のWebアプリケーション
Rikiya Ihara / magi
May 14, 2015
Tweet
Share
More Decks by Rikiya Ihara / magi
See All by Rikiya Ihara / magi
最速[要出典]アクセシビリティチェック
magi1125
2
210
デザインプリンシプルのつくりかた(freee技術の日)
magi1125
8
6.8k
Webアプリケーションアクセシビリティ解説ウェビナー「8章 アクセシブルなUI設計の原理を導く」
magi1125
1
380
ゼロから学ぶWebアクセシビリティ~導入編~
magi1125
6
2.5k
アクセシビリティに関わる職種とは?〜freee編〜
magi1125
0
21k
アクセシビリティの効果測定
magi1125
1
8.2k
電子決済等代行事業者協会 アクセシビリティ勉強会「Webアクセシビリティの概要」
magi1125
0
15k
noteアクセシビリティ勉強会 〜画像編〜
magi1125
0
6.8k
自社サービスのアクセシビリティ向上、良いパターンとアンチパターン
magi1125
0
6.9k
Featured
See All Featured
Gamification - CAS2011
davidbonilla
80
5.1k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
980
Scaling GitHub
holman
459
140k
Side Projects
sachag
452
42k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Rails Girls Zürich Keynote
gr2m
94
13k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
Building an army of robots
kneath
303
45k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
RailsConf 2023
tenderlove
29
1k
Transcript
WAI-ARIAで実現する マルチデバイス環境の Webアプリケーション 株式会社ビジネス・アーキテクツ 太田 良典・伊原 力也
⬤ Webアプリの昔と今 ⬤ モダンアプリの盲点 ⬤ アプリケーションを アクセシブルにする方法 ⬤ WAI-ARIA最初の一歩 2
今日のお話
Webアプリの昔と今 HTML5 + JS のアプリケーションが当たり前に 3
4 アプリケーションあれこれ Apps For All - Coding Accessible Web Applications
より
フォームを送信して画面遷移 サーバ側で処理して結果を画面出力 5 昔ながらのWebアプリ 入力 フォー ム 確認 画面 結果
表示
基本的にJavaScriptで処理する 必要なときだけサーバーと非同期通信 6 最近のWebアプリ 入力・確認・ 結果表示 サー バー 非同期通信
7 単なるボタンも高機能に Apps For All - Coding Accessible Web Applications
より
8 インターフェイスの例
モダンアプリの盲点 モダンアプリにありがちなアクセシビリティ問題 9
⬤ 画面遷移 ► 必ず気づく、普通に読むだけ ► 結果の画面に出ている要素は読める ⬤ 定型の入力インターフェイス ► 一般的なフォーム部品は操作可能
10 昔ながらのWebアプリの場合
⬤ 画面遷移なし ► 画面の別の箇所の変化に気づくか? ► エラーや結果の表示に気づくか? ⬤ 定型外の入力インターフェイス ► キーボード操作で入力できるか?
► そもそも入力欄だと分かるか? 11 モダンアプリの場合
12
13
問題はスクリーンリーダーに限らない ⬤ さまざまな支援技術 ⬤ フォーム入力を自動化したい場合 ⬤ さまざまなデバイス ► 未来のデバイスも! 14
スクリーンリーダーの問題?
アクセシブルにしたい! 15
アプリケーションを アクセシブルにする方法 WAI-ARIAの簡単な紹介 16
WAI = Web Accessibility Initiative ARIA = Accessible Rich Internet
Applications Rich Internet Applications を アクセシブルに! 17 WAI-ARIAとは?
⬤ 要素の役割を明示 (role) ⬤ 要素の状態を明示 (state) ⬤ 要素の関係を明示 (relationship) ⬤
画面が変化したときに通知 (ライブリージョン) 18 WAI-ARIAの概要
19 WAI-ARIA1.0
WAI-ARIA最初の一歩 20
21
コーディングWebアクセシビリティ “Apps For All - Coding Accessible Web Applications” の日本語訳
ひとことで言うと 「ふざけた本」 WAI-ARIAの入門的な内容 WAI-ARIAの最初の一歩にお すすめ 22
1章: すべての人のために 2章: ボタンのすべて 3章: WAI-ARIAの進む道 4章: 飛んでいこう 5章: いないいないばあ
6章: 生きてる! 生きてる! 23 目次
24
25
26
⬤ 「公式サイトのサンプルコードにて、 ほとんどのコンポーネントに role属性とaria-*属性が 書き加えられています。」 ► http://getbootstrap.com/components/ ► http://getbootstrap.com/javascript/ 27
Bootstrap 3.3.0 における変化
28
role 29
property 30
state 31
32
33
34
35
36
37
38
39
40
41
42
43
44
デザイニングWebアクセシビリティ 6月末発売 320ページ(予定) 3000円(予価) Amazonで予約受付中! http://www.amazon.co.jp/dp /4862462650 45
46 がんばって作っています!
ありがとうございました 47