visually-hiddenについて

どうも、くまだです。

visually-hiddenのCSSについてのメモ。

visually-hidden

アクセシビリティ対応用で使われるvisually-hiddenというCSSの手法。

具体的には以下のような記述になります。なお、下記は一例で他にも似たような記述があります。

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

visually-hiddenは表示はしたくないが読み上げはしてほしいときに使用します。デザイン上テキストがなく、読み上げさせたいときでも使用できます。

例えば以下のような場合。

<a class="header__title" href="/">
  <img src="ロゴ画像のパス" alt="株式会社○○">
  <span class="visually-hidden">ホーム</span>
</a>

分かりやすい例だと、ロゴ画像やトップに戻るボタンなどに使用します。

参考として、要素を見えなくするCSSのプロパティは主に、visibilityとopacity、displayがあります。

それぞれの違いをざっくりいうと、

• visibility: hidden; →要素は非表示になるが、レイアウト自体は影響されません（表示領域は残る）。アクセシビリティツリーからは削除されます。タブフォーカスもできなくなります。
• opacity: 0; →要素は非表示（透過）になり、レイアウト自体は影響されません（表示領域は残る）。アクセシビリティツリー上では存在しています。タブフォーカスは効いています。
• display:none; →要素を非表示しそもそもないものとして使えます。レイアウト自体にも影響があります（表示領域も消える）。アクセシビリティツリーからも削除されます。

たんに見えなくするといってもいろいろあって、アクセシビリティを考慮すれば使い分けが必要になります。

ここまで読んでくださりありがとうございました。