真・altはつけるだけじゃなくて -alt属性の考察 2025年版-

アクティビティカンファレンス東京 (2025年5月16日開催)
https://peatix.com/event/4346737/view
上記イベントのライトニングトーク1「真・altはつけるだけじゃなくて -alt属性の考察 2025年版-」にて使用したスライドを公開用に編集したものです。また、後ろにオープニングあいさつで使用したスライドをくっつけています。

作者：森田 雄 / 株式会社ツルカメ
https://x.com/securecat
https://turucame.jp/

Transcript

1. 真・altはつけるだけじゃなくて -alt属性の考察 2025年版- アクセシビリティカンファレンス東京 Powered by WIAD Tokyo 2025/5/16 森田 雄, インフォメーションアーキテクト, 株式会社ツルカメ
2. 話者について • 森田 雄（もりた ゆう）といいます • 株式会社ツルカメ 代表取締役社長 • 情報アーキテクチャ、UXデザイン、アクセシビリティの専門家 • 2024年よりWorld IA Day Tokyoオーガナイザー • アクセシビリティカンファレンス東京の運営者のひとり • 公式X @TokyoA11yconf の中の人 2025/5/16 2
3. 「altはつけるだけじゃなくて」とは？ • 技術評論社 Web Site Design Vol.8 での、 アクセシビリティに関する連載第1回の記事。 • 2003年6月17日発売のムック。 • 「実践アクセシブルHTML」という連載記事。 • 自分史上、初めての「連載」だった。 2025/5/16 3
4. 実践アクセシブルHTML • 第1回のタイトルが「altはつけるだけじゃなくて」 • 元原稿をクリエイティブコモンズ表示 (CC BY 4.0）で公開。 • 2003年12月26日に w3j.org で初公開。 • 2011年10月26日に yuugop.com に移転し公開。 • 2020年8月18日に、クレカ決済に失敗して消滅していたのを 再公開。この時にWCAG 2.0 達成方法集 H45について加筆。 https://yuugop.com/ articles/practicalacce ssiblehtml/pah01.ht ml 2025/5/16 4
5. 功績 • 日本最古の実践的なウェブアクセシビリティ資料のひとつであり、今なお、 様々な企業のガイドライン等から参照されている。 • 株式会社サイバーエージェント - Ameba Accessibility Guidelines https://a11y-guidelines.ameba.design/1/1/1/ • 株式会社SmartHR – SmartHR Design System https://smarthr.design/accessibility/alternative-text/ • 株式会社ディーゼロ - アクセシビリティチェックリスト https://a11y-checklist.d-zero.co.jp/n001/ • ちなみに日本最古の出典は accrefs.jp の年代別インデックスから。 2025/5/16 5
6. 書いてあること • altの書き方、特に、内容の考え方。考える時の視点。 • 画像の代替となるテキストではなく、テキストの代替として利 用する画像という視点から考えようと呼びかけている。 2025/5/16 6
7. ちなみに「alt」についておさらい • HTMLのimg要素（および他の一部の要素）のalt属性。 • 画像を扱えない環境・状況・ブラウザで、画像の代わりに利用されるテキ スト。 • 「代替テキスト」、「altテキスト」などという。 • HTML 4.01では「 For user agents that cannot display images, forms, or applets, this attribute specifies alternate text.」とされ、longdescがあっ た関係でDTD上では「short description」とされていた。 • HTML 3.2のDTDでは「 for display in place of image」 • HTML Standard（現在）においては「Replacement text for use when images are not available」 2025/5/16 7
8. alt Decision Tree （altディシジョンツリー） • 2014年よりW3Cが提供している 代替テキスト決定のための二択 チャート • https://www.w3.org/WAI/tutoria ls/images/decision-tree/ja 2025/5/16 8
9. altディシジョンツリーの読み解き方① • その画像はテキストを含んでいますか？ • 装飾目的 or 機能（アイコン） or 文字 • 装飾目的は後述 • 機能を示すアイコン単体の場合、本来ともなうべきラベルをaltにする • だが、そもそもとしてアイコン単体にしない。できるかぎりラベルをともなう • ラベルをともなう場合、アイコンは装飾目的と化す • アイコンなどそもそも不要まである • 装飾目的は後述 • 文字のパターンは今どきほぼ無い • むかしは見出しを画像文字にしていたが今はそもそもテキストなので • 企業ロゴの場合は企業名をaltにする 2025/5/16 9
10. altディシジョンツリーの読み解き方② • その画像はリンクまたはボタンの中で使用されていますか？ま た、画像が存在しない場合はリンクまたはボタンがどのような 動作をするか理解することが困難または不可能ですか？その画 像はテキストを含んでいますか？ • 機能（アイコン） • 設問は長いが、ようするに機能（アイコン）の画像かどうかを問うている • 機能（アイコン）のaltは前述のとおり 2025/5/16 10
11. altディシジョンツリーの読み解き方③ • その画像は現在のページまたは文脈に意味を与えていますか？ • 意味のある画像 or 複雑な画像（ダイヤグラム） or 機能（アイコン） • 「意味のある画像」と「複雑な画像（ダイヤグラム）」がaltの難しさの象徴 • これらの書き方で役立つ「考え方」を「altはつけるだけじゃなくて」で論じている • 画像の代替テキストではなく、テキストの代替画像というスタンス • 機能（アイコン）のaltは前述のとおり 2025/5/16 11
12. altディシジョンツリーの読み解き方④ • その画像は純粋な装飾目的、またはユーザー向けではないもの ですか？ • 装飾目的 • alt=“”を使うと書かれているが…（後述） 2025/5/16 12
13. 装飾画像とは何なのか • Visual styling such as borders, spacers, and corners; • 境界線、スペーサー、コーナーなどの視覚的なスタイル。 • Supplementary to link text to improve its appearance or increase the clickable area; • リンク テキストの外観を改善したり、クリック可能な領域を拡大したりするための補足。 • Illustrative of adjacent text but not contributing information (“eye-candy”); • 隣接するテキストを説明するが、情報を提供しない、「目を楽しませる」ためのもの。 • Identified and described by surrounding text. • 周囲のテキストによって識別および説明される。 • 以上のような「装飾画像」を、いまどき img要素で展開することはほとんど無い。 2025/5/16 13
14. 今どき「装飾」は本当に装飾である • つまり文書構造と外観の分離が 果たされており、装飾やレイア ウト等はCSSで提供されている • img要素じゃないならaltは無い • altディシジョンツリーの「装飾」 という選択肢はすべて割愛できる 2025/5/16 14
15. 今どきの「altを書く場面」は2種類ある • 時間があるか、ないか。 2025/5/16 15
16. １つめ：時間がある • サイト作成（ニュースリリース等のページ作成）時など • つまり作業時間がある程度確保できる状況 • 時間があるのでaltディシジョンツリーに基づいてaltを決定する • 「装飾画像」の選択肢は割愛 • 意味のある画像 or ダイヤグラム or 機能（アイコン） • 「意味のある画像」はようするに写真 • 文脈に沿った内容を「端的＋それなりに詳しく」書く。 • コンテンツ作成者とアクセシビリティスペシャリストが協力して書こう！ 2025/5/16 16
17. ２つめ：時間がない • SNSへの投稿時 • ゆっくり投稿する場合は「1つめ：時間がある」 • 時間がない：「ごはん美味しそう→写真とる→投稿」こういうやつ • コンテクストが不要（あるいは重要度が低い） • 時間がないパターンでのaltの決定方法 • 画像の内容そのものをフラットに書くのがベストだが、時間軸の足並みがそろわ ないという問題がつきまとう • SNSの自動入力に委ねる • 詳細は閲覧側の機能に委ねる 2025/5/16 17
18. SNSの自動入力：Xの場合 • Xの投稿では、画像を添付する時にaltを書く ことができる • 書かないと、 • Webでは、alt=“画像” • Appでは、alt=“縦長”または alt=“横長” が自動で入る ※言語設定に応じた値として。 2025/5/16 18
19. もうちょっとマシな自動入力をしてくれ • パワーポイントでさえ、代替テキストを自動生成してくれると いうのに。 • SNSも、あとSlackなどのチャットツールも、端的な画像タイ トルを挿入するくらいできるのではないか 2025/5/16 19
20. 閲覧側の機能による詳細読み • Edgeの代替テキスト生成機能 • [設定] > [アクセシビリティ] > [スクリーン リーダー用に Microsoft から画像の説明を取得する] • クラウドと機械学習による機能として2022年より提供 • 現在は生成AI活用で、ChromeやNVDAのアドオンがあったり • Be My AI等を使ってデスクトップ上の表示を読み上げたり • 「alt=“”ではない」ことが望まれる。 • alt=“”だと画像がそこにあること自体が伝わらない場合がある • 画像があることさえ分かれば、とりあえずどうにかなる • つまり極論、「alt=“画像”」とかでもいい（SNSの自動入力） 2025/5/16 20
21. 提供側はalt作成から解放されるのか？ • されない • 現在時点では、少なくとも解放されない • 「意味のある画像」の意味を（あるいは、提供者の意図を）AIが正し く読み取れるまでは、適切なaltを用意する必要がある • 例： 2025/5/16 21
22. まとめ • 2025年版としてのaltディシジョンツリーは、 • 時間がある or ない ↓ • あるなら、altディシジョンツリーから装飾画像を消した版を使う • ないなら、端的な画像タイトルを書く • 最悪、SNSの自動入力に委ねるでもいい • 12ページの後述より：ただし、真の意味での「装飾（eye-candy）」をきちんと伝達す る必要があるのではないか？という問題提起が残る • imgでない以上、代替テキストとしては伝達できない • 本文で雰囲気やトンマナを伝えるようなライティングの必要性 • Be My AIのアプローチがむしろ適切か？ • 引き続き、要研究です。 2025/5/16 22
23. おしまい • ご清聴ありがとうございました • ご意見・ご感想・その他もろもろありましたら、 • X @securecat へメンション • または Xのハッシュタグ #tokyo_a11yconf で話題にしてください！ 2025/5/16 23
24. アクセシビリティ カンファレンス 東京 2025年5月16日
25. 毎年5月の第3木曜はGAADの日 • 毎年5月の第3木曜は世界アクセシビリティ啓発デー（GAAD／ Global Accessibility Awareness Day：ギャード）であり、世界 各地でアクセシビリティを考えたり議論したりする日です。 • 2025年は5月15日、昨日でしたが、 日本では、当日にGAAD、翌日にアクセシビリティの祭典と、 2日連続で世界アクセシビリティ啓発デーを祝う伝統芸能が、 連綿と受け継がれてきました。
26. 本日はGAAD Day2 • 2015年から毎年開催され、昨年2024年に10周年を迎えたアクセシビリ ティの祭典が、昨年、充電宣言をされたため、今年はアクセシビリティの 祭典がありません。 • え～ せっかく毎年、2日連続で万障繰り合わせているのに～ と、思った私森田が、WIAD Tokyoオーガナイザーに呼び掛け、祭典の代 わりイベントをやると決意しました。当初は「祭典の代わり」というふざ けた名称だったのですが、ゆうてんさんに仁義もきって「アクセシビリ ティカンファレンス東京」として開催することとなりました。
27. 本日の式次第 • 開会あいさつ • キーノート 大河内直之さん • セッション1 長谷川敦士さん • ライトニングトーク1 森田雄さん • セッション2 大橋正司さん • ライトニングトーク2 伊原力也さん • 閉会あいさつ • 時間割はPeatixをご確認ください。 https://peatix.com/event/4346737/view
28. 協賛
29. Xのハッシュタグ #tokyo_a11yconf 盛り上げよろしくお願いいたします