A11y: Accessible hiding and hidden-aria

Accessibility issues

As developers, accessibility should not be an after thought. We should write our code while having in mind the disabled who will use our product. I'm ashamed to say I have been guilty of not thinking about accessibility for quite some time. I wrote code thinking only about people like me.

In this article, we'll talk about two things: Accessible hiding and hidden-aria.

Accessible hiding

Sometimes, you do not want to show some of you HTML elements. In that case, a good old display: none; or visibility: hidden; or even the HTML5 hidden attribute does the job just fine.

All valid ways to hide an HTML element, and its children.

<p style="display: none;">Hide me!</p>

<p style="visiblity: hidden;">Hide me!</p>

<p hidden>Hide me!</p>

One issue with that approach is that the element will be invisible from the screen but also from screen readers. There are cases where you want to hide an element and still being accessible be screen readers. That's accessible hiding.

To achieve that, you would usually add a CSS class to the element you want make accessible to screen readers. Most frameworks, like Bootstrap for example, gives you a class called sr-only for this purpose. It goes like this:

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

The code above is a good place to start with accessible hiding, if you don't have a class for that already 😉

Form labels

Let's imagine that you have an input in your HTML.

<form>
  <input id="email" name="email type="email" placeholder="Email please" />
  <button type="submit">Submit</button>
</form>

Here, we don't have a label tag. It is good practice to always provide a label tag in terms of accessibility. For more information, you can read this tutorial about labeling controls in forms from w3.org.

If you don't want to have a label in your design in that case, you still should have a label available. So, we just add one with the sr-only class.

<label for="email" class="sr-only">Email</label>
<input id="email" name="email" type="email" placeholder="Email please" />
<button type="submit">Submit</button>

By adding a label tag and giving it our sr-only class, we are sure that our design remains unchanged and screen readers will still be able to make our design accessible.

Clarify a link label

For a second example, let's imagine we have this HTML:

<a href="...">Click here <span class="sr-only">for a free e-book</span></a>

This link would only display Click here in the browser, which can be fine in the context. But for accessibility purposes, it might be better to have a more explicit description. Here, screen readers would read Click here for a free e-book

Note: You could have achieve the save thing by using the arial-label attribute:

<a href="..." aria-label="Click here for a free e-book">Click here</a>

There are probably thousands of ways to implement accessible hiding in order to improve the accessibility of your product.

aria-hidden attribute

This attribute will hide an element, or group of elements to screen readers. However, it doesn't affect how the elements are displayed in the browser.

To hide an element (and its children!) from screen readers, you just add the aria-hidden="true" attribute.

Example: Below is a screenshot of a website. There are a lot of informations. There are images placed everywhere. It looks nice, but it won't give any useful information to someone visiting the website with a screen reader. It's better to hide them.

<img src="..." alt="Pink pattern" aria-hidden="true" />

<img src="..." alt="Green pattern" aria-hidden="true" />

<div class="images-container" aria-hidden="true">
  <img src="..." alt="Blue pattern" />
  <img src="..." alt="Red pattern" />
</div>

We can either use aria-hidden on the images individually, or, if the HTML markup allows it, put the aria-hidden attribute on the parent.

There you go!

Have fun ❤️

Source:

Accessibility guidelines: Accessible hiding and aria-hidden