On rare occasions you may need to add non-visible link context. The solution is to visually hide the context using CSS. We have added a class to the code for all of the websites that hides things visually. Google, screen readers, and other non-visual displays still render the content.
- Create the link or button with the contextual verbiage, as you normally would.
- You will need to edit the Source code
- Add a span tag with a visually-hidden class around the text that you do not want to appear on the page.
Example:
<a href="/about">Learn More <span class="visually-hidden">about pandas</span></a>
Hide on Mobile or Desktop
Related to hiding visually is the ability to hide content based on the screen size.
