Non-Visible Link Context

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.

  1. Create the link or button with the contextual verbiage, as you normally would.
  2. You will need to edit the Source code View HTML Source Code button
  3. 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.