Preview
Visually Hidden
Visually hides a given item.
Uses .hidden() mixin.
This technique is borrowed from https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
Example
<p>You shouldn't be able to see the following paragraph:</p>
<p class="visually-hidden">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat harum nostrum earum illum assumenda cupiditate consequuntur. Atque fuga dolorum explicabo, modi deserunt animi tempore iusto eveniet aut eum ut accusamus.
</p>
Assets
- Filesystem Path: src/components/helpers/visually-hidden/_visually-hidden.scss
- Size: 40 Bytes
-
Content:
.visually-hidden { @include hidden(); }