'sr-only' In Html

## Introduction

There you are, carrying out your routine inspection of the source code of random web pages, then something catches your eye: an 'sr-only' HTML class, or maybe you came across this peculiar HTML class during your online lessons like I did. You are curious, you want to know what it does, and you start to ask questions.

I experienced a similar situation, snooped around the web for a bit, and will be sharing my findings.

## sr-only tag and accessibility

The 'sr-only' tag is a class that is used to apply some special CSS code to an HTML element. The 'sr' stands for screen reader.

Evidently, the tag is used to apply code to make an element 'visible' only to screen readers, and hidden from the rendered page layout.

Why would we want elements hidden from page layout and visible to screen readers? The answer is accessibility.

Accessibility means designing websites in a way where anyone can interact with and use them, regardless of disabilities. We want information on a webpage to be available to those who do not interact with our website in the traditional way, so we use accessibility tools such like sr-only. The sr-only tag allows us to provide information to people accessing our website with a screen reader, without altering its intended design layout.

For instance, visually impaired people cannot access graphical data such as pie charts, so you provide a data table as an alternative. However, this causes redundancy on the page layout for those viewing the site traditionally, so we use the sr-only tag to hide the table from the document layout. People who browse the website traditionally will only see the graphical chart, while people that use screen readers will be able to access the table.

## How does it work?

The ‘sr-only’ tag works by applying CSS code that take the element it is applied to out of the document’s normal flow, out of sight, and out of the reach of tools used in traditional web browsing.

For example, the element’s height and width can both be set to zero, it could be absolutely positioned, and can be moved off-screen with margin or position properties.

Something you are bound to notice if you examine the ‘sr-only’ code is its redundancy. They can be long and have code that would make you think, ‘Why did they not settle with just adjusting this one parameter? After all, setting position to absolute and setting margin-left to -1000px takes the element out of page layout’.

However, the ‘sr-only’ code is made redundant for good reason, compatibility. It has to cover different case scenarios, and must work perfectly on different platforms, browsers, and devices. If a particular code does not work in a particular situation, other code will work instead. Great care has been taken by experts in compiling the code in the ‘sr-only’ tag to ensure they work without breaking every time, and anywhere they are used.

So if you find yourself in a situation where you have to design accessible content for screen readers, be sure to use the ‘sr-only’ tag.