On rare occasions you may need to add non-visible link context. There are two methods for doing this in WordPress. Both methods visually hide contextual text, while still making it readable by Google, adaptive screen readers, and other non-visual displays. Please note the key differences between with how each method is read by screen reader technology.
We encourage our editors to use the preferred method first, as it is the method that is more universally recognized as abest practice.
Preferred Method:
The preferred method is to add an accessible attribute called an aria-label. This type of label is the accessibility standard adopted by all browsers and is platform agnostic.
To add an aria-label to your link just follow these simple steps:
- 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 the aria-label and contextual text. With this method it is important to use a complete sentence as your label (see example). This is necessary because screen reader technology will read the aria-label only, ignoring the Read More link text.
Example:
<a href="https://sites.utexas.edu/cofadrupal/add-non-visible-link-context/" aria-label="Read more about adding accessible context to links">Read More <a/>Important: Take care to add your aria-label after the closing parenthesis for your link address. When you are satisfied with your link just click publish to complete!
Alternate Method:
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. With this method your screen-reader-text doesn’t have to be a full sentence. The screen reader technology will read your “Read More” link text first, and then “about adding accessible context links.”
Example:
<a href="/about">Read More <span class="screen-reader-text">about adding accessible context to links</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!
Learn More
Read more about techniques for using aria-labels for describing the purpose links.
