WAI-ARIAで実現するマルチデバイス環境のWebアプリケーション

Transcript

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 モダンアプリの場合
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
22. コーディングWebアクセシビリティ “Apps For All - Coding Accessible Web Applications” の日本語訳 ひとことで言うと 「ふざけた本」 WAI-ARIAの入門的な内容 WAI-ARIAの最初の一歩にお すすめ 22
23. 1章: すべての人のために 2章: ボタンのすべて 3章: WAI-ARIAの進む道 4章: 飛んでいこう 5章: いないいないばあ 6章: 生きてる! 生きてる! 23 目次
27. ⬤ 「公式サイトのサンプルコードにて、 ほとんどのコンポーネントに role属性とaria-*属性が 書き加えられています。」 ► http://getbootstrap.com/components/ ► http://getbootstrap.com/javascript/ 27 Bootstrap 3.3.0 における変化
29. role 29
30. property 30
31. state 31
45. デザイニングWebアクセシビリティ 6月末発売 320ページ（予定） 3000円（予価） Amazonで予約受付中! http://www.amazon.co.jp/dp /4862462650 45
46. 46 がんばって作っています!
47. ありがとうございました 47