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

by Cybozu

Embed

Start on current slide

Slide 1

Slide 1 text

新人開発研修 Webアクセシビリティ小林大輔 (デザイングループ)

Slide 2

Slide 2 text

アクセシビリティってなに？

Slide 3

Slide 3 text

障がい者や高齢者を含めて「すべての人」が製品やサービスを支障なく利用できることアクセシビリティとは？

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Webはどんなかたち？

Slide 6

Slide 6 text

ビジュアルブラウザでの表示

Slide 7

Slide 7 text

スマートフォン

Slide 8

Slide 8 text

検索結果

Slide 9

Slide 9 text

スクリーンリーダー・テキストブラウザ

Slide 10

Slide 10 text

スマートスピーカー、スマートウォッチ

Slide 11

Slide 11 text

▌ビジュアルブラウザ ▌スマートフォン ▌検索エンジンによる検索結果 ▌スクレイピングサービス ▌テキストブラウザ ▌点字ディスプレイ ▌スクリーンリーダー ▌未来のデバイス！ Webのかたちはさまざま

Slide 12

Slide 12 text

情報 (コンテンツ) HTML ブラウザ支援技術利用者コンテンツがユーザに届くまで

Slide 13

Slide 13 text

マシンリーダブルコンテンツがソフトウェア・支援技術にとって理解しやすいことアクセシビリティの重要な観点

Slide 14

Slide 14 text

マシンリーダブルの例

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

これでよいだろうか

Slide 17

Slide 17 text

画像の内容を機械に理解させよう

Slide 18

Slide 18 text

見出しであることを機械に理解させよう

Slide 19

Slide 19 text

アクセシビリティチェック

Slide 20

Slide 20 text

https://www.w3.org/TR/WCAG20/ WCAG2.0

Slide 21

Slide 21 text

▌文面が難しく理解力が求められる ▌チェックする項目数が多い（レベルA:25個レベルAA:33個レベルAAA:13個） ▌チェックの網羅性が高い ▌国内外の法律やJIS/ISO等の規格はWCAG2.0に準拠 WCAG2.0の長所と短所

Slide 22

Slide 22 text

https://www.w3.org/WAI/test-evaluate/preliminary/ W3C Easy Checks

Slide 23

Slide 23 text

チェックの進め方 ① ページタイトル ② 文書構造（見出し・リストなど） ③ 画像の代替テキスト ④ キーボード操作 ⑤ フォームのラベル・エラー ⑥ 画面拡大 ⑦ 色のコントラスト

Slide 24

Slide 24 text

ポータル- kintone ▌スクリーンリーダーが一番最初に読み上げる情報 (全盲のユーザは、ページを俯瞰してみることが難しい) ▌ブラウザのタブやお気に入りの文言としても使われる ▌各ページに固有で、別のWebサイトと区別できるように適切なページタイトルをつけよう１

Slide 25

Slide 25 text

▌スクリーンリーダーは「見出し」「リスト」など、構造を読む ▌見出しごとにジャンプするなど、読み飛ばすことができる ▌見出しには

〜

を使う ▌リストには

などを使う文章構造をマークアップしよう２

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

代替テキストの例 - 検索ボタン

Slide 28

Slide 28 text

Pie chart: Browser Share -
Internet Explorer 25%, Firefox 40%, Chrome 25%, Safari
6% and Opera 4%.

代替テキストの例 – 円グラフ

Slide 29

Slide 29 text

Warning! Your session is about to expire.

Home 代替テキストを省略する例

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

ユーザ名 ▌スクリーンリーダーはフォームにフォーカスしたときラベルを読み上げる ▌ラベルがついていないと、何を入力して良いかわからない ▌だめな例：フォームにラベルをつけよう 5

Slide 32

Slide 32 text

▌どうしてもラベルが配置できないとき: ユーザ名 ▌ラベルが配置できるとき: ラベルをつける方法

Slide 33

Slide 33 text

▌人によってはコンテンツの拡大が必要になるときがある ▌行間やフォントの変更が必要になる人もいる ▌200%拡大して読めない内容がないかチェック (要素の中の文字がはみ出した結果、別の要素に被るなど) 拡大縮小しても情報が得られるようにしよう 6

Slide 34

Slide 34 text

▌ロービジョンのユーザや、屋外で端末を使用しているユーザなどに役立つ ▌文字と背景色のコントラスト比を 4.5:1以上にしよう ▌チェックツールを使おう Colour Contrast Analyzer カラーコントラストを高めよう 7

Slide 35

Slide 35 text

✓適切なページタイトルがついている ✓見出しやリストで文書構造が指定されている ✓画像に適切な代替テキストがついている ✓キーボード操作できる ✓フォームにラベルがついている ✓拡大してもデザインが崩れない ✓色のコントラスト比が基準を満たしているきみのサイトはいくつチェックできるかな？

Slide 36

Slide 36 text

アクセシビリティにより深く取り組むには？

Slide 37

Slide 37 text

http://www.soumu.go.jp/menu_news/s-news/2005/051215_1_wmv.html 当事者の使い方を知ろう

Slide 38

Slide 38 text

▌デザイニングWebアクセシビリティアクセシビリティ教科書の決定版 ▌コーディングWebアクセシビリティよりマシンリーダブルなHTMLを書くために ▌インクルーシブHTML+CSS&JavaScript ただいま輪講中優れた書籍を読もう

Slide 39

Slide 39 text

▌Web Content Accessibility Guideline 2.0 http://waic.jp/docs/WCAG20/Overview.html ▌W3Cが勧告しているアクセシビリティ基準リスト ▌各国のアクセシビリティに関する法律は、この基準を採用 WCAG2.0を読んでみよう

Slide 40

Slide 40 text

▌マシンリーダビリティとはなにか ▌アクセシビリティチェックの方法お話ししたこと