画像の代替テキストの自動補足機能
iOS の VoiceOver では、ブラウザでウェブコンテンツを利用中に読み上げのフォーカスを画像に当てると、<img> 要素の alt 属性に記述されている代替テキストに加えて、「画像には何が含まれているか」を自動的に補足して読み上げさせることができます。この機能を有効にするには、iOS の「設定 ＞ アクセシビリティ ＞ VoiceOver ＞ VoiceOver認識 」で「画像説明」をオンにします。もともと、特段ウェブコンテンツ向けに用意されている機能というわけではなく、iPhone の「写真」アプリであったり、あるいは各アプリで写真が添付されていたりする場合に、視覚障害者が画像の内容を理解できるよう支援するためのものです。
画像解析の精度はまだまだ粗いですが (画像の外観を想像できるほどの情報量が提供されず、また間違いも多い印象です)、今後精度が向上すれば、コンテンツ利用中にわざわざ別の AI 画像解析ツール (たとえば Be My AI) を立ち上げる、といったユーザー側のひと手間を省くことができるかもしれません。
なお、同様の機能は macOS の VoiceOver (ブラウザは Safari のみ) でも利用可能です。macOS の「システム設定 ＞ アクセシビリティ ＞ VoiceOver ＞ VoiceOver ユーティリティ ＞ VoiceOver 認識」で 「画像説明」にチェックを入れます。VoiceOver の読み上げのフォーカスが画像に当たっているときに VO キー (control と option の同時押し) ＋ Shift ＋ L キーを押すと、画像の内容を補足して読み上げてくれます。
Android でも、TalkBack 14.1 で「画像の説明 (image descriptions)」が可能で、さらに TalkBack 14.2 で「画像の自動説明 (automatic image descriptions)」が可能のようです。ただし私の手元の Android デバイスで試そうとしたところ、TalkBack のバージョンは 14.2 でしたが、「説明の自動読み上げ」という項目は見当たらず、検証できませんでした。Android OS がある程度新しくないと提供されない機能なのかもしれません。
さて、ユーザーがこうした機能を有効にして画像の内容を取得することができると想定した場合、ウェブコンテンツ制作側が注意しなければならないのは、画像 (<img>) の代替テキストが空 (alt="") になっていると、その画像の存在自体がスクリーンリーダー (VoiceOver など) で認識されないことです。alt="" の画像は「コンテンツ制作者が意図的に、意味をなさない装飾画像として実装したもの」としてシステム側に無視され、その内容を自動的に補足して読み上げることができないのです。先の記事「AI 時代における画像の代替テキスト」で書いたことの繰り返しになりますが、安易に画像の代替テキストを空 (alt="") にしないことが、結局のところ重要になります。
余談になりますが、パソコン用の一部のブラウザには、画像の説明を取得する機能が用意されています (参考 : Microsoft Edge のアクセシビリティ機能 (Microsoft サポート)、Chrome で画像の説明を取得する (Google Chrome ヘルプ))。これらは、alt 属性自体が欠落している <img> に対して画像解析をしてくれるというものです (あくまでも過去に制作され広く散在している非アクセシブルなコンテンツを利用するユーザーへの救済です)。こうした機能に依存して alt 属性を省いてもよいとする実装判断は論外であり、<img> 要素には必ず alt 属性を含むようにしましょう (参考 : img 要素の alt 属性の入れかた)。なお、これらブラウザの機能においても、代替テキストが空 (alt="") の画像は解析対象外となることに留意してください。