On rare occasions you may need to add non-visible link context. The solution is to apply CSS class which visually hides contextual text, while still making it readable by Google, adaptive screen readers, and other non-visual displays.
In WordPress the class is “screen-reader-text.” Every WordPress site already has the additional CSS built into its core to make the rest of the magic happen. So just follow these simple steps to implement this solution:
- In the rich text editor create a read more link with your contextual verbiage, as you normally would.
- From the top of the rich text editor select Text to edit the Source code
- Follow the example below to add a span tag with the screen-reader-text class around the text that you’d like to hide.
Example:
<a href="/about">Read More <span class="screen-reader-text">about the cutest kittens on the internet</span></a> - Important: In the rich text editor your hidden text will be visible. To see what your link will look like when it is published, click the preview button. If you’ve followed our instructions you should only see a Read More link. When you are satisfied with your link just click publish to complete!
