アイコンのアクセシブル

aria-hiddenで隠す

アイコン付きリンクの場合、「お問い合わせ」というテキスト情報が存在するため、アイコン自体はスクリーンリーダーにとって不要な情報である。このような場合は、aria-hidden=”true”でスクリーンリーダーに対して非表示（認識されない状態）とするのが適切である。

<a href="/contact/"><i class="fas fa-envelope" aria-hidden="true"></i>お問い合わせ</a>

aria-labelでラベル付けする

アイコン単体で特定の意味や役割を表現するインフォグラフィックスとしてアイコンフォントが使われている場合は、aria-labelでラベル付けをしておけば、アイコンにフォーカスが当たると「お問い合わせ」と読み上げてくれる。

<a href="/contact/" class="mark" aria-label="お問い合わせ">
  <i class="fas fa-envelope" aria-hidden="true"></i>
</a>

i要素自体にaria-labelを設定するのが本来の形と思われるが、Safari・iOS Safari ＋ VoiceOverの環境ではa要素に設定しないと上手く読み上げられないため、このケースではa要素のほうにラベルを設定する。

スクリーンリーダー用のテキストを使う

aria-labelを設定する代わりに、HTML上にスクリーンリーダー向けのテキストを用意しておき、ビジュアルブラウザからは非表示にしつつ、スクリーンリーダーからは読めるようにしておくという方法もある。これは一般的に「visually-hidden」と呼ばれる手法で、アイコンに限らずいわゆる「隠しテキスト」を実装するための方法である。
例えば「セマンティクス的にはh2やh3などの見出しが必要でもビジュアル的にはそれを見せたくない」といったケースでも使用できるため、広い範囲に応用が可能である。スクリーンリーダー対策としてはaria-labelを使った手法と差はないが、HTML上に記載されたテキストが検索エンジンにもインデックスされるため、アクセシビリティとSEO対策を共通化する目的がある場合はこちらがおすすめ。

<a href="/contact/" class="mark">
  <i class="fas fa-envelope" aria-hidden="true"></i><span class="visually-hidden">お問い合わせ</span>
</a>
/* ビジュアルブラウザからは隠し、スクリーンリーダーには読ませる */
.visually-hidden {
　position: absolute;  /* コンテンツの流れから切り離す */
　white-space: nowrap;  /* 誤ったコードに対処するための回避策 */
  /* 可能な限り文字サイズを小さくするための処理
  （スクリーンリーダー中には height と width が 0 のものを無視するため） */
　width: 1px;
　height: 1px;
　overflow: hidden;  /* オーバーフローしているコンテンツを隠す */
　border: 0;  /* 要素サイズを変更しうるプロパティのリセット */
　padding: 0;
　clip: rect(0 0 0 0);  /* 要素のどの部分が表示されるかを定義するもの。古いブラウザでは使用できない */
　clip-path: inset(50%);  /* 最近のブラウザ用。コンテンツを非表示にする設定 */
  /* 今現在なぜ-1pxがここで設定されるかは分かっていないそうです。
  それに加えていくつか問題もあるそうです */
  margin: -1px;
}
inserted by FC2 system