inputをdisplay:none;するとアクセシビリティ下がる

ラジオボタンやチェックボックスのデザインを調整するために input タグのデフォルトの見た目を消したくなりますよね。 appearance: none; を使えばデフォルトの見た目を消せますが、IE11が未対応なのでIE11をサポートする場合には使えません。 そして、デフォルトの見た目を上書きするのも面倒なので input を display: none; して装飾してしまいますよね。 例えば、以下のような形です。

<style>
.checkbox {
  display: none;
}
.checkbox-text {
  /* 素敵な装飾 */
}
</style>
<label>
	<input class="checkbox" type="checkbox">
	<span class="checkbox-text">素敵なチェックボックス</span>
</label>

しかし input を display:none; で非表示にしてしまうとアクセシビリティが低下してしまうため避けた方が懸命です。 なぜなら、display:none; されている input はtabキーでフォーカスができなくなってしまうため、キーボードユーザーがそのチェックボックスやラジオボタンを選択することができなくなってしまいます。

キーボードユーザーというのは、スクリーンリーダーなどの支援ソフトを利用している視覚障害者や、マウスポインタなどの繊細な操作が困難な身体障害者や高齢者が考えられます。 そういったユーザーのアクセシビリティが低下してしまうため input は display: none; にしない方が懸命です。

じゃあどうやってスタイルするんだって話ですが display: none; で完全に非表示にするのではなく visually-hidden という限りなく見えないようにする方法があります。 visually-hidden とは、スクリーンリーダーには読ませたいけども、視覚的には非表示にしたいというアクセシビリティ対応のテクニックです。

visually-hidden で検索するとサンプルコードが色々と出てきますが、解説も含めてわかりやすいものを以下に引用します。

.visually-hidden {
  /* コンテンツの流れから切り離す */
  position: absolute;
  /* 誤ったコードに対処するための回避策 */
  white-space: nowrap;
  /* 可能な限り文字サイズを小さくするための処理
   * (スクリーンリーダー中には height と width が 0 のものを無視するため)
   */
  width: 1px;
  height: 1px;
  /* オーバーフローしているコンテンツを隠す */
  overflow: hidden;
  /* 要素サイズを変更しうるプロパティのリセット */
  border: 0;
  padding: 0;
  /* 要素のどの部分が表示されるかを定義するもの */
  /* 古いブラウザでは使用できない */
  clip: rect(0 0 0 0);
  /* 最近のブラウザ用
   * コンテンツを非表示にする設定  */
  clip-path: inset(50%); 
  /* 今現在なぜ-1pxがここで設定されるかは分かっていないそうです。
   * それに加えていくつか問題もあるそうです 
   * (参考: https://github.com/h5bp/html5-boilerplate/issues/1985)
   */
  margin: -1px;
}

引用元: アクセシビリティを意識した CSS の書き方

visually-hidden を使ってチェックボックスやラジオボタンを装飾すれば、キーボードユーザーにやさしいサイトになります。 試しに、先ほど書いた display: none; にしていたチェックボックスの例を書き換えてみます。

<style>
.checkbox {
  /* display: none; */
  /* ↓ display:none; を visually-hidden に変更 */
  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;
}
.checkbox-text {
  /* 素敵な装飾 */
}
</style>
<label>
	<input class="checkbox" type="checkbox">
	<span class="checkbox-text">素敵なチェックボックス</span>
</label>

こんな具合になります。 記述量が増えてしまうので Sass で visually-hidden のスタイルを使い回せるようにすると良いかもしれません。

display: none; と visually-hidden のチェックボックス・ラジオボタンの挙動の違いは、以下の動画から確認できます。