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
サイボウズフロントエンドエキスパートチームについて / FrontendExpert Team
cybozuinsideout
PRO
6
39k
2024/11/25 ReDesigner Online Meetup 会社紹介
cybozuinsideout
PRO
0
370
サイボウズ 開発本部採用ピッチ / Cybozu Engineer Recruit
cybozuinsideout
PRO
9
49k
テクニカルライティング
cybozuinsideout
PRO
4
560
サイボウズのアジャイルクオリティ2024
cybozuinsideout
PRO
3
460
モブに早く慣れたい人のためのガイド2024
cybozuinsideout
PRO
3
620
モバイル
cybozuinsideout
PRO
3
330
ソフトウェアライセンス
cybozuinsideout
PRO
4
300
ソフトウェアテスト
cybozuinsideout
PRO
3
510
Other Decks in Technology
See All in Technology
家電アプリ共通PF "Linova" のAPI利用とPostman活用事例ご紹介
yukiogawa
0
130
ハッキングの世界に迫る~攻撃者の思考で考えるセキュリティ~
nomizone
12
4.5k
WAF に頼りすぎない AWS WAF 運用術 meguro sec #1
izzii
0
460
5分で紹介する生成AIエージェントとAmazon Bedrock Agents / 5-minutes introduction to generative AI agents and Amazon Bedrock Agents
hideakiaoyagi
0
220
AWSでRAGを実現する上で感じた3つの大事なこと
ymae
3
1k
急成長する企業で作った、エンジニアが輝ける制度/ 20250214 Rinto Ikenoue
shift_evolve
2
880
生成AIの利活用を加速させるための取り組み「prAIrie-dog」/ Shibuya_AI_1
visional_engineering_and_design
1
140
明日からできる!技術的負債の返済を加速するための実践ガイド~『ホットペッパービューティー』の事例をもとに~
recruitengineers
PRO
3
100
データの品質が低いと何が困るのか
kzykmyzw
6
1k
目の前の仕事と向き合うことで成長できる - 仕事とスキルを広げる / Every little bit counts
soudai
22
5.8k
データ基盤の成長を加速させる:アイスタイルにおける挑戦と教訓
tsuda7
3
650
PL900試験から学ぶ Power Platform 基礎知識講座
kumikeyy
0
110
Featured
See All Featured
Being A Developer After 40
akosma
89
590k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Bash Introduction
62gerente
610
210k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
Six Lessons from altMBA
skipperchong
27
3.6k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Thoughts on Productivity
jonyablonski
69
4.5k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
The Cult of Friendly URLs
andyhume
78
6.2k
Designing for humans not robots
tammielis
250
25k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
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が勧告しているアクセシビリティ基準リスト •
各国のアクセシビリティに関する法律は、この基準を採⽤ ガイドラインを読んでみよう
多様なユーザの使い⽅を知ろう