2015年5月14日に開催された書籍出版記念イベント「Webサイト設計・UI実装・アクセシビリティのモダンアプローチ」のセッション2で使用した資料です。

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

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

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

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

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

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

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

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

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

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

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

12. 12

13. 13

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

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

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

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

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

19. 19
WAI-ARIA1.0

20. WAI-ARIA最初の一歩
20

21. 21

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

23. 1章: すべての人のために
2章: ボタンのすべて
3章: WAI-ARIAの進む道
4章: 飛んでいこう
5章: いないいないばあ
6章: 生きてる! 生きてる!
23
目次

24. 24

25. 25

26. 26

27.  「公式サイトのサンプルコードにて、
ほとんどのコンポーネントに
role属性とaria-*属性が
書き加えられています。」
► http://getbootstrap.com/components/
► http://getbootstrap.com/javascript/
27
Bootstrap 3.3.0 における変化

28. 28

29. role
29

30. property
30

31. state
31

32. 32

33. 33

34. 34

35. 35

36. 36

37. 37

38. 38

39. 39

40. 40

41. 41

42. 42

43. 43

44. 44

45. デザイニングWebアクセシビリティ
6月末発売
320ページ（予定）
3000円（予価）
Amazonで予約受付中!
http://www.amazon.co.jp/dp
/4862462650
45

46. 46
がんばって作っています!

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