Visually hidden の運用上の耐性

投稿

アクセシビリティという言葉が世の中に周知されだした頃からでしょうか、視覚上は隠すがスクリーンリーダーなどの支援技術には見せたい（読ませたい）がために .visually-hidden や .sr-only といったテクニックが散見されるようになりました。

例えば Bootstrap(getbootstrap.jp) だと以下のルールセットが定義されています（v5.3.8）。

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

それぞれ関連性のないプロパティを組み合わせた、ルールセット全体で初めて意味を持つものであり、古の Clearfix を思い出させるようなテクニックです。

ただ Clearfix は必要悪であり、いずれ不要になることを信じて仕方なく使っていたものであった[1]のに対し、Visually hidden はどうも「アクセシビリティ的に素晴らしいテクニックだ」と賞賛する声も多いのが気になりますね……。

それはそれとして先日興味深い記事を拝見しました。

アクセシビリティに関するさまざまな問題に対してひじょうに熱意のある「怒り」が伝わってくる記事で、Web 標準の仕事に就いているなら必読だ（RFC 2119 の意味で MUST）(Bluesky)といった感想もあるように、全フロントエンドエンジニア必読の記事だと私も思います。

この記事内で最初に挙げられている具体例では、スクリーンリーダー向けの .screen-reader-text が当初は Visually hidden のテクニックを使っていたはずが、運用途中に display: none に差し替えられてしまった事例が紹介されています。

これはいったい誰が悪いのでしょうか。ろくな検証もせず display: none に差し替えた人がもちろん悪いのですが、そもそも Visually hidden はあくまでテクニックであり、本来の CSS からは外れた使い方であるところ、その周知を怠った初期実装者にも責任があるでしょう。コメントでも書いておけば防げた事案だったのではないでしょうか。

/**
 * 視覚的に隠すがスクリーンリーダーには読み上げさせるテクニック。
 * display: none だとスクリーンリーダーにも無視されてしまうため、以下のような複数のプロパティを組み合わせることで回避する。
 */
.screen-reader-text {
  ...
}

そしてこのコメントは制作者（運用担当者）だけでなくユーザー（閲覧者）にも見せるべきです。すなわち Minify 処理などで消去してはいけません。なぜなら CSS はユーザースタイルシートを書く際などにユーザーも見るものだからです。プロである制作者ですら時に display: none に置き換えてしまうミスを犯すのですから、Visually hidden テクニックを知らない一般ユーザーに対してはなおさら意図を説明する必要があるでしょう。

Visually hidden は冒頭に挙げた Bootstrap のものだけでなくさまざまなバリエーションがあり、どのパターンが優れているかといった話題が時々流れてきます。それは結構な議論ですが、アクセシビリティ的には「意図をコメントで説明する」ことがまずもっとも大事ではないかと考える次第です。

脚注