The Power of sr-only: A Guide to Accessible Design

December 5, 2024 (7mo ago)

Accessibility is not a feature, it's a necessity.

[— Anonymous]

I’ll be honest, when I first saw the sr-only class in Tailwind CSS, I had no idea what it was for. I’d see it in other people’s code and think, "What the hell is this for? Why would you add content just to hide it?" It seemed counterintuitive. But once I understood its purpose, it became one of my favorite accessibility tools.

What is sr-only?

The sr-only class is a utility that visually hides an element but keeps it accessible to screen readers. It’s a clever trick. Instead of using display: none;, which hides the element from everyone (including screen readers), sr-only uses a combination of CSS properties to effectively move the element off-screen.

Here’s the magic CSS that makes it work:

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

This way, a screen reader will still find and read the content, even though a sighted user won't see it. You can read more about it in the official Tailwind CSS documentation.

A Real-World Example: The Shopping Cart Icon

Let's think about a super common UI element: a shopping cart icon in an e-commerce site. Often, you'll see a cart icon with a little badge showing the number of items.

A sighted user can see the icon and the number and instantly understand, "This is my cart, and I have 3 items in it."

But what does a screen reader say? Without any extra help, it might just announce "Button" or "Link, graphic of a shopping cart." That's not very helpful. How many items are in the cart?

This is where sr-only becomes so important. We can add extra, descriptive text that only screen readers can access.

Here’s how you might build that in React with Tailwind CSS:

import { ShoppingCart } from 'lucide-react';
 
export default function CartButton({ itemCount }) {
  return (
    <button className="relative p-2 rounded-md hover:bg-gray-200">
      <ShoppingCart className="w-6 h-6" />
      {itemCount > 0 && (
        <span className="absolute top-0 right-0 px-2 py-1 text-xs text-white bg-red-500 rounded-full">
          {itemCount}
        </span>
      )}
      <span className="sr-only">
        Shopping cart, {itemCount} {itemCount === 1 ? 'item' : 'items'}
      </span>
    </button>
  );
}

Now, let's break down what's happening:

  • Sighted users see: The shopping cart icon and the number badge (e.g., "3").
  • Screen reader users hear: "Shopping cart, 3 items."

We've provided a much richer, more informative experience for screen reader users without cluttering the visual design. The sr-only text gives them the full context that sighted users get from the visual cues.

Conclusion

So, that's the sr-only class. It's not some weird, esoteric utility. It's a practical tool for making your websites more inclusive. It’s a simple change that can make a huge difference for a lot of people. The next time you're building a UI with icon buttons or other visual-heavy elements, take a second to think about the non-visual experience. A little sr-only text can go a long way.

LinkedIn
X