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
アクセシビリティを意識して、 画像の代替テキスト(alt)を 決めるときの観点
Search
hiro
June 29, 2023
Technology
1
300
アクセシビリティを意識して、 画像の代替テキスト(alt)を 決めるときの観点
from:
https://b.0218.jp/202105192211.html
hiro
June 29, 2023
Tweet
Share
More Decks by hiro
See All by hiro
エンジニアの成長を止めないAI活用
hiro0218
2
71
ZOZOTOWN に CSS in JS(Emotion)を導入して1年後の状況
hiro0218
7
150k
Next.jsで開発を始める前に知っておくと良さそうなこと
hiro0218
2
650
CSS in JS を何となく知る
hiro0218
1
590
ITCSSの良いところ
hiro0218
1
680
Other Decks in Technology
See All in Technology
[TechNight #91] Oracle Database 最新パフォーマンス分析手法
oracle4engineer
PRO
3
150
メモ整理が苦手な者による頑張らないObsidian活用術
optim
0
150
P2P ではじめる WebRTC のつまづきどころ
tnoho
1
270
Datasets for Critical Operations by Dataform
kimujun
0
120
AWS表彰プログラムとキャリアについて
naoki_0531
1
140
Snowflake のアーキテクチャは本当に筋がよかったのか / Data Engineering Study #30
indigo13love
0
280
KCD Lima: eBee in Peru!
lizrice
0
110
モバイルゲームの開発を支える基盤の歩み ~再現性のある開発ラインを量産する秘訣~
qualiarts
0
610
ObsidianをLLM時代のナレッジベースに! クリッピング→Markdown→CLI連携の実践
srvhat09
7
9.7k
【CEDEC2025】LLMを活用したゲーム開発支援と、生成AIの利活用を進める組織的な取り組み
cygames
PRO
1
1.6k
マルチモーダル基盤モデルに基づく動画と音の解析技術
lycorptech_jp
PRO
2
260
分散トレーシングによる コネクティッドカーのデータ処理見える化の試み
thatsdone
0
270
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
337
57k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
The Cult of Friendly URLs
andyhume
79
6.5k
Six Lessons from altMBA
skipperchong
28
3.9k
It's Worth the Effort
3n
185
28k
We Have a Design System, Now What?
morganepeng
53
7.7k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Embracing the Ebb and Flow
colly
86
4.8k
Producing Creativity
orderedlist
PRO
346
40k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Git: the NoSQL Database
bkeepers
PRO
431
65k
Transcript
2023年6月29日 社内LT資料 ZOZOTOWN WEB部 フロントエンド1 菊地 宏之 アクセシビリティを意識して、 画像の代替テキスト(alt)を 決めるときの観点
Web Content Accessibility Guidelines (WCAG) 2.1 の達成基準に「1.1.1 非テキストコンテン ツ」という項目がある。 >
利用者に提示されるすべての非テキストコンテンツには、同等の目的を果たすテキストによる代 替が提供されている。 概要
装飾ではない画像やアイコンは、代替テキスト(alt 属性)で説明する必要がある。 代替テキストの主な利用目的は以下の通り。 • 検索 bot やスクリーンリーダーを利用しているユーザーにも等しくコンテンツを提供する • ネットワークエラー時など、画像を表示できない場合にその画像の意図する内容を説明する 装飾目的の画像やアイコンには代替テキストは不要で、適宜
WAI-ARIA の aria-label 属性を設定 する。 概要
下記のような観点で文章を意識して alt 属性を入れると良い。 1. 電話で画像を説明して伝わる 2. 画像が表示されなくても分かる 3. スクリーンリーダーで読み上げて何の画像か伝わる 画像を見て分かる範囲だけではなく画像を見たときに想像できる情報も書くべき。
img 要素の alt 属性の入れ方
• 画像には必ず alt 属性を付ける ◦ 画像に意味がない場合は alt=""(値なし)で良い ◦ alt 属性を省略するとファイル名が表示されたり、スクリーンリーダーがファイル名を読み上
げてしまう場合がある • テキストが表示されても違和感のない文字を入れる • リンクの場合は alt 属性にはリンク先を示す内容にする • 「イメージ画像」や「画像のすぐ側にキャプションがある」場合は、alt=""(値なし)で良い • 画像がグラフや図表の場合、その要約を記述する • すぐ側に説明がある場合は何のグラフ/図表なのかが示されていれば良い • 画像がロゴや文字画像の場合、同等の文字列を alt 属性に入れる alt に入れるテキストのルール
1. 画像は文字を含んでいるか 1.1. 文字を含む画像のすぐそばに本当のテキストもある → alt 属性は空にする 1.2. 画像は純粋に視覚的な装飾目的である →
alt 属性は空にする 1.3. 画像には固有の機能がある(例:アイコン)。 → alt 属性にはその画像の機能を伝える言葉を入れる 1.4. 画像は他の何も表わさない文字そのものである → 画像に書いてある文字をそのまま alt 属性に入れる alt 決定木(An alt Decision Tree)
2. 画像はリンクやボタンか → alt 属性にはリンクの飛び先ページの情報、またはボタンを押したときに何が起きるか (「リセット」「送信する」など)を入れる alt 決定木(An alt Decision
Tree)
3. 画像はページや書いてある文脈に意味を与えているか 3.1. アイキャッチ目的の画像である → 画像の意味を伝える簡単な説明 → alt 属性は空にする 3.2.
グラフや複雑な情報を表している → alt 属性には画像が表す情報を集約して入れる 3.3. その画像を表すテキストが近くに書いてあり、alt に書くと過剰な場合 → alt 属性は空にする alt 決定木(An alt Decision Tree)
4. 画像は純粋に装飾が目的か → alt 属性は空にする alt 決定木(An alt Decision Tree)
参考:An alt Decision Tree | Web Accessibility Initiative (WAI) |
W3C alt 決定木(An alt Decision Tree)
• alt 属性がないと画像ファイル名が表示、読み上げられてしまう • 代替テキストが不要な装飾的画像は空の alt 属性(値なし)を設定する 実装 - alt
属性
ラベルのないアイコンには WAI-ARIA の aria-label 属性を設定する。 実装 - アイコン
実装 - アイコン アイコンを疑似要素で構築している(contentがある)場合、スクリーンリーダーに二重で読み上 げられてしまうことがあるため、次のようにaria-hidden 属性を設定する。
実装 - アイコン テキストを視覚的には表示せず、スクリーンリーダー用のテキストとして用意したい場合は、CSS でテキストを隠す。 ※ 単純に display: none や
visibility: hidden だと認識がされなくなってしまうため、sr-only のようなハックスタ イルが利用される。
実装 - アイコン
実装 - 背景画像 印刷時やハイコントラストモードに背景画像は表示されないことがある(ブラウザの初期設定では 背景画像は印刷しない)。
実装 - 背景画像 img もしくは WAI-ARIA の aria-label 属性、role 属性を設定した要素を使う。
alt 属性に入れるテキストは、画像から読み取れる情報とほぼ等価にするのが理想。 迷ったときは、alt 決定木を参考にテキストを入れると良い。 おわり