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