WAI-ARIAで実現するマルチデバイス環境のWebアプリケーション株式会社ビジネス・アーキテクツ太田 良典・伊原 力也
View Slide
⬤ Webアプリの昔と今⬤ モダンアプリの盲点⬤ アプリケーションをアクセシブルにする方法⬤ WAI-ARIA最初の一歩2今日のお話
Webアプリの昔と今HTML5 + JS のアプリケーションが当たり前に3
4アプリケーションあれこれApps For All - Coding Accessible Web Applications より
フォームを送信して画面遷移サーバ側で処理して結果を画面出力5昔ながらのWebアプリ入力フォーム確認画面結果表示
基本的にJavaScriptで処理する必要なときだけサーバーと非同期通信6最近のWebアプリ入力・確認・結果表示サーバー非同期通信
7単なるボタンも高機能にApps For All - Coding Accessible Web Applications より
8インターフェイスの例
モダンアプリの盲点モダンアプリにありがちなアクセシビリティ問題9
⬤ 画面遷移► 必ず気づく、普通に読むだけ► 結果の画面に出ている要素は読める⬤ 定型の入力インターフェイス► 一般的なフォーム部品は操作可能10昔ながらのWebアプリの場合
⬤ 画面遷移なし► 画面の別の箇所の変化に気づくか?► エラーや結果の表示に気づくか?⬤ 定型外の入力インターフェイス► キーボード操作で入力できるか?► そもそも入力欄だと分かるか?11モダンアプリの場合
12
13
問題はスクリーンリーダーに限らない⬤ さまざまな支援技術⬤ フォーム入力を自動化したい場合⬤ さまざまなデバイス► 未来のデバイスも!14スクリーンリーダーの問題?
アクセシブルにしたい!15
アプリケーションをアクセシブルにする方法WAI-ARIAの簡単な紹介16
WAI = Web Accessibility InitiativeARIA = Accessible Rich InternetApplicationsRich Internet Applications をアクセシブルに!17WAI-ARIAとは?
⬤ 要素の役割を明示 (role)⬤ 要素の状態を明示 (state)⬤ 要素の関係を明示 (relationship)⬤ 画面が変化したときに通知(ライブリージョン)18WAI-ARIAの概要
19WAI-ARIA1.0
WAI-ARIA最初の一歩20
21
コーディングWebアクセシビリティ“Apps For All - CodingAccessible WebApplications” の日本語訳ひとことで言うと「ふざけた本」WAI-ARIAの入門的な内容WAI-ARIAの最初の一歩におすすめ22
1章: すべての人のために2章: ボタンのすべて3章: WAI-ARIAの進む道4章: 飛んでいこう5章: いないいないばあ6章: 生きてる! 生きてる!23目次
24
25
26
⬤ 「公式サイトのサンプルコードにて、ほとんどのコンポーネントにrole属性とaria-*属性が書き加えられています。」► http://getbootstrap.com/components/► http://getbootstrap.com/javascript/27Bootstrap 3.3.0 における変化
28
role29
property30
state31
32
33
34
35
36
37
38
39
40
41
42
43
44
デザイニングWebアクセシビリティ6月末発売320ページ(予定)3000円(予価)Amazonで予約受付中!http://www.amazon.co.jp/dp/486246265045
46がんばって作っています!
ありがとうございました47