Skip to content

Instantly share code, notes, and snippets.

@skorasaurus
Created November 26, 2019 19:09
Show Gist options
  • Select an option

  • Save skorasaurus/e9cc0b4af9ff75c2c240766eb40488bc to your computer and use it in GitHub Desktop.

Select an option

Save skorasaurus/e9cc0b4af9ff75c2c240766eb40488bc to your computer and use it in GitHub Desktop.
Sometimes it can be appropriate to provide extra information in a link just for screen reader users, via hidden text. The text is hidden by CSS, using the clip method.
Begin code:
<head>
<title>Museum Information</title>
<style>
.visually-hidden {
position: absolute;
clip: rect(0 0 0 0);
border: 0;
height: 1px; margin: -1px;
overflow: hidden;
padding: 0
width: 1px;
white-space: nowrap;
}
</style>
</head>
<body>
<p>
The National Museum of American History is devoted to the scientific,
cultural, social, technological, and political development of the United States.
<a href="https://www.si.edu/Museums/american-history-museum">
Read more
<span class="visually-hidden">
about the National Museum of American History
</span>...
</a>
</p>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment