Every now and then a developer needs to include special content that should be seen by screen reader users, but not by anyone else. But what is the best way to convey this information? In some cases, an aria-label is the way to go, but more often screen reader-only text is best. Here are some instances for each. Hopefully, this helps answer the question: Should I use aria-label or screen reader-only text?
The first thing to consider is the content you want to add. If it is essential and/or beneficial for all users, just make it visible to all users. Screen readers will still see it and so will everyone else, no need to reinvent the wheel.
That being said, screen reader, only text is great for providing more context to a link whose purpose may be obvious visually due to its location on screen but could be confusing without visual cues (for instance: “Add to Cart” next to a product on a retail site). Depending on what other contextual clues are nearby, A screen reader user might ask: “Add what to cart?”
<a href="add-to-cart-link">Add to Cart</a>With some screen reader-only text, you could provide more information that may not be apparent to screen reader users:
<a href="add-to-cart-link">Add to Cart<span class="screen-reader-only"> super cool product you were considering</span></a>You can then apply the following CSS rules:
A quick note about the “clip” CSS rule: clip is deprecated in CSS3 and eventually won’t be supported. Clip-path is replacing clip but until it is widely supported by browsers it is a good idea to include both.
.screen-reader-only {
position: absolute;
height: 1px;
width: 1px;
clip: rect(1px 1px 1px 1px); // IE 6 and 7
clip: rect(1px,1px,1px,1px);
clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
-webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
overflow: hidden !important;
}This will hide the span visually but screen readers will still read it.
Of course, it should be noted that the previous example could also be accomplished by the use of an aria-label as well by doing:
<a href="add-to-cart-link" aria-label="add product name to cart">Add to Cart</a>While you could certainly do this, the main upside to using screen reader-only text over an aria-label is that the screen reader is not required to support ARIA, it’s simply reading text on the page that sighted users cannot see. While most screen readers support ARIA, you may not want to rely on it if you don’t have to.
Another example of when you might want to use screen reader-only text is for headings that were added specifically to help screen reader users. Many screen reader users, when searching for the content they are interested in on a page, will use their screen reader to jump from heading to heading. Unfortunately, it might not always make sense to start each section of the page with a visual heading, so you could instead make those headings screen reader only as a compromise.
There are a few use cases for aria-label where screen reader-only text won’t suffice. For example, giving your nav tags an aria-label like “Main” or “breadcrumbs”. This will help differentiate the navigation sections and give the user a better idea of where they are on the page.
Like this:
<nav class="nav" aria-label="Main">
<ul>
...
</ul>
</nav>
<nav class="nav" aria-label="breadcrumbs">
<ul>
...
</ul>
</nav>
Or, perhaps you have a page with multiple product listings, and it’s difficult for screen reader users to know where one product ends, and another begins. You might try the following:
<div role="group" aria-label="product">
<h4>$50 Gift Card</h4>}
<img src="gift-card-image.jpg" alt="$50 gift card" />
<span class="price">$50.00</span>
<p class="description">A $50 gift card. One size fits all!</p>
</div>It should also be noted that the purpose of aria-label is to provide a label for something, typically a control or page section. Say you want to provide different instructions for screen reader users than for sighted users. Here’s the wrong way to do this:
<div aria-label="These are screen reader user specific instructions.">These are instructions for everyone else.</div>The right way to do this:
<div class="screen-reader-only">These are screen reader user specific instructions.</div><div aria-hidden="true">These are instructions for everyone else.</div>Not only is the second technique more in keeping with the purpose of the aria-label attribute, but it’s also the only one likely to work in most screen readers. In the first example, most screen readers will ignore the aria-label completely.
As you can see, we often recommend screen reader only text over aria-labels, but both techniques have their drawbacks:
- It’s harder to test; one must use a screen reader to fully test how effective the text is.
- Since the text does not appear on the page, it runs the risk of being forgotten about, or the element it applies to could get moved or changed, rendering the text useless, outdated, or confusing.
- It’s not available to everyone; non-screen reader users are excluded from accessing this information, even if it might be of help to them.
