今日からできる実践アクセシビリティSNSというかXでaltをつけよう

アクセシビリティカンファレンス金沢実行委員会主催 アクセシビリティカンファレンス金沢 Pre Meetup(2025年1月25日開催)
https://kanazawa-a11yconf.connpass.com/event/340038/
上記イベントのトークセッション「今日からできる実践アクセシビリティSNSというかXでaltをつけよう」にて使用したスライドを公開用に編集したものです。

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

Transcript

1. 今日からできる実践アクセシビリティ SNSというかXでaltをつけよう 森田 雄 株式会社ツルカメ アクセシビリティカンファレンス金沢 Pre Meetup 2025/1/25 1
2. 講師紹介 • 森田 雄（もりた ゆう） • 情報アーキテクチャとUXデザインとアクセシビリティの専門家 • 株式会社ツルカメ 代表取締役社長、公益社団法人 日本アドバタイザーズ協会 デ ジタルマーケティング研究機構 幹事、一般社団法人Evolve Art & Design Japan 理事、広告電通賞 イノベーティブ・アプローチ部門 委員長 • 「マークアップエンジニア」という職種名を考えた人 (2001年) • 20年以上前に、商業誌で「altはつけるだけじゃなくて」という記事を執筆した 人 (2003年) • 近年の活動：Web Designing 2024年6月号 特集2「Webアクセシビリティ最前 線」を企画・執筆 2
3. alt属性 • alternative text • 代替テキスト • Replacement text for use when images are not available • 画像が利用できない場合に使用する代替テキスト 3
4. 画像が利用できない場合とは？ • 何らかの理由により、画像を表示できない状況 • 画像が置いてあるサーバやディスクの不具合が起きている • 通信環境が著しく悪いかなんかで画像をダウンロードできない • 誰かが間違えて画像を消してしまった • そもそも画像を扱えないブラウザで閲覧している • スクリーンリーダーを使っている • テキストブラウザを使っている • Lynx？ ガラケー？ 4
5. 画像を表示できない状況の例 （ https://necomesi.jp/blog/securecat/posts/803 より） 5
6. スクリーンリーダー • コンピュータ画面を読み上げて表示するソフト（アプリ） • 現在ではPC、スマホともに標準環境で使用することができる • 自分でインストールして使えるスクリーンリーダーもある • 有料のものも、無料のものもある • 一番手軽に体験できるのは、スマホ環境 • iPhoneではVoiceOver • AndroidではTalkBack 6
7. altが無いと、 • 画像だけで伝えている情報が、スクリーンリーダーには伝わらない • 情報が欠落する • その画像にインタラクションが付与されていると、スクリーンリー ダーで認識できない • 本来できるはずの操作ができない • ようするに、困る • ユーザーは情報が得られなかったり操作ができなかったりして困る • サイト側も、使えないユーザーがいることを想像してないから困る 7
8. 画像にはaltを書こう • どういうaltを書けばいいか？ • 「altディシジョンツリー」という、 画像の種類に応じてどのようなaltに すると良いかを判断できるチャート がある。 • https://www.w3.org/WAI/tutorials/i mages/decision-tree/ja 8
9. Xのalt • Xの投稿では、画像を添付する時にaltを 書くことができます • 書かないと、 • Webでは「がぞう がぞう」 • alt=“画像”が自動で入る • Appでは「たてちょう がぞう」 • alt=“縦長”または alt=“横長”が自動で入る などと読まれる • 書けばWebでもAppでもaltが読まれる 9
10. Xのalt向けのディシジョンツリー • その画像は、テキストを含んでおり、そのテキストを読んでほ しくて添付したか？（そのテキスト自体が主役の画像か？） • Yes: • {テキスト}と書かれた◦◦◦ • ◦◦◦で表現された{テキスト} など、テキストそのものを全部書きつつ、画像自体を端的に表現する • No: それ以外の画像すべて • その画像そのものを端的に表現する • 端的な表現が難しい場合は長くても構わない • Xは1000文字まで書ける • ただし文章の構造化は見た目だけで読み上げには関係ないので注意 10
11. 端的とは？ • 何らかのグラフ画像を添付しつつ、altが • alt=“グラフ” 良いか悪いかでいうと悪い。もう一息ほしい • alt=“◦◦◦のグラフ” 実務的にはこの辺りになる • alt=“{グラフの内容を細やかに記述}” 短文投稿との相性が悪い • alt=“{グラフの見た目やスタイルを記述}” そっちかー。でもナシではないかも？ • 何らかの写真を添付しつつ、altが • alt=“写真” 良いか悪いかでいうと悪い。もう一息ほしい • alt=“◦◦◦の写真” 実務的にはこの辺りだが、できれば、これに加えて写真の内容 をある程度記述したい。 • AIに書いてもらうと良い。 • XがAIに初期値としてもたせてくれると良いのだが。 11
12. altをAIに委ねる • Edgeはブラウザ自体にaltの生成機能がある • Automatic image descriptions in Microsoft Edge https://www.youtube.com/watch?v=GhyLc8X_6Mg • Be My AIを使って読み上げる • Be My EyesのAI機能で何の画像なのかを読み取る https://www.bemyeyes.com/blog/introducing-be-my-ai • パワポでaltを作り、altに設定する • パワポに画像を貼ると、シンプルな代替テキストを自動生成してくれます。 • 同等/類似のWebサービスも多数ありますので、それらを使うも良し。 12
13. AIを使うならaltは書かなくてもいい？ • 画像そのものの見た目としての内容を記述するという観点でのaltは、 AIによる画像の読み取りが今後ますます進み、すべてのブラウザや OSに標準搭載の機能となるでしょう。 • ただし文脈に依存した意味をもつ画像の場合に関しては、その画像 をそこで使う決断をした人自身の意図が強く反映されます。この場 合の画像は、コンテンツの一部であるテキストを視覚的な表現に代 替したものです。したがって、コンテンツ提供者がaltを記述する必 要があるのです。 • altはつけるだけじゃなくて https://yuugop.com/articles/practicalaccessiblehtml/pah01.html 13
14. ご清聴ありがとうございました • 本発表に関する質問や感想などありましたら、SNSというかX でお知らせ下されば反応いたします。 • X https://x.com/securecat 14