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
310
アクセシビリティを意識して、 画像の代替テキスト(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
89
ZOZOTOWN に CSS in JS(Emotion)を導入して1年後の状況
hiro0218
7
150k
Next.jsで開発を始める前に知っておくと良さそうなこと
hiro0218
2
650
CSS in JS を何となく知る
hiro0218
1
600
ITCSSの良いところ
hiro0218
1
700
Other Decks in Technology
See All in Technology
Large Vision Language Modelを用いた 文書画像データ化作業自動化の検証、運用 / shibuya_AI
sansan_randd
0
100
いま注目しているデータエンジニアリングの論点
ikkimiyazaki
0
590
職種別ミートアップで社内から盛り上げる アウトプット文化の醸成と関係強化/ #DevRelKaigi
nishiuma
2
130
OpenAI gpt-oss ファインチューニング入門
kmotohas
2
960
KAGのLT会 #8 - 東京リージョンでGAしたAmazon Q in QuickSightを使って、報告用の資料を作ってみた
0air
0
200
Escaping_the_Kraken_-_October_2025.pdf
mdalmijn
0
130
生成AIを活用したZennの取り組み事例
ryosukeigarashi
0
200
【新卒研修資料】LLM・生成AI研修 / Large Language Model・Generative AI
brainpadpr
23
17k
動画データのポテンシャルを引き出す! Databricks と AI活用への奮闘記(現在進行形)
databricksjapan
0
140
神回のメカニズムと再現方法/Mechanisms and Playbook for Kamikai scrumat2025
moriyuya
4
520
OCI Network Firewall 概要
oracle4engineer
PRO
1
7.8k
自動テストのコストと向き合ってみた
qa
0
110
Featured
See All Featured
It's Worth the Effort
3n
187
28k
Code Review Best Practice
trishagee
72
19k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
890
RailsConf 2023
tenderlove
30
1.2k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Side Projects
sachag
455
43k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
A better future with KSS
kneath
239
17k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Code Reviewing Like a Champion
maltzj
525
40k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
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 決定木を参考にテキストを入れると良い。 おわり