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

A97eee01397705443a72a48ce29d3e19?s=47 Cybozu
July 18, 2018
21k

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

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

A97eee01397705443a72a48ce29d3e19?s=128

Cybozu

July 18, 2018
Tweet

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サイトと区別できるように 適切なページタイトルをつけよう 1

  25. ▌スクリーンリーダーは「見出し」「リスト」など、構造を読む ▌見出しごとにジャンプするなど、読み飛ばすことができる ▌見出しには<h1>〜</h6>を使う ▌リストには<ul><ol><li><dl><dt>などを使う 文章構造をマークアップしよう 2

  26. ▌全盲のユーザが画像の内容を理解するために重要 ▌画像がダウンロードされなかったときにも画像の内容がわかる ▌すべてのimg要素に適切なalt属性をつける ▌装飾的な画像はalt=“”をつけるか、CSSの背景画像にする 画像に代替テキストをつけよう 3

  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. ▌四肢の障害や怪我、視覚障害のユーザに役立つ ▌一時的にマウスが使えないときや、マウスを使った方が効率が よいときがある ▌すべてキーボードで操作できるようにする ▌キーボードで操作している箇所が視認できるようにする ※表示されない場合は強制的に表示するツールなどを使う キーボード操作できるようにしよう 4

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