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
210
アクセシビリティを意識して、 画像の代替テキスト(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
150k
Next.jsで開発を始める前に知っておくと良さそうなこと
hiro0218
2
610
CSS in JS を何となく知る
hiro0218
1
520
ITCSSの良いところ
hiro0218
1
610
Other Decks in Technology
See All in Technology
Making your applications cross-environment - OSCG 2024 NA
salaboy
0
180
初心者向けAWS Securityの勉強会mini Security-JAWSを9ヶ月ぐらい実施してきての近況
cmusudakeisuke
0
120
データプロダクトの定義からはじめる、データコントラクト駆動なデータ基盤
chanyou0311
2
280
Why does continuous profiling matter to developers? #appdevelopercon
salaboy
0
180
隣接領域をBeyondするFinatextのエンジニア組織設計 / beyond-engineering-areas
stajima
1
270
スクラム成熟度セルフチェックツールを作って得た学びとその活用法
coincheck_recruit
1
140
テストコード品質を高めるためにMutation Testingライブラリ・Strykerを実戦導入してみた話
ysknsid25
7
2.6k
Amazon Personalizeのレコメンドシステム構築、実際何するの?〜大体10分で具体的なイメージをつかむ〜
kniino
1
100
Lambdaと地方とコミュニティ
miu_crescent
2
370
オープンソースAIとは何か? --「オープンソースAIの定義 v1.0」詳細解説
shujisado
5
630
マルチモーダル / AI Agent / LLMOps 3つの技術トレンドで理解するLLMの今後の展望
hirosatogamo
37
12k
[FOSS4G 2019 Niigata] AIによる効率的危険斜面抽出システムの開発について
nssv
0
310
Featured
See All Featured
Writing Fast Ruby
sferik
627
61k
Building Better People: How to give real-time feedback that sticks.
wjessup
364
19k
A better future with KSS
kneath
238
17k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Music & Morning Musume
bryan
46
6.2k
Measuring & Analyzing Core Web Vitals
bluesmoon
4
120
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
860
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
109
49k
Embracing the Ebb and Flow
colly
84
4.5k
Typedesign – Prime Four
hannesfritz
40
2.4k
Art, The Web, and Tiny UX
lynnandtonic
297
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 決定木を参考にテキストを入れると良い。 おわり