CSS Nite LP62「Webアクセシビリティの学校」特別授業 フォローアップ（4）澤田 望さん

2019年6月1日に大崎ブライトコアホールで開催したCSS Nite LP62「Webアクセシビリティの学校」特別授業のフォローアップとして、澤田 望さん（SAWADA STANDARD DESIGN）の『代替テキスト決定ツリーの使い方』セッションのスライドなどを公開します。

• スライド（PDF）
• 動画

フォローアップ

セッション4「『代替テキスト決定ツリー』の使い方」を担当いたしました澤田です。
岡山の中年講師の話を最後まで聞いていただきまして、本当にありがとうございました！

アンケートでもたくさんの質問を寄せていただきましたが、参加者の皆さんが自分事として真剣に考えていただけた結果かなと、たいへん嬉しく受け取っています。
次回フォローアップにて、すべて回答いたしますので、少々お待ちください。

画像に対する代替テキストは、さまざまなアクセシビリティ向上施策の中でももっとも基本の「キ」でありながら、実に奥が深い（難しいという意味ではなく、様々な解釈や手段のある）トピックです。
そういう意味では、代替テキストに対する考え方にも多様性があることを感じていただけたのではないかと思います。

勉強会「リーダブルな夜」では、セッションやハンズオン終了後に参加者の感想や意見を伺う時間を設けて、なるべく登壇者からの一方通行にならないよう、お互いに知識を深められるように努めています。
今回はそれがSNSであったり、懇親会であったり、別の形でしたが様々なご意見を伺えたことは素直に嬉しかったです。

当方自身は普段、一般企業／公共系サイト等のアクセシビリティ検証作業を担当することが多いのですが、いまだに代替テキストに関する問題は多く、なかなか減らない印象を持っています。
「誰が考えるべきなのか」「本来の担当者に考えてもらうためには、組織や仕組みなど何をどう変えればいいのか」を含めて、皆さんが代替テキストと向き合い、現状より少しでも改善されることを願っております。
その際に「代替テキスト決定ツリー」がお役に立てれば本望です。

勉強会「リーダブルな夜」
URL：https://readable-na.world/

次回は7月8日（月）19:30からの予定です。
詳細が決まりましたらSNSでご案内いたします。
もし岡山にいらっしゃる予定のある方、興味がございましたら是非ご参加ください！

「情報過多なのでは」というご意見について

参加者の皆さん、本当に多くの疑問質問をいただきましてありがとうございました。「情報過多なのでは」と疑問を感じられた方から、次のようなコメントをいただきました。

• ギモンが残った。
• 「alt=""」で良いケースが多かったかと...
• alt書きすぎ問題も発生する可能性があると感じました。
• 主観を入れるのは疑問。視覚健常者が得る情報よりも上回っている。受け手に判断させるべきでは？
• 本当に必要なのかな... Twitterを見たらご意見がいろいろあって、もう少し基準があると良いなと思いました。
• 感覚的な話が多く、結局制作者側の考え方次第のような気が。特に例えで出た内容は現実的ではないと感じた。
• どこまでaltで補足するか（長すぎて伝わらないかも？）ちょっと悩みます... クライアントにも知ってほしいかも。
• alt属性は、イメージが主のコンテンツ以外ではあまり詳細を書くとかえって本文の読み下しにじゃまでは... と気になった。
• 情報量が多い画像のaltの内容には個々の考えや好みがありそうで、マークアップ以上に宗教戦争の火種になりそうだと思いました。
• 情景的なものはライティングになってくるので、コンテンツ作る人でないと本当に適切なものは書けないかな。勝手に想像してもまずいし。
• 挿絵のaltは場合によってはノイズになってしまうかと思ったので、これまであまりつけてませんでしたが、つけた場合もいいのかなと考えさせられました。
• Web小説などで写真や挿絵があった場合、テキストは入れないのも小説の世界を提供するアクセシビリティなのではと思いました。そもそもどのタイミングで写真の代替テキストが耳に入ってくるのか。

私の見解は以下の通りです。

まず、小説であれば純粋に文字から想像して楽しむための文学作品ですので、著者が望まない写真や挿絵はそもそもコンテンツとして入れるべきではないだろうと考えます。しかし、著者が納得の上でコンテンツに入れられている写真や挿絵であれば、それは何らかの効果を狙った（もしくは説明が必要だと判断した）画像だと考えられますので、その画像の内容を代替テキストに書くべきだと考えております。ただし、どこまで著者が関与したコンテンツなのかという情報は、実装担当者まで届かないケースも多いでしょうから、そのような状況で実装担当者が自らの判断で代替テキストを創作することは危険だと思います。そのような場合は代替テキストを空にするという判断もあり得るでしょう。

