A Picture Says a Thousand Words, But Not Really

A screen reader user using VoiceOver to read The New York Times article as 'The Changing Nature of Middle-Class Jobs'.

Zoey loves browsing internet.The VoiceOverを使って、ニューヨークタイムスの「中間層の仕事の変化」と題された記事を読みました。 彼らは、情報満載の相互接続されたウェブに迷い込み、ブックマークする価値のある知識の断片を解き明かすことを楽しんでいます。 しかし、彼らは大量のテキストをざっと読むのは好きではありません。 彼らは写真を好みます。 たくさんの写真を。 Facebookで恋人の写真を見る前に、その人の経歴を読もうとする。 ミームやビジュアライゼーションへの憧れは、この地球上の誰よりも強く、彼らのInstagramのストーリーはそれを反映しています。 彼らはまさに、視覚学習者としての性質と深く結びついているのです。

しかし、この世界にはゾーイだけがいるわけではありません。 トルンアンがいて、セウォンがいて、ネヨンがいて、ヴェンカテッシュがいて、ゼキュがいて、ディンコがいて、サドがいて、イワンがいて、モハメッドがいるのである。 WHOによると、世界人口(77億人)のうち少なくとも約29%(22億人)が何らかの視覚障害を持っており、上記のリストでは少なくとも3人が該当することになる。 うーん、では、うーん……人口の29%が視覚コンテンツを見ることができないかもしれないことがわかった今、私たちはどうしたらいいのでしょうか? フレッド・バーナードの言葉「百聞は一見に如かず」を文字通りに解釈するのでしょうか? 私は、あえてそうしません。

よく聞かれる不思議な質問ですが、視覚障害のある人はどのようにコンピュータを使うのでしょうか。 まず、視覚障害があることは、目が見えないことと同義ではないことを理解することが重要だと思います。 ですから、白杖を使っている人を見ても、全盲と判断するのは間違いです。 コンピュータを使う場合、視力のレベルによっては、スクリーン・リーダーを使って画面の内容を読み取ることがあります。 人気のあるスクリーン リーダーには、JAWS、NVDA(無料のオープン ソース)、VoiceOver(Apple 社のデバイスに内蔵)があります。

世界の状況

素晴らしい! つまり、スクリーン リーダーのユーザーがコンピューターやモバイル デバイスと対話するための方法があります。 しかし、スクリーン リーダーのユーザーが恋人の写真を読むにはどうしたらよいのでしょうか。 あるいは、ミーム? あるいはグラフやビジュアライゼーションはどうでしょうか。 ここで考えられる1つの回答は、医療を進歩させて視力を回復させるか、あるいは、スクリーン上にあるものを説明できる介護者、友人、家族を持つようにすることでしょう。 もうひとつは、「自分でできる世界を作る」ということです。

画像

ここで、画像に焦点を当てましょう。 スクリーン・リーダーが画像を読み上げるためには、画像が何であるかを知り、それを意味のある方法でユーザーに提示する必要があります。 たとえば、双子のハスキーと遊ぶ家族の画像を考えてみましょう(Go Huskies!)。 画面を読まないユーザーであれば、この写真で何が起こっているのか、手前の部分だけでなく、背景も含めて簡単に把握することができます。 例えば、家族の一人である嘉麟は「100%人間」と書かれたTシャツを着ています。 スクリーンリーダーは、その場面を完全に抽出することができるのでしょうか? そのためにスクリーン・リーダーは、開発者やコンテンツ制作者が、1995年にHTML 2.0の一部として一般に導入された「alt」属性を使って、画像の代替テキストを提供することに頼っています(alt属性とは何か、それが持つ意義についてよく知らない場合は、こちらの記事でalt属性の概要を説明していますのでご覧ください)。 HTML img 要素は次のようになります:

<img src="image1.jpg" alt="This is an image of two Huskies" />

したがって、スクリーン リーダーの表示は「画像、これは2匹のハスキーの画像です」となります。

