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. マシンリーダブルの例

15. None

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. ▌マシンリーダビリティとはなにか ▌アクセシビリティチェックの方法 お話ししたこと