当方は検証する側の立場が多いですので、「代替テキストの内容が足りないのでは」「代替テキストの内容が不適切なのでは」といった指摘をすることがあります。しかし、コンテンツのオーナーや原稿制作者から「そのままで問題ない」と判断されるケースは少なくありません。セッション後半でお話ししたように「適切さ」についてはコンテンツ／原稿制作者側ではないと意図を汲んだ判断ができません。現状では実装担当者が判断しなければならない案件や体制が多いと思いますので、コンテンツ／原稿制作者側に代替テキストも考えてもらえる運用体制づくりの必要性を感じています。

今回、当方がカモメの写真を例にしたページで「小説の挿絵なら？」というタイトルをつけたことは、皆さんに疑問を抱かせる結果となってしまいましたので、説明する題材のタイトルとして良くなかったと反省しております。また、文学作品的ニュアンスのないコンテンツを例にすれば、皆さんがもっと理解しやすい題材になったかもしれません。

また、次のようなコメントもいただきました。

• 例題のブルースのaltについて。それ以外のaltも...。写説のさし絵のaltなど。altをつけることによって情報過多になり、逆に分かり難くなることがあると思いますが、その場合どうしていますか？
• 等価性を担保するのが難しいと感じた。却って悩みが深まってしまった。
• 文字数は短い方が良いと思ってましたが、長くても良いですか？

「情報過多かどうか」の判断について、当方は「画像の中から視覚的に読み取れる情報かどうか」「付随的な情報（写真に映り込んだ意味のない看板の文字など）ではないか」の二つを軸に判断をしています。「多い／少ない」ではなく「足りているか／足りていないか」での判断です。

例えば、非常に多くの代替テキストを設定した画像に対して、スクリーンリーダーの利用者は「長くて理解しにくい」という感想を抱くかもしれませんが、ビジュアルブラウザーの利用者も同じ画像から同じ（もしくは近い）情報量を得ているはずです。ただ、一次元的な音声に比べて二次元的な視覚情報の方が全体像を把握しやすいため、重要な事項を認知（取捨選択）するための負荷が少なくて済む（ので苦にならない）のではないかと考えています。代替テキスト全体の情報量は多いまま変わらなくとも、個々の文を短く切ることで音声の認知負荷を下げることはできますので、なるべく長文は避けると良いと考えます。

「リーダブルな夜のテーマ」の例については、たしかに「不安げに」の部分はあの画像からは読み取れませんでしたので、おっしゃる通り情報過多でした。申し訳ございません。

さらに、このようなコメントもいただきました。

• カモメの例など「phとかぶらない情報を」というのは同意なのですが、オス／メスの説明など、むしろ文章からもphからもわからないことをaltだけで言ってしまっていて、情報過多なのでは？と思います。

（※「ph」の部分が読み解けませんでしたので、「ph」のまま表記しています）
あのユリカモメの写真は当方が撮影したものですが、撮影した際には大きさの違う複数の個体を確認していました。その中からオスだと判断した写真を今回使用しましたが、あの写真の中だけでは確かに比較対象がないためオスだと見分けることは難しいですね。その前提がない状態で考えると、たしかに、おっしゃる通り情報過多といえるかもしれません。

その他のご質問／ご意見と回答

実例では本文と画像の例でしたが、実際には本文、画像、その画像のキャプションで構成される原稿が多いです。こういった場合でのaltに迷うことが多いです。具体的な指針はありますか？

「画像＋キャプション＋本文」も「画像＋本文」と考え方は同じで、「意味がある画像なのかどうか」「隣接するテキスト（この場合は本文＋キャプション）で説明されていない内容がないかどうか」を判断します。
代替テキストとキャプションと、どちらを充実させるかという判断になった場合は、キャプションの方を充実させましょう。見えるテキスト情報の方が、より多くの利用者に恩恵がありますので。

上流の方々に響きやすいaltを設定する意味としては何になりますか？

当方がお話ししたのは、「代替テキストの内容が適切なのかどうか、を判断できるのは上流の担当者であることが多い」という内容でした。ですので、「上流の担当者に納得してもらいやすい代替テキストを書きましょう」という意味ではありませんでした。当方の言葉が聞き取りづらかったり、スライドが理解しにくかったかもしれません。その点はお詫びいたします。

なかなか大規模サイトだと全部は難しいなとは思った。／「適切さを判断できる人」に挙げられた職域の人にどう対応してもらうか、について課題だと考えています。

（※2名の方からの質問をまとめさせていただきます）

大規模サイトの隅々まで徹底させることは、代替テキストに限らず難しいことですよね。言葉による啓蒙だけでは難しい壁があります。当方の過去の経験では、ガイドラインの整備と並行して原稿のフォーマットを作成し、代替テキスト入力欄を設けるなどし、原稿制作者に入力してもらう仕組み作りを進めていました。とはいえ、一方的に押し付けるのではなく「ここはこんな感じの説明を入れるといいですよ」的なフォローは必要ですし、原稿制作者側とコミュニケーションしながら進めることが重要ですね。

