Skip to content

Instantly share code, notes, and snippets.

@greggnakamura

greggnakamura/visually-hidden-css.html

Created October 5, 2016 03:53
Show Gist options
  • Save greggnakamura/6d37f69a419a3644cb6c323e062a8d6e to your computer and use it in GitHub Desktop.
Save greggnakamura/6d37f69a419a3644cb6c323e062a8d6e to your computer and use it in GitHub Desktop.
Download ZIP
Accessibility: Visualy Hidden CSS for meaningful link content
Raw
visually-hidden-css.html
<style>
.visually-hidden {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
</style>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores veritatis
similique <a href="/products">read more
<span class="visually-hidden">on our products page</span></a> numquam ullam.
</p>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment