Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

8 インターフェイスの例

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

12

Slide 13

Slide 13 text

13

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

19 WAI-ARIA1.0

Slide 20

Slide 20 text

WAI-ARIA最初の一歩 20

Slide 21

Slide 21 text

21

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

24

Slide 25

Slide 25 text

25

Slide 26

Slide 26 text

26

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

28

Slide 29

Slide 29 text

role 29

Slide 30

Slide 30 text

property 30

Slide 31

Slide 31 text

state 31

Slide 32

Slide 32 text

32

Slide 33

Slide 33 text

33

Slide 34

Slide 34 text

34

Slide 35

Slide 35 text

35

Slide 36

Slide 36 text

36

Slide 37

Slide 37 text

37

Slide 38

Slide 38 text

38

Slide 39

Slide 39 text

39

Slide 40

Slide 40 text

40

Slide 41

Slide 41 text

41

Slide 42

Slide 42 text

42

Slide 43

Slide 43 text

43

Slide 44

Slide 44 text

44

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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