A thing or two about accessability

Accessibility is one of those things that’s unfortunately often overlooked. Don’t believe me ? Check the the WebAIM accessibility evaluation they did on one milion websites. They’ve found out that 95.9% of home pages have WCAG 2 (opens new window) failures!

Accessibility is crucial, it ensures that the digital products we build, can be used by people with disabilities. It is not only important from the ethical perspective it is also a legal requirement, in most countries.

just the other day i was watching this:

Isn’t it heartbreaking watching this video? This person struggles to make a booking on all but one website shown. Something that should be simple and easy is nearly impossible.

This just goes to show that accessibility is also important for the reputation of companies. Accessible products can also reach a broad range of potential customers who may otherwise be excluded.

Emphasizing accessibility goes beyond just meeting technical or legal requirements. It’s a smart business move that encourages social responsibility and supports lasting success! And thanks to these legal requirements companies these days are more open comply to a11y.

What is the easiest way to make sure you website is accessible? There is no easy way… Whenever i make websites and apps one rule i do have, is to always stick to the semantics, if possible. But sometimes we need more. Sometimes we find ourself in situations where we have to include extra context for people who use assistive technology and keyboard navigation.

If you’re enjoying this post, why not subscribe to my newsletter? (opens new window) You’ll be the first to know when new content is published!

Visually-hidden css class

One of the most popular approaches is the visually-hidden css class. You can find it being referenced with other names such as sr-only.

The class looks something like this:

.visually-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

You can find this same one, or with some similarities in most of the CSS frameworks. It is meticulously tailored to obey the rules of most browsers.

Here’s an interesting fact about why we need the negation of focus and active? Content that is visually hidden should not be focusable. If it is, keyboard users might become confused when they focus on an empty element or an area as small as 1px. This is useful when you have things like skip to main content links. As far as the :active pseudo class goes, it’s a fix for safari browser, as in some versions, it has issues when using a keyboard and using a pointerdown event, in this case the focus state will be lost.

Another benefit of visually-hidden is when we have links, for example: "read more". A lot of the times these links are ambiguous, especially when there’s not enough context or descriptive keywords. Of course, when we are talking about links we can always use aria-label and aria-labelledby mostly when we want to to associate the link with the heading of a section. But we can also use visually-hidden, to add more context to these links. Especially if you work with some older tech where internationalization implementation is outdated. And it’s not always just links, sometimes you just want to add additional information and make sure your UI is not cluttered.

Recently i’ve came across the following copy:

Could we clarify what exactly is ‘Why?‘? This link has no additional context, which might be confusing for users. Providing more information, such as Learn why this is safer, would be helpful. Additionally, since the link opens in a new tab, it would be great to announce that to screen readers so that users are aware of what to expect. This can easily be added via the above methods, or even adding it in the same text with parenthesis. Like this: (opens new window). A11y guidelines also refer to mitigating context failures. So, it is very important that we get everything right.

Conclusion

The point is, visually-hidden is a hack that we use daily. I always wondered why this is not baked in to the HTML API or even as a CSS property. Maybe one day we’ll get there. As for now, we’ll continue to use this hack.