Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Rikiya Ihara
May 14, 2015
9

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

Rikiya Ihara

May 14, 2015
Tweet

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    確認
    画面
    結果
    表示

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  12. 12

    View Slide

  13. 13

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  19. 19
    WAI-ARIA1.0

    View Slide

  20. WAI-ARIA最初の一歩
    20

    View Slide

  21. 21

    View Slide

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

    View Slide

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

    View Slide

  24. 24

    View Slide

  25. 25

    View Slide

  26. 26

    View Slide

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

    View Slide

  28. 28

    View Slide

  29. role
    29

    View Slide

  30. property
    30

    View Slide

  31. state
    31

    View Slide

  32. 32

    View Slide

  33. 33

    View Slide

  34. 34

    View Slide

  35. 35

    View Slide

  36. 36

    View Slide

  37. 37

    View Slide

  38. 38

    View Slide

  39. 39

    View Slide

  40. 40

    View Slide

  41. 41

    View Slide

  42. 42

    View Slide

  43. 43

    View Slide

  44. 44

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide