Like so many other utilities that you just use because they just "work" I've used the sr-only class (in bootstrap and tailwind) religiously over the years. I've also tried to sometimes write my own, without any knowledge of the heuristics. However, one question I've always wondered however is why this class has a 1px width and height? Why not a 0 by 0 element with no overflow and none of that svg clip path hackery?

I recently discovered this interesting blog post recently which addresses this..

It turns out that Safari doesn't focus on links that don't have a width or height! so even with your best intentions if the focus elements don't have a width and height then safari users are going to have a less accessible experience 💩 You can fix this by:

Adding 1px padding, border, or width and height

Here are some great resources to learn more about the "sr-only" "visually-hidden" etc classes:

• Visually hidden links with 0 dimensions
• a11y project - How to hide content
• The anatomy of visually-hidden