• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
UT Shield

College of Fine Arts WordPress Instruction

College of Fine Arts WordPress Instruction

University of Texas At Austin

  • Home
  • Quick Start
  • Get Started
    • Log in
    • Dashboard Workspace
      • Dashboard Menu
      • Screen Options Tab
      • Other Tools and Areas of the Dashboard
    • Create & Edit Pages
      • Using the Editor
        • Text Editor
      • Page Editing Screen Details
      • Password Protecting Website Content
    • Delete a Page or Post
    • Blog & News Posts
      • Using the Editor
        • Text Editor
      • Post Editing Screen Details
      • Post Category as a Menu Item
    • Images, Multimedia & Attachments
      • Add Images
      • Thumbnail Image Gallery
      • Video & Audio
      • Slideshow Carousel
        • RoyalSlider Instructions
      • Add Media from External Services
      • Documents & Attachments
      • Floated Images
    • Navigation & Links
      • Menu Navigation
        • Post Category as a Menu Item
      • Non-Visible Link Context
      • URL Web Address
    • Manage Comments
    • Social Media & Networks
  • Advanced
    • Manage Editors & Contributors
    • Page Layout Options & Custom Features
      • Available WordPress Themes
        • UT WordPress Theme
      • Column Layouts
      • Custom Features
        • Tabular Data
        • Team or Category Grids
      • Header Images
  • General Web Instruction

Non-Visible Link Context

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:

  1. In the rich text editor create a read more link with your contextual verbiage, as you normally would.
  2. From the top of the rich text editor select Text to edit the Source code
  3. 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:

    1. In the rich text editor create a read more link with your contextual verbiage, as you normally would.
    2. From the top of the rich text editor select Text to edit the Source code
    3. 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.

Primary Sidebar

Open Office / Co-Working Sessions

Second Monday of the month:

11 a.m. – 12:30 p.m.

Fourth Thursday of the month:

2 p.m. – 3:30 p.m.

Email us for the Zoom link.

College of Fine Arts Web Instruction
Subscribe to our email list to receive periodic tips and resources for generating great digital content

Contact Us

The COFA Web team can be reached by emailing us at cofawebmaster@austin.utexas.edu

UT Home | Emergency Information | Site Policies | Web Accessibility | Web Privacy | Adobe Reader

© The University of Texas at Austin 2025