HTMLの部品をカスタマイズしたいとき、デフォルトのものは使用しないがHTMLとして存在はさせておきたいときに使えるテクニックがsrOnlyというCSSです。

より具体的にはチェックボックスやラジオボタンの見た目をカスタマイズしたいときに使えるテクニックです。もともとある<input type="checkbox">をdisplay: noneで非表示にしてしまうとアクセシビリティツリー上からも削除されタグが存在しなくなってしまいます。カスタマイズした独自要素が見えているから問題なさそうですが、スクリーンリーダーやキーボード操作を手がかかりとするユーザーからは見えなくなってしまいます。

そこで画面上は見えないが存在はさせるために不可視のスタイルをあてます。これがsrOnlyというCSSです。以下のようなコードです。

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

いくつか細かいバリエーションはありますが、Tailwindの実装例を載せています。srOnlyクラス名をあてた要素は大きさもなく見えません。しかし依然としてHTMLのタグとしては活きているのでキーボードフォーカスやスクリーンリーダーなどは使えます。

もちろん、必ずしもこれだけでアクセシビリティを担保できるとも限りませんが、既存の機能を活かすことでアクセシブルな要素を作りやすくなります。

チェックボックスやラジオボタンなどのインタラクション要素をカスタマイズするときはsrOnlyが便利でしょう。