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
240
アクセシビリティを意識して、 画像の代替テキスト(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
620
CSS in JS を何となく知る
hiro0218
1
550
ITCSSの良いところ
hiro0218
1
630
Other Decks in Technology
See All in Technology
個人開発から公式機能へ: PlaywrightとRailsをつなげた3年の軌跡
yusukeiwaki
11
2.7k
Googleマップ/Earthが一般化した 地図タイルのイマ
mapconcierge4agu
1
200
The 5 Obstacles to High-Performing Teams
mdalmijn
0
270
AndroidXR 開発ツールごとの できることできないこと
donabe3
0
110
7日間でハッキングをはじめる本をはじめてみませんか?_ITエンジニア本大賞2025
nomizone
2
1.4k
ビジネスと現場活動をつなぐソフトウェアエンジニアリング~とあるスタートアッププロダクトの成長記録より~
mizunori
0
210
生成AIの利活用を加速させるための取り組み「prAIrie-dog」/ Shibuya_AI_1
visional_engineering_and_design
1
140
インフラをつくるとはどういうことなのか、 あるいはPlatform Engineeringについて
nwiizo
5
2.1k
データ基盤の成長を加速させる:アイスタイルにおける挑戦と教訓
tsuda7
3
650
Data-centric AI入門第6章:Data-centric AIの実践例
x_ttyszk
1
370
事業継続を支える自動テストの考え方
tsuemura
0
300
技術負債の「予兆検知」と「状況異変」のススメ / Technology Dept
i35_267
1
1k
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
The Invisible Side of Design
smashingmag
299
50k
Six Lessons from altMBA
skipperchong
27
3.6k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
How to Ace a Technical Interview
jacobian
276
23k
4 Signs Your Business is Dying
shpigford
182
22k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
29
4.6k
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 決定木を参考にテキストを入れると良い。 おわり