Download to read offline
Uploaded byYoshinori OHTA
WAI-ARIAで実現するマルチデバイス環境のwebアプリケーション
2015-04-10 第8回 HTML5minutes！ 〜triton-js〜 での講演資料です。
WAI-ARIAで実現するマルチデバイス環境のwebアプリケーション
- 1.
- 2.
- 3.
- 4.
- 5. Webサイト アプリケーション 映像 SNSコミュニケーション 紙もの、リアル店舗 etc.… 5 具体的には?
- 6.
- 7. Webアプリの昔と今 モダンアプリの盲点 アプリケーションを アクセシブルにする方法 WAI-ARIA最初の一歩 7 今日のお話
- 8. Webアプリの昔と今 HTML5 + JSのアプリケーションが当たり前に 8
- 9. 9 アプリケーションあれこれ Apps For All- Coding Accessible Web Applications より
- 10.
- 11.
- 12. 画面遷移が基本 新しい要素は画面遷移後に出現 入力内容は送信後の確認画面で 入力エラー時は次画面でエラー表示 12 表示: 昔のアプリ
- 13. 同一画面内で動的に表示 新しい要素を同一画面内で動的生成 入力はリアルタイムに画面内に反映 入力エラー時も同一画面上で警告 13 表示: いまどきのアプリ
- 14. オーソドックスなインターフェイス 既存のコントロール ► 入力欄、チェックボックスなど 画面内の入力欄は変化しない ► 選択肢によって次の画面で変化する ことはある 14 入力: 昔のアプリ
- 15. 高度な入力インターフェイス JS・CSSを駆使したリッチな表現 ► コンボボックス、カレンダー、etc. 何かすると入力欄が変化することも ► 画面内の入力欄が変化したり、 追加の入力欄が出現することも 15 入力: いまどきのアプリ
- 16.
- 17. 17 単なるボタンも高機能に Apps For All- Coding Accessible Web Applications より
- 18.
- 19.
- 20.
- 21. 画面遷移 ► 必ず気づく、普通に読むだけ ►結果の画面に出ている要素は読める 定型の入力インターフェイス ► 一般的なフォーム部品は操作可能 21 昔ながらのWebアプリの場合
- 22. 画面遷移なし ► 画面の別の箇所の変化に気づくか? ►エラーや結果の表示に気づくか? 定型外の入力インターフェイス ► キーボード操作で入力できるか? ► そもそも入力欄だと分かるか? 22 モダンアプリの場合
- 23. 問題はスクリーンリーダーに限らない さまざまな支援技術 フォーム入力を自動化したい場合 さまざまなデバイス ► 未来のデバイスも! 23 スクリーンリーダーの問題?
- 24.
- 25.
- 26. WAI = WebAccessibility Initiative ARIA = Accessible Rich Internet Applications Rich Internet Applications を アクセシブルに! 26 WAI-ARIAとは?
- 27.
- 28. 要素の役割を明示 (role) 要素の状態を明示 (state) 要素の関係を明示 (relationship) 画面が変化したときに通知 (ライブリージョン) 28 WAI-ARIAの概要
- 29.
- 30.
- 31. “Apps For All- Coding Accessible Web Applications” の日本語訳 ひとことで言うと「ふざけた本」 WAI-ARIAの入門的な内容 WAI-ARIAの最初の一歩におすすめ 31 コーディングWebアクセシビリティ
- 32. 本日、会場特別価格で販売中！ ► 立ち読みだけでもどうぞ ► 領収書も出ます 詳しくはFacebook ページで! ► https://www.facebook.com/a11ybooks ► a11ybooks = accessibility books 32 コーディングWebアクセシビリティ
- 33.