Microsoft Edgeの自動生成代替テキストを試してみた
アクセシビリティ・エンジニア 中村（直）今月中旬にクラウドと機械学習で代替テキストのない画像に説明を付与 ～「Microsoft Edge」に新しいアクセシビリティツール - 窓の杜で伝えられているように、Microsoft Edgeがスクリーンリーダー向けに自動代替テキストを生成するようになったとのことです。ということで、少し試してみました。（なお、公式の情報はAppears to say: Microsoft Edge now provides auto-generated image labels - Microsoft Edge Blogにあります）
Edge側の設定としては、edge://settings/accessibilityにある[スクリーン リーダー用に Microsoft から画像の説明を取得する]をオンにするだけです。
ここでは、NVDAを用いて読み上げさせた結果を見ていきたいと思います。
冒頭の窓の杜の記事ですと、記事にある「「Edge」のアクセシビリティ設定に追加された［スクリーン リーダー用に Microsoft から画像の説明を取得する］オプション」という画像キャプションの付いている画像について、（残念なことに）代替テキストが提供されない画像のテキストですので、自動代替テキストの生成対象となります。
実際に生成される代替テキストは、「次のようです: グラフィカル ユーザー インターフェイス, テキスト, アプリケーション. 次のように述べているようです:」という形で始まり、確かにアプリケーションのスクリーンショットであることが認識され、そのことがユーザーに想像できる内容になっています。そして、画像の中身については、画像中の文字が検出されており、アドレスバーにある「Edge | edge://settings/accessibility」というのがしっかりと読み上げられました。もっとも、ウィンドウの構成までは読み取れないため、ひたすら横方向に書いてある文字を読み上げることになります。多少ぼやけていてもきっちりと日本語の文字も含めて認識しており、このあたりはAIの力といったところでしょうか。
なお、読み上げをいろいろと試している中で、Edgeのコンテキストメニュー「新しいタブで画像を開く」で画像を開いても画像認識を行うことに気づきました。これは、その場でどんな画像なのかを認識できるということになります。また、Edgeでローカルの画像を開いても同様に画像認識を試みます。これは地味にすごいことかもしれません。
同様に、ローカルのHTMLであっても読み上げてくれます。ローカル環境でどのようなHTMLコードで自動代替テキストを生成するのかをごく簡単に試したところ、img要素の場合は、単純にaltの存在が自動生成するかどうかの判定になっているようです。つまり、alt属性がない場合のみ自動生成が実行されるようです。
さて、いろいろと画像を試してみましょう。新宿区のロゴを読み上げさせてみたところ、「新宿区 SHINJUKU CITY」となりました。ロゴであっても読み上げてくれるようです。一方、渋谷区の場合は、ロゴの画像がSVGで提供されているために、画像認識が行われませんでした。
人物も試してみました。当社の採用情報サイトのページにある、木達の画像を読ませたところ、「a man wearing a suit and tie sitting in front of a laptop」となりました。スーツとネクタイの男性までは認識したものの、笑顔であることは認識されなかったようです...。
単なるイメージ画像はどうでしょうか。当社採用サイトのWebサイト制作の流れと職種紹介というページでの、見出し「ミツエーリンクスのWebサイト制作の流れ リニューアル編」にある背景画像ですと、「a person sitting at a table」となりました。テーブルや人の存在こそ認識できていますが、画像は人がテーブルの上にある資料を指さしている状況ですので、実際とは異なる結果となっています。 見出し「戦略立案」にある背景画像ですと、「説明はありません。」となりました。認識できる手がかりがないとやはり難しいということなのでしょうか。
当社のWebアクセシビリティ入門セミナー 2022のページにある、「オンライン開催 参加無料 2022年5月17日(火) 15:00～16:00」とある画像は、「次のようです: グラフ. 次のように述べているようです: オンライン開催 参加無料 2022年5月17日(火) 15:00～16:00」となり、グラフ扱いされているものの、画像中の文字はやはりしっかりと認識されています。
最後に動物はどうでしょうか。東京ズーネットのどうぶつ図鑑の動物の写真ですと、次のようになりました。
- アライグマ：「an animal looking at the camera」
- カピバラ：「a group of sheep eating grass on a sunny day」
- キリン：「a giraffe standing in a field」
- サーバル：「a cat that is standing in the grass」
- フンボルトペンギン：「a bird swimming in water」
きちんと動物の種属を識別できているものもあれば、そうでないものもあります。カピバラを羊、フンボルトペンギンを鳥と実際の種別と異なる結果を返しているのは、写真に写っている姿に影響されている、といったところでしょうか。
いろいろな画像を試してみましたが、ある程度の手がかりが得られる一方で、誤認識やそもそも認識できないものがあることがわかります。もちろん、コンテンツ制作者がきちんとした代替テキストを提供する必要があるわけですが、そうではないページをスクリーンリーダーのユーザーが閲覧したときに、一定の精度のヒントを与えてくれる心強いツールといえるでしょう。スクリーンリーダーユーザーが積極的にMicrosoft Edgeを選択する理由になるのかもしれません。