視覚的に非表示

要素を視覚的に隠しつつ、支援技術へのアクセシビリティを維持します。

表示方法 クラス名
デフォルト %{STYLEGUIDE_PAGE}-hide-visually
フォーカスされたときに表示 %{STYLEGUIDE_PAGE}-hide-visually-focusable
<div class="%{STYLEGUIDE_PAGE}-hide-visually">常に視覚的には表示されません<div>
<div class="%{STYLEGUIDE_PAGE}-hide-visually-focusable">フォーカスされているときに表示<div>