alt属性を空のままにしたり「画像1」などの無意味なテキストを供給しても、想像できるように、あまり役に立ちません。 これは 2 頭のハスキーの画像です」という代替テキストを使用しても、中継される情報は、スクリーン リーダーを使用していない人が抽出できるもの、たとえば Jialin の T シャツのテキストには到底及びません。 さらに、スクリーン・リーダーがすでにコンテンツを「画像」または「グラフィック」としてアナウンスしているため、「これは画像です」という冗長なテキストになってしまいます。 これらはすべて、代替テキストを入力するためのコードにアクセスできるユーザーによって画像が投稿されているという前提での話です。

しかし、ソーシャルメディアのプラットフォームのように、コードにまったくアクセスできないユーザーによって画像がアップロードされている場所についてはどうでしょうか。 Facebookは、立ち上げから10年以上経った2016年に、人工知能を採用して画像に自動生成された代替テキストを追加し、必要であればユーザーがこのテキストを編集できるようにしました。 インスタグラムはこれに続き、サービス開始から8年後の昨年、この機能を実装しました。 しかし、代替テキストはどの程度の情報を提供すべきなのか、といった疑問は変わりません。 基本的な、より高度な説明で十分なのか? スクリーン・リーダーのユーザーに何を提示するかを決定する際に、スクリーン・リーダーのユーザーが画像に何を求めているかを想定し、一般化していないか?

GIF とアニメーション画像

Leo はミーム ゲームが得意で、どんな場面でも猫の GIF を見つけるエキスパートです。 GIF が、最終的に非常に短いビデオのような印象を与える方法で、複数の異なる画像を組み合わせて作成されることを考えると、私たちは画像で直面するのと同じ問題に直面するのでしょうか。 もっと悪い。 開発者であれば、画像と同じように代替テキストを追加することができます(GIFは画像ファイルですからね)。 しかし、ソーシャルメディアプラットフォームでは、プラットフォームによるGIFの処理方法に応じて、alt属性のないimg要素を使用してレンダリングされるか、video要素を使用してレンダリングされます。 video 要素は alt 属性をまったくサポートしていません。

つまり、私たちが Facebook や Instagram にアニメーションのミームを投稿するために使用している GIF ウィジェット、私たちをクールにしてくれるものなど、すべてスクリーン リーダー ユーザーにはアクセスできないものなのです。 ここで、私たちの目標は、レオが GIF を投稿するのを止めることではなく (なぜなら、ニャー)、そのようなコンテンツを人口の一部ではなく、すべての人が楽しめるようにすることです。

グラフと視覚化

以上、まだ「難しいこと」に触れていませんでしたね。 グラフとインタラクティブなビジュアライゼーションを紹介します。 Yisu と Xuhai は完全な視覚化オタクで、他の研究者と同様に、グラフと視覚化は非常に価値があると信じており、少なくとも 1 つのグラフまたは視覚化のない学術論文はほとんどありません。 静的コンテンツでは、

  1. 画像として、
  2. HTML canvas 要素として、または SVG チャート(さまざまな側面で画像からアップグレード)として使用されます。
  3. そして/または、動的なコンテンツを提供し、ユーザーがグラフと対話できるようにするために JavaScript ライブラリ (これは通常、基礎となるメカニズムとして HTML canvas または SVG を使用します) を使用したインタラクティブな視覚化として、

画像として使用する場合、科学情報を提示する複雑さを加えて、上で説明したと同じ考慮点が当てはまります。 代替テキストは何を言うべきでしょうか。 グラフの概要を示すべきでしょうか。 平均、平均値、中央値、最頻値などの統計値を含めるべきか。 もしそうなら、どのようなものですか? どの程度の情報では少なすぎ、どの程度の情報では多すぎるのでしょうか? これらは難しい質問です。

HTML の canvas 自体はビットマップとして公開されており、適切なフォールバック コンテンツの実装がなければ、いくつかのアクセシビリティの課題を提起します。 しかし、アクセシブルにするためのテクニックはいくつかあり、Google で検索すればすぐに出てきます。 しかし、もちろん、開発者はそれらのテクニックを知り、自分の作品に実装する責任があります – 私は、時間とともに改善されていくのを見てきましたが、期待しないことにします。 逆に、W3Cの仕様によれば、子要素がAccessibility APIで利用できるため、アクセシブルなチャートにはSVGが推奨されている。 しかし、ブラウザーのサポートはまだ作業中であり、完全にアクセシブルな SVG グラフは、努力と少なくとも SVG の基礎知識を必要とし、これはまた、開発者の肩にかかる責任です。

