Non-Visible Link Context and Visually Hidden Last Updated January 2025 It’s a general best practice and required for accessibility to have contextually relevant links that set a clear expectation of where the link will go. Clickable text on your page, including the labels in the menu, should be unique and relevant to the context and clearly identify the target of the link. Learn more about the importance of unique clickable text. On This Page Add non-visible link context to links in the Rich Text Editor. Links in the menu with the same label text that link to different places. Learn More Hide on Mobile or Desktop Recommendations Add Non-Visible Link Context 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. Duplicate Menu Labels That Link to Different Pages If your information architecture strategy results in duplicate menu label text, please reach out to he COFA Web team at cofawebmaster@austin.utexas.edu. It is possible for us to change the function of the “Description” field in the Main Navigation Menu interface so you can add additional visually hidden contextual text to the menu labels. Learn More Read more about techniques for using aria-labels for describing the purpose links. Hide on Mobile or Desktop Related to hiding visually is the ability to hide content based on the screen size. Recommendations Make sure the link text that is visible is functioning as expected by conducting usability testing. If the context is not clear it may be a barrier to all visitors, not just those using assistive technology. Always consider best practices for link text and appearance.
