視覚的に隠すアクセシブルな方法

visually-hidden-for-a11y.css

/*
視覚的に隠しつつスクリーンリーダーでは読み上げられる。
display:none, visibility:hidden, height:0, width:0 ではうまく機能しない（視覚・聴覚両方で該当要素は利用できない）
（インクルーシブHTML P.75より）
*/

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}