UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

【Accessibility】ヘッダーのアイコンをどうするべきか

アクセシビリティ対応で、クリックするとトップページへ戻るヘッダーのアイコンの代替テキストをどうするべきか悩んだ

これに対して、ドンピシャな記事があったのでメモ

note.com

いろいろな角度から考察がされていて面白い

記事の結論は

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

である

根拠はWCAG2.1 ガイドライン 1.1.1 (Non-text Content) www.w3.org

ただ、「トップページへ戻る」という機能を伝えるという代替テキストも捨て難い

そこで、以下のように「企業名 - トップページへ戻る」とするのはどうなのだろうか

<a href="トップページのURL"><img src="logo.png" alt="企業名 - トップページへ戻る"></a>

W3C の "HTML 5.2 W3C Recommendation" の 4.8.4.4.2 A link or button containing nothing but the image のセクション では、リンクやボタン内にある画像についての代替テキストは、リンクやボタンの機能を説明するべきとされている

「-」で繋げることがいいのかは改善の余地がありそうだが、リンクの機能を説明するとともに、ブランド名や企業名を含めるのも悪くないような気がする