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
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
Visualization
eitanlees
146
15k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Navigating Team Friction
lara
183
15k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
540
Facilitating Awesome Meetings
lara
51
6.2k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Practical Orchestrator
shlominoach
186
10k
What's in a price? How to price your products and services
michaelherold
244
12k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
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