これらの懸念のいくつかに対処するため、私は evoGraphs – アクセス可能なグラフを作成する jQuery プラグインを作り、2015 年に W4A Conference で Accessibility Challenge の Delegate’s Award を獲得しました。 確かに、科学的な情報を提示することの複雑さに関して、強調された疑問のすべてに対処しているわけではありません。 したがって、アクセシブルなグラフは、私や他の研究者にとって活発な探求領域です。

(ChartJS、Google Charts、D3などの)インタラクティブな視覚化として、動的に更新される情報の表現はやっかいです。 ほとんどのスクリーン リーダーのユーザーはポインティング デバイス (マウス、トラックパッドなど) を使用せず、ほとんどのインタラクションは、特定の要素へのホバー移動がトリガーされたときにのみ限定されるか、より実用的に使用できます。 そのようなインタラクションがなければ、スクリーン リーダーのユーザーに対するインタラクティブな視覚化の目的は曖昧になり、間違いなく、適切な考慮がなければ、コンテンツの理解がより不可解になる可能性があります。 コンテンツが変更されたときの、スクリーンリーダーへの情報のリレーは、2014年にW3C勧告となったARIA属性を適切に使用することで対応でき、正直、神業としか言いようがありません。 しかし、SVGと同様、ARIAのすべての機能に対するブラウザの安定的なサポートは、特にSVG内で使用する場合は、まだ未完成の状態です。 ARIA が提供するものを完全に活用するには、開発者の適切なトレーニングがまだ必要です。

The Path Forward

Tim Berners-Lee が World Wide Web を作ったときから今日まで、技術は劇的に向上しています。 しかし、残念ながら、そうした技術のアクセシビリティについても同じことが言えるわけではありません。 ある技術が障害者にとって利用しやすくなった頃には、世界はすでに、より高度な技術へと移行しているのです。 だから、キャッチアップ・ゲームに終わりはない。 そして、アクセシビリティがより新しい技術の開発における基本的な考慮事項にならない限り、このゲームは終わらないでしょう。 私たちは、学術的な研究と工業製品の両方において、Web アクセシビリティの領域で大きな前進を遂げており、今後もそうし続けるでしょう。 学生や新しい開発者は、アクセシビリティの概念や、Web をよりアクセシブルにするためのテクニックを教えられています。 今後、私は、ユーザーがソフトウェアに適応することを期待するのではなく、一歩下がって、ユーザーのニーズに合わせてソフトウェアを適応させることを考えることを想定しています。 たとえば、スクリーン・リーダーのユーザーが画像から抽出したい情報を想定し続けるのか、それとも、ユーザーについてもっと学び、ユーザーが理解したいと思う情報を提示するツールを構築するのか。 私にとって、未来は、一般化から個人化へ、つまり、真にユーザー中心のワールド ワイド ウェブに近づいていくものだと思います。 世界保健機関、World Health Organization、https://www.who.int/news-room/fact-sheets/detail/blindness-and-visual-impairment. Accessed 20 Oct. 2019.

  • “A Picture’s Worth: D.H.ヘプティング博士” A Picture’s Worth|D. H. Hepting, Ph.D., http://www2.cs.uregina.ca/~hepting/projects/pictures-worth.
  • HTML 2.0 Materials、https://www.w3.org/MarkUp/html-spec.
  • Sharif, Ather, and Babak Forouraghi. “evoGraphs-A jQuery plugin to create web-accessible graphs.”(エヴォグラフ-ウェブアクセシブルグラフを作成するためのjQueryプラグイン)。 2018 15th IEEE Annual Consumer Communications & Networking Conference (CCNC)。 IEEE, 2018.
  • “WAI-ARIAの概要”. ウェブアクセシビリティイニシアティブ(WAI)、https://www.w3.org/WAI/standards-guidelines/aria.
  • .

    コメントする