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
93
アクセシビリティを意識して、 画像の代替テキスト(alt)を 決めるときの観点
from:
https://b.0218.jp/202105192211.html
hiro
June 29, 2023
Tweet
Share
More Decks by hiro
See All by hiro
ZOZOTOWN に CSS in JS(Emotion)を導入して1年後の状況
hiro0218
7
4.2k
Next.jsで開発を始める前に知っておくと良さそうなこと
hiro0218
2
570
CSS in JS を何となく知る
hiro0218
1
460
ITCSSの良いところ
hiro0218
1
510
Other Decks in Technology
See All in Technology
Microsoft Intune 勉強会 第 2 回目
tamaiyutaro
1
250
本当のAWS基礎
toru_kubota
0
540
require(ESM)とECMAScript仕様
uhyo
4
860
AWSに詳しくない人でも始められるコスト最適化ガイド
yuhta28
1
260
Python と Snowflake はズッ友だょ!~ Snowflake の Python 関連機能をふりかえる ~
__allllllllez__
1
130
MapLibreとAmazon Location Service
dayjournal
1
160
Delivering Millions of Messages within seconds @ Duolingo
pelelgrino
0
350
VSCodeの拡張機能を作っている話
ebarakazuhiro
1
660
EM完全に理解した と思ったけど、 やっぱり何も分からなかった話 / EM Night Fukuoka #1
hirutas
0
110
開発パフォーマンスを最大化するための開発体制
ham0215
2
470
Gradle Build Scanを使ってビルドのことを知ろう potatotips #87
tomorrowkey
2
120
Tellus の衛星データを見てみよう #mf_fukuoka
kongmingstrap
0
240
Featured
See All Featured
Creatively Recalculating Your Daily Design Routine
revolveconf
210
11k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
Rebuilding a faster, lazier Slack
samanthasiow
73
8.2k
Agile that works and the tools we love
rasmusluckow
325
20k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.6k
Automating Front-end Workflow
addyosmani
1356
200k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
659
120k
Building Effective Engineering Teams - LeadDev
addyosmani
28
1.9k
Rails Girls Zürich Keynote
gr2m
91
13k
In The Pink: A Labor of Love
frogandcode
138
21k
Designing on Purpose - Digital PM Summit 2013
jponch
110
6.5k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
244
20k
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 決定木を参考にテキストを入れると良い。 おわり