【アクセシビリティ】Visually hidden用スタイル

[ ID : 11332 ]
【アクセシビリティ】Visually hidden用スタイル

概要

要素を視覚的に隠すが、スクリーンリーダーでも読み上げができるようにしたい場合に使用するVisually hidden用のスタイルを紹介。

用途・要件

  • 要素を視覚的に隠すが、スクリーンリーダーでも読み上げができるようにしたい場合に使用。
  • チェックボックスやラジオボタンの装飾時、input要素を非表示にする場合に使用。(input要素をdisplay: none; で非表示にするとフォーカスが当たらずキーボード操作ができないため)

検証ブラウザ

  • Google Chrome(最新)
  • Safari(最新)
  • Firefox(最新)
  • Microsoft Edge(最新)

実装

このコンテンツの続きを閲覧するにはログインが必要です。 新規会員登録

この記事をシェアする

新着記事

全ての記事を見る

KONOCODEのメリット 無料会員登録