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
アクセシビリティ 2021 / Accessibility 2021
Search
Cybozu
PRO
May 17, 2021
Technology
6
9.6k
アクセシビリティ 2021 / Accessibility 2021
Cybozu
PRO
May 17, 2021
Tweet
Share
More Decks by Cybozu
See All by Cybozu
サイボウズ 開発本部採用ピッチ / Cybozu Engineer Recruit
cybozuinsideout
PRO
9
45k
テクニカルライティング
cybozuinsideout
PRO
4
300
サイボウズのアジャイルクオリティ2024
cybozuinsideout
PRO
3
270
モブに早く慣れたい人のためのガイド2024
cybozuinsideout
PRO
3
370
モバイル
cybozuinsideout
PRO
3
190
ソフトウェアライセンス
cybozuinsideout
PRO
4
160
ソフトウェアテスト
cybozuinsideout
PRO
3
260
自動テスト
cybozuinsideout
PRO
3
270
Docker入門2024
cybozuinsideout
PRO
3
460
Other Decks in Technology
See All in Technology
SSMRunbook作成の勘所_20241120
koichiotomo
3
160
Making your applications cross-environment - OSCG 2024 NA
salaboy
0
200
『Firebase Dynamic Links終了に備える』 FlutterアプリでのAdjust導入とDeeplink最適化
techiro
0
140
20241120_JAWS_東京_ランチタイムLT#17_AWS認定全冠の先へ
tsumita
2
300
強いチームと開発生産性
onk
PRO
35
11k
安心してください、日本語使えますよ―Ubuntu日本語Remix提供休止に寄せて― 2024-11-17
nobutomurata
1
1k
心が動くエンジニアリング ── 私が夢中になる理由
16bitidol
0
100
プロダクト活用度で見えた真実 ホリゾンタルSaaSでの顧客解像度の高め方
tadaken3
0
190
EventHub Startup CTO of the year 2024 ピッチ資料
eventhub
0
130
TypeScriptの次なる大進化なるか!? 条件型を返り値とする関数の型推論
uhyo
2
1.7k
BLADE: An Attempt to Automate Penetration Testing Using Autonomous AI Agents
bbrbbq
0
320
テストコード品質を高めるためにMutation Testingライブラリ・Strykerを実戦導入してみた話
ysknsid25
7
2.7k
Featured
See All Featured
It's Worth the Effort
3n
183
27k
Statistics for Hackers
jakevdp
796
220k
GraphQLとの向き合い方2022年版
quramy
43
13k
Raft: Consensus for Rubyists
vanstee
136
6.6k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Git: the NoSQL Database
bkeepers
PRO
427
64k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Unsuck your backbone
ammeep
668
57k
Transcript
サイボウズ 開発運⽤研修 アクセシビリティ ⼩林⼤輔 デザイン&リサーチ アクセシビリティエキスパート
• アクセシビリティとは︖ • マシンリーダブル・ヒューマンリーダブルを理解する • アクセシビリティ確保の基本を理解する この講義で学ぶこと 復習
アクセシビリティとは︖ 復習
アクセシビリティ=障害者・⾼齢者のための特別対応︖
アクセシビリティとは 障害者・⾼齢者を含めて「すべての⼈」が 製品やサービスを⽀障なく利⽤できること
⾒る ロービジョン 全盲 話す ⾔語障害 聞く ろう 難聴 読む ディスレクシア
集中する うつ ADHD 動く 肢体不⾃由 ⾻折・怪我
⾒る ロービジョン 全盲 話す ⾔語障害 聞く ろう 難聴 読む ディスレクシア
集中する うつ ADHD 動く 肢体不⾃由 ⾻折・怪我 ⼩さい画⾯ 電⾞内 マスク 海外出張 在宅ワーク ⽇光下 急な予定 育児中 満員電⾞ 運転中 英⽂ 騒⾳ 静⾳環境
ユーザ サイボウズ製品 チーム
サイボウズにとって、アクセシビリティとは 「ユーザがチームにアクセスできる能⼒」
アクセシビリティを確保することは 「チームに参加したい」という ユーザのねがいを尊重すること
アクセシビリティに取り組むには︖
コンテンツがユーザに届くまで 制作者 ユーザ ハードウェア (PC・スマホ…) ソフトウェア (ブラウザ・⽀援技術) ⼊出⼒ 機器 感覚情報
(視覚・聴覚・触覚…) Webコンテンツ (HTML・CSS・JS…)
アクセシビリティを⾼める2つの要素 マシン リーダブル ヒューマン リーダブル 制作者 ユーザ
アクセシビリティ確保の基本
1. ⾒出し・ランドマークなどの⽂書構造をマークアップする 2. リンクテキストはリンク先がわかるようにする 3. 画像に代替テキストを提供する 4. 情報を伝える⾊の使い⽅に注意する 5. ⽂字を拡⼤しても情報が正しく伝わるようにする
6. キーボードで操作できるようにする 7. フォームフィールドにラベルを関連づける アクセシビリティ確保の基本
役⽴つ⼈・役⽴つ場⾯ ⾒出し・ランドマークなどの⽂書構造をマークアップする スクリーンリーダーは⾒出し・ランドマークなどの⽂書構造を読む 構造ごとに「読み⾶ばす」こともできる • 全盲の⼈/ロービジョンの⼈/ディスレクシアの⼈
デザイン 実装 やるべきこと • モックの段階で⾒出しにする箇所を決める • モックの段階でランドマークにする箇所を決める • ⾒出しはh1...h6要素でマークアップする •
header, footer, nav, aside...を使う
役⽴つ⼈・役⽴つ場⾯ リンクテキストはリンク先がわかる⽂⾔にする スクリーンリーダーには「リンク」にジャンプする機能がある 同じリンク⽂⾔が続くとリンクが表す内容を理解しづらい(デモ) • 全盲の⼈/ロービジョンの⼈/ディスレクシアの⼈
やるべきこと デザイン • 不明瞭なリンクテキストを使わない 「ここをクリック」「さらに表⽰」「詳細はこちら」 • どうしてもテキストを変えられない場合 ⾒出しと組み合わせる ツールチップで補⾜する
役⽴つ⼈・役⽴つ場⾯ 画像に代替テキストを提供する スクリーンリーダーは代替テキストを読み上げる 画像のダウンロードに失敗すると代替テキストが表⽰される • 視覚障害の⼈ • 低速回線の⼈(画像のダウンロードに失敗した場合)
• img要素にalt属性をつける 代替テキストの提供⽅法 <img src="cybozu.png" alt="サイボウズ株式会社">
alt属性はどう読まれる︖ https://jsfiddle.net/sukoyakarizumu/qL5sf7r1/show
やるべきこと デザイン • 画像が何を表しているのかテキストで説明する • 画像につける代替テキストを決める 実装 • 意味のあるimg要素には、alt属性をつける •
装飾的なimg要素には、alt=""をつける
役⽴つ⼈・役⽴つ場⾯ 情報を伝える⾊の使い⽅に注意する ⾊のみに依存しない表現にする ⾊同⼠のコントラストを⾼くする • ロービジョンの⼈・さまざまな⾊覚の⼈ • ⽩⿊印刷した場合・屋外で閲覧した場合・プロジェクター
• ⾊以外の別の視覚情報を組み合わせる ⾊のみに依存しない表現
• 2つの⾊の違いを「コントラスト⽐」で表すことができる • ⽂字⾊と背景⾊のコントラスト⽐には 4.5:1 以上を推奨 ⾊のコントラスト 21 : 1
4.5 : 1 1 : 1 " " " " " " " " " "
• Spectrum さまざまな⾊覚を再現できるChrome拡張 • Color Contrast Analyzer 2つの⾊のコントラスト⽐を測定できる ⾊のチェックツール
やるべきこと デザイン • ⽩⿊や⾊覚再現フィルターで表⽰して確認する • ⽂字⾊と背景⾊のコントラスト⽐を4.5:1以上に
役⽴つ⼈・役⽴つ場⾯ ⽂字を拡⼤しても情報が正しく伝わるようにする 拡⼤が必要な⼈・閲覧環境でも情報が正しく伝わる • ロービジョンの⼈・視⼒が低い⼈ • スマホなど⼩さい画⾯で閲覧しているとき
• 拡⼤する⽅法は主に3種類 • OSの拡⼤機能を使う(拡⼤鏡など) • ブラウザのズーム機能で拡⼤する • ブラウザのフォントサイズを変更する • 200%まで拡⼤でき、情報が⽋落しないようにする
⽂字を拡⼤する⽅法
• 位置が固定された要素に要注意(ヘッダー・フッターなど) • フォントサイズ・フォントサイズに連動して変化する箇所には 相対値(%, em, rem)を使う 拡⼤に強くするには︖ header footer
header footer
やるべきこと デザイン • 200%拡⼤したときの動作を決めておく 実装 • フォントサイズに連動して変化する箇所には 相対値(%, em, rem)を使う
役⽴つ⼈・役⽴つ場⾯ キーボードで操作できるようにする マウスが使えない⼈・閲覧環境でもキーボードで操作できる • 視覚障害の⼈・肢体不⾃由の⼈・怪我をしている⼈ • 作業を効率的に進めたいとき
• HTML標準のインタラクティブ要素はキーボードで操作できる • button, select, input要素など • 以下は⾃分でキーボード操作を実装する必要がある • 独⾃のUIパーツを作る場合
• マウスに依存する操作を提供する場合 • キーボードフォーカスしたときのスタイルをつける キーボード操作についての注意
やるべきこと デザイン • キーボード操作の⽅法を考えておく • キーボードフォーカススタイルを決める 実装 • キーボード操作できるHTML要素を選ぶ •
キーボードフォーカススタイルをもれなくつける
役⽴つ⼈・役⽴つ場⾯ フォームフィールドにラベルを関連づける スクリーンリーダーには「フィールド」にジャンプする機能がある フィールドに⼊⼒すべき値が理解できる(デモ) • 視覚障害の⼈
• label要素で関連づける • 可視のラベルがない場合はaria-label属性かtitle属性をつける ラベルを関連づける⽅法 <label for="username">ユーザー名</label> <input type="text" id="username">
<input type="text" aria-label="ユーザー名">
やるべきこと デザイン • フィールドの近くに可視のラベルをつける 実装 • フィールドとラベルをlabel要素で関連づける • 可視ラベルがないときはaria-label属性をつける
1. ⽂書構造をマークアップする 2. リンクテキストはリンク先がわかるようにする 3. 画像に代替テキストを提供する 4. 情報を伝える⾊の使い⽅に注意する 5. ⽂字を拡⼤しても情報が正しく伝わるようにする
6. キーボードで操作できるようにする 7. フォームフィールドにラベルを関連づける アクセシビリティ確保の基本
• アクセシビリティとは︖ • マシンリーダブル・ヒューマンリーダブルを理解する • アクセシビリティ確保の基本を理解する この講義で学んだこと 復習
アクセシビリティに より深く取り組むには︖
• デザイニングWebアクセシビリティ アクセシビリティ教科書の決定版 • コーディングWebアクセシビリティ よりマシンリーダブルなHTMLを書くために • インクルーシブHTML+CSS&JavaScript 優れた書籍を読もう
• Web Content Accessibility Guideline 2.1 https://waic.jp/docs/WCAG21/ • W3Cが勧告しているアクセシビリティ基準リスト •
各国のアクセシビリティに関する法律は、この基準を採⽤ ガイドラインを読んでみよう
多様なユーザの使い⽅を知ろう