Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
2018-13-Webアクセシビリティ / 2018-13 web accessibility
Cybozu
PRO
July 18, 2018
2
24k
2018-13-Webアクセシビリティ / 2018-13 web accessibility
- マシンリーダブルとは何かを知る
- 簡単なアクセシビリティチェックができるようになる
Cybozu
PRO
July 18, 2018
Tweet
Share
More Decks by Cybozu
See All by Cybozu
GaroonUX リサーチャーお仕事紹介 / GaroonUX Researcher Job Introduction
cybozuinsideout
PRO
0
60
Garoon 開発チーム / Garoon development team
cybozuinsideout
PRO
0
690
OSS分散ストレージの調査例 - 未知のエラーメッセージが出たときの対処 -/cnsm2-cybozu-oss-storage-survey-example
cybozuinsideout
PRO
0
61
アクセシビリティに興味のあるデザイナーに向けて
cybozuinsideout
PRO
1
10k
サイボウズ Garoon プロダクトマネージャー業務紹介/Garoon PM
cybozuinsideout
PRO
0
780
20211130-engineer-topseminar-teppeis
cybozuinsideout
PRO
0
350
20211130-engineer-topseminar-okady
cybozuinsideout
PRO
0
190
20211128-wafflefestival
cybozuinsideout
PRO
0
350
kintoneフロントエンド刷新におけるアクセシビリティの取り組み / Accessibility in kintone front-end revamp
cybozuinsideout
PRO
1
260
Featured
See All Featured
Designing on Purpose - Digital PM Summit 2013
jponch
106
5.6k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
12
900
Navigating Team Friction
lara
175
11k
We Have a Design System, Now What?
morganepeng
35
2.9k
Testing 201, or: Great Expectations
jmmastey
21
5.4k
Clear Off the Table
cherdarchuk
79
280k
Build The Right Thing And Hit Your Dates
maggiecrowley
19
1.2k
Embracing the Ebb and Flow
colly
73
3.3k
The World Runs on Bad Software
bkeepers
PRO
56
5.2k
4 Signs Your Business is Dying
shpigford
169
20k
Pencils Down: Stop Designing & Start Developing
hursman
112
9.8k
Three Pipe Problems
jasonvnalue
89
8.6k
Transcript
新人開発研修 Webアクセシビリティ 小林大輔 (デザイングループ)
アクセシビリティってなに?
障がい者や高齢者を含めて「すべての人」が 製品やサービスを支障なく利用できること アクセシビリティとは?
今日の目標 ▌マシンリーダブルとは何かを知る ▌簡単なアクセシビリティチェックができるようになる
Webはどんなかたち?
ビジュアルブラウザでの表示
スマートフォン
検索結果
スクリーンリーダー・テキストブラウザ
スマートスピーカー、スマートウォッチ
▌ビジュアルブラウザ ▌スマートフォン ▌検索エンジンによる検索結果 ▌スクレイピングサービス ▌テキストブラウザ ▌点字ディスプレイ ▌スクリーンリーダー ▌未来のデバイス! Webのかたちはさまざま
情報 (コンテンツ) HTML ブラウザ 支援技術 利用者 コンテンツがユーザに届くまで
マシンリーダブル コンテンツがソフトウェア・支援技術にとって理解しやすいこと アクセシビリティの重要な観点
マシンリーダブルの例
None
これでよいだろうか <img src=“appstore.png” />
<img src=“appstore.png” alt=“kintoneアプリストア”/> 画像の内容を機械に理解させよう
<h2> <img src=“appstore.png” alt=“kintoneアプリストア”/> </h2> 見出しであることを機械に理解させよう
アクセシビリティチェック
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
チェックの進め方 ① ページタイトル ② 文書構造(見出し・リストなど) ③ 画像の代替テキスト ④ キーボード操作 ⑤
フォームのラベル・エラー ⑥ 画面拡大 ⑦ 色のコントラスト
<title>ポータル- kintone</title> ▌スクリーンリーダーが一番最初に読み上げる情報 (全盲のユーザは、ページを俯瞰してみることが難しい) ▌ブラウザのタブやお気に入りの文言としても使われる ▌各ページに固有で、別のWebサイトと区別できるように 適切なページタイトルをつけよう 1
▌スクリーンリーダーは「見出し」「リスト」など、構造を読む ▌見出しごとにジャンプするなど、読み飛ばすことができる ▌見出しには<h1>〜</h6>を使う ▌リストには<ul><ol><li><dl><dt>などを使う 文章構造をマークアップしよう 2
▌全盲のユーザが画像の内容を理解するために重要 ▌画像がダウンロードされなかったときにも画像の内容がわかる ▌すべてのimg要素に適切なalt属性をつける ▌装飾的な画像はalt=“”をつけるか、CSSの背景画像にする 画像に代替テキストをつけよう 3
<button> <img src=“images/search.png” alt=“Search"> </button> 代替テキストの例 - 検索ボタン
<img src="piechart.gif" alt="Pie chart: Browser Share - Internet Explorer 25%,
Firefox 40%, Chrome 25%, Safari 6% and Opera 4%."> 代替テキストの例 – 円グラフ
<img src=”warning.gif” alt=""> <strong>Warning!</strong> Your session is about to expire.
<img src="home.gif” alt="">Home 代替テキストを省略する例
▌四肢の障害や怪我、視覚障害のユーザに役立つ ▌一時的にマウスが使えないときや、マウスを使った方が効率が よいときがある ▌すべてキーボードで操作できるようにする ▌キーボードで操作している箇所が視認できるようにする ※表示されない場合は強制的に表示するツールなどを使う キーボード操作できるようにしよう 4
<span>ユーザ名</span> <input type=“text” /> ▌スクリーンリーダーはフォームにフォーカスしたとき ラベルを読み上げる ▌ラベルがついていないと、何を入力して良いかわからない ▌だめな例: フォームにラベルをつけよう 5
<input type=“text” title=“ユーザ名”placeholder=“ユーザ 名を入力” /> ▌どうしてもラベルが配置できないとき: <label for=“username”>ユーザ名</label> <input type=“text”
id=“username” /> ▌ラベルが配置できるとき: ラベルをつける方法
▌人によってはコンテンツの拡大が必要になるときがある ▌行間やフォントの変更が必要になる人もいる ▌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.0 http://waic.jp/docs/WCAG20/Overview.html ▌W3Cが勧告しているアクセシビリティ基準リスト ▌各国のアクセシビリティに関する法律は、この基準を採用 WCAG2.0を読んでみよう
▌マシンリーダビリティとはなにか ▌アクセシビリティチェックの方法 お話ししたこと