Following are instructions for how to add non-visible link context. Remember clickable text on your page must be unique and relevant to the context and clearly identify the target of the link. The following makes it possible for you to provide more contextual information about your links for Google, screen readers, and other non-visual displays.
Preferred Method for Links:
- In a Body field when you are using the Link button, insert the link as you normally would.
- Click “Advanced” and enter the text you want to replace the visibly represented link text with in the “ARIA label” field. The clickable link text that is seen on the screen will be replaced by the content in the ARIA label field when it is read to screen reader users.
Alternate Method to Hide Non-Visible Content:
- Select the text you want to hide.
- From the Styles drop-down, under the “Text styles” select the box “Visually hidden”
This will add a span tag around the content with the class to visually hide it.
While this is no longer the preferred method for adding link context, you may see it utilized on older content and there are some additional use cases where hiding some content visually may be necessary, in those rare cases, this is the method we use.
In the Source code 
You should see code like the following example:
<span class="visually-hide">about pandas</span>
Note that the class text “visually-hidden” will also work, but you won’t see the text in the editor. Therefore, using “visually-hide” is easier for content creation.
Hide on Mobile or Desktop
Related to hiding visually is the ability to hide content based on the screen size.
Learn More
Read more about techniques for using aria-labels for describing the purpose links.
