“sr-only – just a class!

The goal of today’s post is to improve websites in terms of digital accessibility for blind users who use screen readers. I decided to address the topic of the ‘sr-only’ class because very often, during audits, we encounter incorrect usage of this element or its absence. Given that Bootstrap has become one of the most popular libraries for creating the visual layer of websites, I believe it’s worth mentioning this class.

What is the ‘sr-only’ class, and why does it help improve accessibility?

The ‘sr-only’ class is defined in the Bootstrap library and is used to hide all content from devices other than screen readers. It allows us to provide context to links, especially in situations where our website contains more than one very general link.

Let’s look at the example below:

Repeated multiple times on the page, the ‘read more’ link does not convey any specific information to a blind person. Sighted users might infer which link corresponds to which article based on other elements near the link. However, a person using a screen reader cannot differentiate between these links or know where they will lead. Moreover, blind individuals often navigate websites solely through the hyperlinks contained within, so these links must be unique and meaningful.

How can we improve this?

In such situations, the ‘sr-only’ class comes to our aid. The biggest advantage of this solution is that it allows us to make it easier for blind individuals to use the website, without making any visual changes to our site. This way, we can add all the information we want to be read only by a screen reader.

Now let’s try to improve the above example and provide context to the links using the ‘sr-only’ class. Let’s examine the code:

<a href="/aktualnosci/ciekawy-artykul-o-turystyce/">
więcej
<span class="sr-only">
o artykule Wakacje - na własną rękę czy z biurem podróży?
</span>
<svg class="icon icon-button-arrow" aria-hidden="true">
<use xlink:href="#icon-button-arrow"></use>
</svg>
</a>

In the above situation, the only thing a screen reader user will hear is “Link, more.” You can see that the developers were looking for a way to read the article title as well by adding a title attribute. However, it is semantically incorrect, and very often not read by assistive tools. It depends on the type of browser used (more on this topic in this article).

It’s time to fix this 🙂 Let’s add a context for the above link – “more”:

<a href="/aktualnosci/ciekawy-artykul-o-turystyce/"> 
więcej 
<span class="sr-only"> 
o artykule Wakacje - na własną rękę czy z biurem podróży? 
</span> 
<svg class="icon icon-button-arrow" aria-hidden="true"> 
<use 
xmlns:xlink="http://www.w3.org/1999/xlink" 
xlink:href="#icon-button-arrow" 
></use> 
</svg> 
</a>

This is how it should look. Any additional attributes like ‘aria-hidden’ or ‘aria-label’ in the code examples I provided are additional improvements worth considering in terms of accessibility. We will discuss them in future posts.

During audits we recommend diverse solutions to our clients, so let me also show you another option that helps provide context to links – the already mentioned ‘aria-label’:

<a href="/aktualnosci/ciekawy-artykul-o-turystyce/"
   aria-label="Wakacje - na własną rękę czy z biurem podróży?">
  więcej
  <svg class="icon icon-button-arrow" aria-hidden="true">
    <use xlink:href="#icon-button-arrow"></use>
  </svg>
</a>

One of the significant advantages of Bootstrap is the predefined ‘sr-only’ class. This means we don’t need to add any additional styles to hide extra content.

What if we’re not using Bootstrap, but we still want our website to be accessible? We can add any class to the extra content and apply the appropriate CSS styles:

position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;

Were you already familiar with these solutions? Do you use them? Personally, delving into accessibility has left a significant impression on me! Until next time :).”