input[type=file]をCSSでデザインするときにスクリーンリーダーに対応する方法

input[type=file]はデフォルトで表示される文字がブラウザで決まっていたりなどデザインしにくい。

そういったときは、label要素などを使用することで、CSSでデザインしていくが、単純にdisplay: none; や visibility: hidden;を使用して非表示にするとスクリーンリーダーで読み上げられないことがある。

そういった場合には下記のようなCSSを用いる。

input[type=file] {
  position: absolute; /* clipプロパティを有効にするために使用 */
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: react(1px, 1px, 1px, 1px);
}

スクリーンリーダー用のテキストで補助する場合は下記のようにする。

.sr-only {
  position: absolute;
  white-space: nowrap;
  width: 1px;
  height: 1px;
  overflow: hidden;
  border: 0;
  padding: 0;
  clip: rect(0 0 0 0 );
  clip-path: inset(50%);
  margin: -1px;
}

なんとなく知っていたけど、細かいコードの意味は知らなくてまだまだCSSでも知らないことがあるんだなあと。