WordPress Component Library
10up Engineering

Read More

Ideally your link text should be descriptive enough to stand alone. Links like “click here”, “learn more”, “continue reading”, and “read more” are only helpful within the context of the content. But when screen readers extract all links from a page for easy navigation you end up with a lot of links that don’t say anything about where they go (very unhelpful, right?).

However, if you must use a link that says, “read more”, this is how you can do it in an accessible way.

With whatever class you use to hide the “read more” overflow text it’s important to make sure you’re not using display: none, because it will remove the content from screen readers, making this exercise kinda useless.

HTML

<p>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit.
	Ut aliquet suscipit rhoncus. Donec ornare, dolor a
	dignissim pretium, arcu sapien pretium neque, non pharetra arcu magna
	nec turpis. <a href="#!">Read more <span class="screen-reader-text">about
	an interesting article to read</span></a>
</p>

SCSS Download SCSS

// Component Sass

/*
  Hide the text however you want, just don't use
  visibility: hidden; or display: none; because
  it will hide the text from a screenreader
*/

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	width: 1px;
}

Resources