デザイナーが代替テキストを指定する必要はありますでしょうか？

コンテンツに使用されている写真／グラフ／図などは、上流の担当者ではないと判断ができないものが多いですが、ナビゲーションエリアにおけるアイコンや商品画像など、デザイナーでも判断できる画像はあります。
特にサイト全体で使用される共通画像については、実装担当者と調整しておく必要があると思います。

誰が代替テキストを書くことになるのかの話がもう少し詳しくお聞きしたかったです。

今回は「代替テキスト決定ツリーの使い方」がテーマのセッションでしたので、誰が担当するのかというテーマについてはあまり時間が割けませんでした。ただ、決定ツリーを使って様々な判断基準を知っていただいても「実際の業務では自分たちの負荷が増えるだけ」と捉えられないよう、担当の件についても少しだけ触れました。より理想的な制作フローに改善できるよう、少しでもヒントになっていれば幸いです。

辻ちゃん植ちゃんの時間にもでてきたが「アーリエリア？ウェルアリア」と聞こえた単語は何ですか？

聞き取りづらかったようで申し訳ございません。「WAI-ARIA（ウェイ・アリア）」という、アクセシブルなリンチ・インターネット・アプリケーションを制作するための（属性を追加する）仕様になります。

組織図のaltは「組織図」にしていました。さっそく見直します。

実際のコンテンツの構成を見ないと判断は難しいです。組織図を描いた画像とは別に、組織の内容がリストなどテキスト情報として十分に実装されているような場合でしたら、「組織図」で問題ない可能性もございます。ただし厳密には組織図の制作者ではないと「テキスト情報として十分」かどうかの判断はできませんので確認は必要です。もしテキストで説明しきれていない部分がある場合は、補足していただけたらと思います。

idで紐づける方法で読み上げた場合、内容が被ったりしないのでしょうか？

読み上げ時の操作方法と、スクリーンリーダーの仕様によって違いはありますが、Mac版VoiceOverなどは一つ一つのオブジェクトを指定して読む場合、aria-describedby属性に関係付けられた対象を読み上げますが、ページ全体を自動で読む場合はaria-describedby属性に関係付けられた対象を読み上げません。ですので、関係付けられてはいますが、読み上げ時に重複しているという印象は受けにくいのではないかと感じています。

「イラスト：◯◯」の「：」コロンですが、つけたほうがよいでしょうか。読み上げた時うざったいのかなと思って... 半角スペースにしてもよいものでしょうか。

うざったいかどうかの判断はできませんが... 当方は「：」の後に続く文面の中で半角スペースを使う可能性が高いと感じており、区別がつきにくいため、「：」を使うことが多いです。また、スクリーンリーダーによっては「：」などの記号を読み上げないものもありますので完璧ではないです。

アクセシビリティ的にはnullとすべき場合に、SEO的要請からはどのように対応すべきでしょうか？当該画像に特段の意味がなければ問題ないでしょうか？

意味のない装飾画像に代替テキストは設定すべきではありません。力強く空（""）にいたしましょう。

スライダーのimgが複数枚ある場合、altには何を入れますか？

（キービジュアルエリアなどのカルーセル表示する）スライダーには、複数のimg要素を使用することが多いのではないかと思いますので、それぞれのimg要素にそれぞれの代替テキストを設定します。最新の制作事情をキャッチアップできていませんので、時流に乗っていない回答でしたら申し訳ございません。もし、1つのimg要素の内容を動的に書き換えて画像を切り替えるような仕組みの場合は、alt属性値も画像に合わせて切り替える必要があります。

レスポンシブデザインでPC用スマホ用で同じ意味を持つ画像をそれぞれ別の画像で表示する場合、altはどのようにいれれば良いでしょう？（片方は空にしていたのですが、iPhoneのVoiceOverでは表示されるスマホ用しか読み上げないらしく）

回答になっているかどうか自信がありませんが、レスポンシブWebデザインで表示する画像を切り替えるのでしたら、img要素+alt属性値を複数用意するのではなく、srcset属性+sizes属性などを利用して画像を切り分ける方法ですと、alt属性値は一つで済みますのでシンプルで良いのではないかと感じています。

今回のスライドのような実際の良い例をたくさん見れるところがあれば教えてください。

業務で関わりのある企業サイトを直接ご紹介することはできませんので、なかなか難しいのですが、米国内の空港に乗り入れる日本の航空会社（米国航空アクセス法の対象）のサイトは充実している印象を持っています。

代替テキストの適・不適を判断してくれるソフトとかないでしょうか？

残念ながら「内容が適切かどうか」を判断してくれるソフトウェアは存じ上げません。自動ではありませんが、 Web Developer などの機能拡張を使って画像と代替テキストを並べて表示することができますので、「内容が適切かどうか」の判断がし易くなると思います。また、 A11yc のような、画像と代替テキストの一覧表を作成してくれるツールは効率的にチェックができて便利です。