visually-hidden を使おう

#yumemi_grow

私は誰

#yumemi_grow

visually-hidden とは

要素を視覚的に非表示にしつつ、スクリーンリーダーなどの支援技術には認識されるためのパターン

#yumemi_grow

視覚的に非表示にする CSS

display: none;

visibility: hidden;

これらはアクセシビリティツリーから削除されるため、
支援技術に読み上げられなくなってしまう

#yumemi_grow

.visually-hidden

.visually-hidden {
	border: 0;
	clip: rect(0 0 0 0);
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
}
#yumemi_grow
#yumemi_grow

Q. とはいえ、いつ使うん？

#yumemi_grow

A. たくさんあります！

#yumemi_grow

例1：日付表示

  • 2024/7/16
  • 2024-7-16
  • 2024.7.16

「スラッシュ」「ハイフン」「ドット」などと読み上げられてしまう

#yumemi_grow

本来は 2024年7月16日と表記すれば問題ない。
しかし、プロダクトの都合上、現実問題そうはいかない場合もある！

#yumemi_grow
<time datetime="2024-07-16" aria-hidden="true">2024/7/16</time>
<span class="visually-hidden">2024年7月16日</span>
#yumemi_grow

例2：アイコンのみのボタン

<button type="button">
  <span class="visually-hidden">メニュー</span>
  <span aria-hidden="true">☰</span>
</button>
#yumemi_grow

visually-hidden ではなく aria-label でよくない？

<button type="button" aria-label="メニュー">
  <span aria-hidden="true">☰</span>
</button>
#yumemi_grow

個人的には visually-hidden のほうが良いと思います

#yumemi_grow
  • aria-label はブラウザの自動翻訳サービスの精度が不安定。
    • 翻訳されないことがある
  • visually-hidden はあくまで視覚的に表示されないだけ
#yumemi_grow

注意

  • 晴眼者にとっても伝わりづらいデザインは避けるべき
  • visually-hidden を使う際は aria-hidden を使うケースも多い
  • 晴眼者とスクリーンリーダーユーザー間で情報の差異がないように
#yumemi_grow

最後に

適切に visually-hidden を使ってアクセシブルな Web を提供しよう

#yumemi_grow

参考

#yumemi_grow