見出し画像
Photo by ia19200102

ヘッダにあるブランドロゴの代替テキスト、みなさんならどうする？

平尾ゆうてん

サイトやアプリのヘッダーに存在するブランドロゴ。それはトップページ（サイトホーム）にリンクすることが慣例になっている。その場合、ブランドロゴの代替テキストは何にしたらよいのか。A11yj Slackで有識者に質問をして、とても学びのある楽しい議論が展開できたので、自分なりの解釈を踏まえつつ今回はそれをまとめた。

きっかけと疑問

@potato4dさんのこの疑問。結論から言うと、このツイートへの返信で@kotarokさんが詳しく答えているとおり、ブランド名がよいようだ。

つまり、それが例えばTwitterのロゴだったとして、そのシェイプ（鳥のカタチ）を見た人は「Twitterという不特定多数の140字以内のつぶやきを読んだり、つぶやいたりできるSNS」のような概念を認識している。それは「Twitter」というテキストを識字したときや、「ついったー」と音で聞いたときと最終的に同じ概念を認識できるので代替可能というわけだ。

で、ここまでは自分も理解できていたのだけど、問題はここからだ。トップページへのリンクが貼られている場合「トップページへ戻る」という機能を持っている。視覚的には全体のレイアウトが把握できている上でのヘッダにあるブランドロゴだから「トップに戻る」が予想できる。もしそうでない場合、予想ができない場合、代替テキストは「トップページへ戻る」にしたほうがやっぱり親切なのでは？と頭によぎったのだ。

予想できるようにする

まず、視覚的にヘッダの位置がわからなくともHTMLでヘッダに内包された要素と表現することができる。つまりheader要素を利用する。

<header>
  <a href="/"><img src="logo.svg" alt="ブランド名"></a>
</header>

スクリーンリーダーでもheader要素はヘッダと認識できるように読み上げられる（実際はWAI-ARIAの規定する「banner」というロール名で読まれる）。つまり「ヘッダ内にあるリンクで、画像のaltはブランド名」なので視覚的に認識しているのと同じく「トップページへ戻る」と予想できるのだ。

暗黙の了解のジレンマ

それはそうとして「ヘッダにあるロゴ = トップページへのリンク」というハイコンテクストを予想することができるのか？という問題もある。先に示したheader要素の件も、この暗黙の了解が前提に立った上でしか成り立たない。次のような意見も出た。

もし世の中の暗黙の了解に依らない設計をするとなるとやるべきことはもっと増えてしまう・・・。
すでに暗黙にも了解されていないという噂もある（脱線）

暗黙の了解や予想させることを良しとするならば、次の意見も成り立ってしまう。

スクリーンリーダーユーザーの中にも、ページの先頭にある「ロゴ」っていうリンクはホームに戻るんだという慣れを持ってる人もいるとか……ってあれ？？

そして、次のアドバイスがとても的確だった。

一つの考え方として、視覚で利用している人にとって自明でないことは、スクリーンリーダーのユーザーにも自明である必要はない、という考え方もあります。
視覚で見た時、Twitterロゴであることは明らか、しかしトップヘのリンクであることは自明ではないので、スクリーンリーダーユーザーにもロゴであることが伝わればよい、とする考え方はありでしょう。

狭義のアクセシビリティは「障害の有無にかかわらず平等」という意味で、視覚ユーザーにも使いにくいものは、スクリーンリーダーユーザーにも使いにくくてOK。WCAGの達成基準は割とこういう立場です。
それとは違う立場として、スクリーンリーダーユーザーに少しでも使いやすいUIを提供したい、視覚よりも使いやすくなるなら大歓迎、という考えも、それはそれであり得ます。

機能としての明確化をしたいのであれば、視覚的にもわかりやすいものに変えればいいし、差別化をするならそれもまた良し。どちらかが情報にアクセスできない状態は避けなければならないけれども、単に親切かどうかのユーザビリティの話であればどちらでもよい。

インタラクションとして機能するのか、グラフィックとして機能するのか

もうちょっと考えてみる。

マークアップをするとき「トップページへ戻る」といったように「戻る」というインタラクションとしての機能に意識が向きがちで、ひとつここが悩みを生む種だと思っている。

たとえば視覚的にペンのシェイプで表現されたアイコンボタンがあったとしよう。そしてこのボタンが編集という機能を呼び出すボタンだった場合、代替テキストは「ペン」ではなく「編集」だ。

<button type="button"><img src="pen.svg" alt="編集"></button>

これに異論を唱える人は少ないと思う。先の話でいうと視覚的にハイコンテクストで、セマンティクス・支援技術には自明なパターンだ。

そうなってくると次の場合も成り立つように思えてしまう。同じようなインタラクションの機能を表す代替テキストだからだ。

<a href="/"><img src="logo.svg" alt="トップページへ戻る"></a>

しかしここはぐっと我慢して冷静になって先程からまとめていたとおりに考えてみる。ロゴが持っているのはインタラクションの機能ではない。あくまでブランドに対する抽象概念を表すグラフィックとして機能している、もしくはさせている。

1.1.1 非テキストコンテンツ: 利用者に提示されるすべての非テキストコンテンツには、同等の目的を果たすテキストによる代替が提供されている（以下省略）

WCAGの1.1.1には「同等の目的」と表現されている。これはロゴ自体が持っている機能がインタラクションならそれ、グラフィックならそれ、というそれぞれが同等の目的となる。そう考えると、ヘッダ内のロゴの代替テキストはブランド名というのがしっくりくる。

結論: よほどの理由がなり限りヘッダ内のロゴの代替テキストはブランド名でよい。

ということで宣伝

この一連の質問と議論は、日本のアクセシビリティの専門家や有識者・障害当事者が集まるSlackワークスペースで行われた。参加はオープンなので、議論の詳細を知りたい方はぜひ参加してほしい（ちなみに僕は一参加者であって運営者ではない）。次のリンクから参加申請できる。

もうひとつ、このワークスペースメンバーの有志によって作られたWebアクセシビリティ情報のポータルサイトがあるのでおすすめだ。


いいなと思ったら応援しよう！