2015-04-10 第8回 HTML5minutes！ 〜triton-js〜 での講演資料です。

1. WAI-ARIAで実現する
マルチデバイス環境の
Webアプリケーション
株式会社ビジネス･アーキテクツ
太田 良典

2. 自己紹介
2

3. 3

4. コミュニケーションを
デザインしています
4
何をしているの?

5.  Webサイト
 アプリケーション
 映像
 SNSコミュニケーション
 紙もの、リアル店舗
 etc.…
5
具体的には?

6. ウェブアクセシビリティ基盤委員会(WAIC)
6

7.  Webアプリの昔と今
 モダンアプリの盲点
 アプリケーションを
アクセシブルにする方法
 WAI-ARIA最初の一歩
7
今日のお話

8. Webアプリの昔と今
HTML5 + JS のアプリケーションが当たり前に
8

9. 9
アプリケーションあれこれ
Apps For All - Coding Accessible Web Applications より

10. フォームを送信して画面遷移
サーバ側で処理して結果を画面出力
10
昔ながらのWebアプリ
入力
フォー
ム
確認
画面
結果
表示

11. 基本的にJavaScriptで処理する
必要なときだけサーバーと非同期通信
11
最近のWebアプリ
入力・確認・
結果表示
サー
バー
非同期通信

12. 画面遷移が基本
 新しい要素は画面遷移後に出現
 入力内容は送信後の確認画面で
 入力エラー時は次画面でエラー表示
12
表示: 昔のアプリ

13. 同一画面内で動的に表示
 新しい要素を同一画面内で動的生成
 入力はリアルタイムに画面内に反映
 入力エラー時も同一画面上で警告
13
表示: いまどきのアプリ

14. オーソドックスなインターフェイス
 既存のコントロール
► 入力欄、チェックボックスなど
 画面内の入力欄は変化しない
► 選択肢によって次の画面で変化する
ことはある
14
入力: 昔のアプリ

15. 高度な入力インターフェイス
 JS・CSSを駆使したリッチな表現
► コンボボックス、カレンダー、etc.
 何かすると入力欄が変化することも
► 画面内の入力欄が変化したり、
追加の入力欄が出現することも
15
入力: いまどきのアプリ

16. 16
インターフェイスの例

17. 17
単なるボタンも高機能に
Apps For All - Coding Accessible Web Applications より

18. モダンアプリの盲点
モダンアプリにありがちなアクセシビリティ問題
18

19. 19

20. 20

21.  画面遷移
► 必ず気づく、普通に読むだけ
► 結果の画面に出ている要素は読める
 定型の入力インターフェイス
► 一般的なフォーム部品は操作可能
21
昔ながらのWebアプリの場合

22.  画面遷移なし
► 画面の別の箇所の変化に気づくか?
► エラーや結果の表示に気づくか?
 定型外の入力インターフェイス
► キーボード操作で入力できるか?
► そもそも入力欄だと分かるか?
22
モダンアプリの場合

23. 問題はスクリーンリーダーに限らない
 さまざまな支援技術
 フォーム入力を自動化したい場合
 さまざまなデバイス
► 未来のデバイスも!
23
スクリーンリーダーの問題?

24. アクセシブルにしたい!
24

25. アプリケーションを
アクセシブルにする方法
WAI-ARIAの簡単な紹介
25

26. WAI = Web Accessibility Initiative
ARIA = Accessible Rich Internet
Applications
Rich Internet Applications を
アクセシブルに!
26
WAI-ARIAとは?

27. 27
WAI-ARIA1.0

28.  要素の役割を明示 (role)
 要素の状態を明示 (state)
 要素の関係を明示 (relationship)
 画面が変化したときに通知
(ライブリージョン)
28
WAI-ARIAの概要

29. WAI-ARIA最初の一歩
書籍のご紹介
29

30. 30

31. “Apps For All - Coding Accessible
Web Applications” の日本語訳
ひとことで言うと「ふざけた本」
WAI-ARIAの入門的な内容
WAI-ARIAの最初の一歩におすすめ
31
コーディングWebアクセシビリティ

32. 本日、会場特別価格で販売中！
► 立ち読みだけでもどうぞ
► 領収書も出ます
詳しくは Facebook ページで!
► https://www.facebook.com/a11ybooks
► a11ybooks = accessibility books
32
コーディングWebアクセシビリティ

33. ありがとうございました
33