Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
2018-13-Webアクセシビリティ / 2018-13 web accessibility
Search
Cybozu
PRO
July 18, 2018
2
26k
2018-13-Webアクセシビリティ / 2018-13 web accessibility
- マシンリーダブルとは何かを知る
- 簡単なアクセシビリティチェックができるようになる
Cybozu
PRO
July 18, 2018
Tweet
Share
More Decks by Cybozu
See All by Cybozu
サイボウズフロントエンドエキスパートチームについて / FrontendExpert Team
cybozuinsideout
PRO
6
39k
2024/11/25 ReDesigner Online Meetup 会社紹介
cybozuinsideout
PRO
0
350
サイボウズ 開発本部採用ピッチ / Cybozu Engineer Recruit
cybozuinsideout
PRO
9
48k
テクニカルライティング
cybozuinsideout
PRO
4
520
サイボウズのアジャイルクオリティ2024
cybozuinsideout
PRO
3
440
モブに早く慣れたい人のためのガイド2024
cybozuinsideout
PRO
3
600
モバイル
cybozuinsideout
PRO
3
310
ソフトウェアライセンス
cybozuinsideout
PRO
4
290
ソフトウェアテスト
cybozuinsideout
PRO
3
480
Featured
See All Featured
Building Adaptive Systems
keathley
39
2.4k
The Invisible Side of Design
smashingmag
299
50k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
30
2.1k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
98
18k
Making Projects Easy
brettharned
116
6k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
280
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
1.3k
Documentation Writing (for coders)
carmenintech
67
4.6k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.8k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Site-Speed That Sticks
csswizardry
3
310
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を読んでみよう
▌マシンリーダビリティとはなにか ▌アクセシビリティチェックの方法 お話ししたこと