「代替テキスト道場」で代替テキスト力を鍛える！
辻ちゃん・ウエちゃんのAccessiブルGoGo! Meetup vol.1「代替テキスト道場」が開催されたので参加してきました！
アクセシビリティの勉強会で必ず話題になる代替テキスト。
適切に設定したい！とは思うものの、一体何を設定するのが適切なのかの判断がなかなか難しい・・・というわけで、実際の事例を中心に代替テキストをどんな風につけるのがいいかをみんなで学びます！
代替テキストとは？
すべての非テキストコンテンツには、拡大印刷、点字、音声シンボル、平易な言葉などの利用者が必要とする形式に変換できるようにテキストによる代替を提供すること
ガイドライン 1.1 テキストによる代替
<img src="images/hoge.jpg" alt="代替テキスト">例えばimgタグ。
スクリーンリーダーは
・alt属性値を読み上げる
・alt=""（alt属性値が空）の場合は、何も読み上げない（画像の存在自体を無視する）
・alt属性値の前に「画像」や「イメージ」と付け加える
代替テキストはいつ使われる？
・スクリーンリーダーで読み上げる
→ 特殊な環境ではなくWindows/macOS/スマホでも標準機能としてある
・点字ピンディスプレイで表示
・目視との併用（ロービジョン／弱視）
・文字を読むよりも音声で聞いた方が理解しやすい
例）ディスレクシア、アーレン症候群、母国語ではない、など
・検索クローラーが文字情報を取得
→ 適切な代替テキストが設定されていると「マシンリーダブル」になる
→ アクセシビリティの問題点としては圧倒的に対応できていないケースが多い
設定がなく、まったく内容がわからないということはなくなってきているそうですが、事例として紹介された東京都のサイトでも「画像の中の文字」と「代替テキスト」の内容に乖離が・・・！（緑色の「新しい日常が定着した社会に向けて〜」というリンクバナーの代替テキストが「新しい日常スライドバナー」のみ）
画像を読み取れる人と読み取れない人で取得できる情報に差があるのは良いこととは言えないですよね。
実例1）見出しに使われている文字画像
・記載の文字はそのまま記載する
・英語表記/ローマ字表記などは一般名詞であればスクリーンリーダーが正しく読み上げてくれる可能性があるので、スクリーンリーダーの読み上げに任せて良い
・装飾が意図的にされているようならそれを補足してもよいかも
alt = Webアクセシビリティ
実例2）バナーリンクその１
・画像に書いてある文字は日本語と英語が併記でも両方書く
・画像の役割上、重要じゃなければ背景の写真の説明はなくてもよい
・aタグはスクリーンリーダーで「リンク」と補われるのでリンクであることを明記しなくても大丈夫
・写真の説明が詳しいと、このサイトそのものやリンク先ページの雰囲気が伝わる。リンク先ページの話だと誤解を招かないように記載する
alt = 打見の農産物 Agricultural products of DAMI。背景にスイカの画像
実例3）バナーリンクその２
・画像内のテキストはすべて忠実に記載する
→ 冗長な場合もあるが、取捨選択権をユーザーに委ねる
・編集、要約する場合は情報が欠落しないように注意
・「詳しくはこちら」まで書くと、リンク先に、より詳細な情報があることが伝わる
・代替テキストはスクリーンリーダーではまとまって一気に読みあげられるため、情報量が多すぎると逆に理解しにくい
alt = 会員登録でポイントGET！もれなく5000円分もらえる！会員登録は2020年7月から、ポイントがもらえるのは2020年9月から。詳しくはこちら
実例4）棒グラフ
・なんの画像なのかが分かるので「グラフ」と記載
→ グラフの種類までは重要ではない
・グラフのタイトルは必須。簡単な補足情報があるといい
・グラフを一見したときに感じる上昇傾向や、詳細データが「テーブルを表示」から確認できることなどは本文で提供すべき情報ではある
・スクリーンリーダーでサイトを閲覧する場合、読んでる時のリズム感のようなものがある。急にリズムを崩すものが入ると理解が阻害される
alt = グラフ：新規患者に関する報告件数の推移（5月6月）。5月から6月にかけて上昇傾向が見られます。詳細は「テーブルを表示」からご確認ください
実例5）遷移図
・本文に説明がない場合は代替テキストで補うしかない
・図であること、概要（図のタイトルなど）をまず最初に示す
→ 先に全体像がわかることで詳細を確認するどうかをユーザーが判断できる
・altを実装者が書くことは多いが、コンテンツ提供者のほうがよりその意図を正確に知っているので、お互いに確認して決めると良い
alt = 図：サービスご提供の流れ。定例会1回目→レビュー→定例会2回目→ユーザーチェック→定例会3回目を行います。その後マニュアルと現状レポートをご提出いたします
実例6）写真
・このimgが写真であることを伝える
→ スクリーンリーダーでは「画像」「イメージ」とは補足されるが、それが図なのかイラストなのか写真なのかはわからないため
・詳しい説明があるとイメージがわくが「概要→詳細」の流れで説明を書く
・ページの意図にもよるが説明についてはポイント部分だけでもよい
・スクリーンリーダーでは情報を「面」で捉えられない
・スクリーンリーダーに限らず、重要な情報から先に提供したほうがよい
alt = 写真：ういんなやきそば。プリプリのウインナーが乗った塩味の焼きそば。くたくたの玉ねぎとコーンがたっぷりのっています。
実例7）検索IF
・検索ボタンが適切にマークアップされていれば、スクリーンリーダーが「ボタン」と読み上げてくれる
・アイコンの意図が上手く伝わるならアイコンの名称を書いても良いが、ユーザーが理解できない可能性があるなら機能に寄せる
いずれの場合も alt = 検索
実例8）本文を補足する例示画像
・このimgが写真であることを伝える
・本文でしっかりと説明しているので、代替テキストはシンプルでもよい
・適切にマークアップされたキャプションがある場合はキャプションにある言葉は不要
・本文に対して不足する情報がある場合は追記する
alt = 写真：サンプル商店街名物の汁なしそぼろラーメン。山椒入りのそぼろがたっぷりかかっています。
実例9）画面キャプチャ・スクリーンショット（設定マニュアル
・何の画像なのかを示す（画面イメージ）
・alt=""で指定すると画像の存在自体がわからない
→ 問題があった場合に他の人に聞けない
・設定マニュアルのページの場合、画面キャプチャとテキストの繰り返しになると思われるので、「画面イメージ」だけではなく軽く説明があると良い
実例10）組織図
・何を示す図なのかの概要を記載
・関係性がわかる記載のしかた（上から〜、社長をトップに〜）
・ただ文字を羅列するのではなく、言葉を補って説明する
alt = 組織図：社長をトップに、経営本部と営業部、商品部、システム部があり、営業部の下には第一営業部、第二営業部がある。
参考）サイボウズさんはリストでマークアップされている
まとめ
・画像にあるテキストはできるだけ書き起こす
・その画像がなんなのかを明示する（写真、グラフなど）
・全体をまずは示してから詳細を説明する
・図の中に関係性が示すものがある場合は言語化する
・説明が長くなってしまう場合は、そもそも本文にできないか考えよう！
・画像の挿入と代替テキストの記載がセットのなるようなコンテンツ制作フローを
・代替テキストには「よりよい」はあっても「正解」はない
Q&A
・CSS擬似要素で提供されるテキストコンテンツ
→ スクリーンリーダーによっては読み上げられない
→ ガイドラインでは推奨されていない
・代替テキスト内にスペースを入れても連続して読み上げられる？
→ スクリーンリーダーではスペースを読み飛ばす
→ 文章量を適切にする方がよい
今回は3名のスクリーンリーダーユーザーの方からそれぞれの意見が聞けてとても楽しかったと同時に、ページを利用するユーザーそれぞれが求めるもの、嗜好が異なり、すべてを満たすことが難しいということを改めて感じた。
自分たちが伝えたいことが、すべての人に伝わるように「このサイトの」「このページの」正解を探し続けるしかない。
参考
イメージ画像の代替テキスト
→ ガイドライン上は装飾的な画像のaltは空でよい
→ 音声と視覚を併用している人やイメージを知りたい人がいることは知っておいた方が良い
※セミナーでは実際のサイト素材を題材にしてましたが、こちらで掲載している題材は私が雑に用意したダミーです。