2018-13-Webアクセシビリティ / 2018-13 web accessibility

- マシンリーダブルとは何かを知る
- 簡単なアクセシビリティチェックができるようになる

Transcript

1. 新人開発研修 Webアクセシビリティ 小林大輔 (デザイングループ)
2. アクセシビリティってなに？
3. 障がい者や高齢者を含めて「すべての人」が 製品やサービスを支障なく利用できること アクセシビリティとは？
4. 今日の目標 ▌マシンリーダブルとは何かを知る ▌簡単なアクセシビリティチェックができるようになる
5. Webはどんなかたち？
6. ビジュアルブラウザでの表示
7. スマートフォン
8. 検索結果
9. スクリーンリーダー・テキストブラウザ
10. スマートスピーカー、スマートウォッチ
11. ▌ビジュアルブラウザ ▌スマートフォン ▌検索エンジンによる検索結果 ▌スクレイピングサービス ▌テキストブラウザ ▌点字ディスプレイ ▌スクリーンリーダー ▌未来のデバイス！ Webのかたちはさまざま
12. 情報 (コンテンツ) HTML ブラウザ 支援技術 利用者 コンテンツがユーザに届くまで
13. マシンリーダブル コンテンツがソフトウェア・支援技術にとって理解しやすいこと アクセシビリティの重要な観点
14. マシンリーダブルの例
16. これでよいだろうか <img src=“appstore.png” />
17. <img src=“appstore.png” alt=“kintoneアプリストア”/> 画像の内容を機械に理解させよう
18. <h2> <img src=“appstore.png” alt=“kintoneアプリストア”/> </h2> 見出しであることを機械に理解させよう
19. アクセシビリティチェック
20. https://www.w3.org/TR/WCAG20/ WCAG2.0
21. ▌文面が難しく理解力が求められる ▌チェックする項目数が多い （レベルA:25個 レベルAA:33個 レベルAAA:13個 ） ▌チェックの網羅性が高い ▌国内外の法律やJIS/ISO等の規格はWCAG2.0に準拠 WCAG2.0の長所と短所
22. https://www.w3.org/WAI/test-evaluate/preliminary/ W3C Easy Checks
23. チェックの進め方 ① ページタイトル ② 文書構造（見出し・リストなど） ③ 画像の代替テキスト ④ キーボード操作 ⑤ フォームのラベル・エラー ⑥ 画面拡大 ⑦ 色のコントラスト
24. <title>ポータル- kintone</title> ▌スクリーンリーダーが一番最初に読み上げる情報 (全盲のユーザは、ページを俯瞰してみることが難しい) ▌ブラウザのタブやお気に入りの文言としても使われる ▌各ページに固有で、別のWebサイトと区別できるように 適切なページタイトルをつけよう １
25. ▌スクリーンリーダーは「見出し」「リスト」など、構造を読む ▌見出しごとにジャンプするなど、読み飛ばすことができる ▌見出しには<h1>〜</h6>を使う ▌リストには<ul><ol><li><dl><dt>などを使う 文章構造をマークアップしよう ２
26. ▌全盲のユーザが画像の内容を理解するために重要 ▌画像がダウンロードされなかったときにも画像の内容がわかる ▌すべてのimg要素に適切なalt属性をつける ▌装飾的な画像はalt=“”をつけるか、CSSの背景画像にする 画像に代替テキストをつけよう ３
27. <button> <img src=“images/search.png” alt=“Search"> </button> 代替テキストの例 - 検索ボタン
28. <img src="piechart.gif" alt="Pie chart: Browser Share - Internet Explorer 25%, Firefox 40%, Chrome 25%, Safari 6% and Opera 4%."> 代替テキストの例 – 円グラフ
29. <img src=”warning.gif” alt=""> <strong>Warning!</strong> Your session is about to expire. <img src="home.gif” alt="">Home 代替テキストを省略する例
30. ▌四肢の障害や怪我、視覚障害のユーザに役立つ ▌一時的にマウスが使えないときや、マウスを使った方が効率が よいときがある ▌すべてキーボードで操作できるようにする ▌キーボードで操作している箇所が視認できるようにする ※表示されない場合は強制的に表示するツールなどを使う キーボード操作できるようにしよう ４
31. <span>ユーザ名</span> <input type=“text” /> ▌スクリーンリーダーはフォームにフォーカスしたとき ラベルを読み上げる ▌ラベルがついていないと、何を入力して良いかわからない ▌だめな例： フォームにラベルをつけよう 5
32. <input type=“text” title=“ユーザ名”placeholder=“ユーザ 名を入力” /> ▌どうしてもラベルが配置できないとき: <label for=“username”>ユーザ名</label> <input type=“text” id=“username” /> ▌ラベルが配置できるとき: ラベルをつける方法
33. ▌人によってはコンテンツの拡大が必要になるときがある ▌行間やフォントの変更が必要になる人もいる ▌200%拡大して読めない内容がないかチェック (要素の中の文字がはみ出した結果、別の要素に被るなど) 拡大縮小しても情報が得られるようにしよう 6
34. ▌ロービジョンのユーザや、屋外で端末を使用しているユーザな どに役立つ ▌文字と背景色のコントラスト比を 4.5:1以上にしよう ▌チェックツールを使おう Colour Contrast Analyzer カラーコントラストを高めよう 7
35. ✓適切なページタイトルがついている ✓見出しやリストで文書構造が指定されている ✓画像に適切な代替テキストがついている ✓キーボード操作できる ✓フォームにラベルがついている ✓拡大してもデザインが崩れない ✓色のコントラスト比が基準を満たしている きみのサイトはいくつチェックできるかな？
36. アクセシビリティに より深く取り組むには？
37. http://www.soumu.go.jp/menu_news/s-news/2005/051215_1_wmv.html 当事者の使い方を知ろう
38. ▌デザイニングWebアクセシビリティ アクセシビリティ教科書の決定版 ▌コーディングWebアクセシビリティ よりマシンリーダブルなHTMLを書くために ▌インクルーシブHTML+CSS&JavaScript ただいま輪講中 優れた書籍を読もう
39. ▌Web Content Accessibility Guideline 2.0 http://waic.jp/docs/WCAG20/Overview.html ▌W3Cが勧告しているアクセシビリティ基準リスト ▌各国のアクセシビリティに関する法律は、この基準を採用 WCAG2.0を読んでみよう
40. ▌マシンリーダビリティとはなにか ▌アクセシビリティチェックの方法 お話ししたこと