Accessibility: Hiding content in CSS

In web development, it's safe to assume that it's unavoidable to hide some elements or part of the content. Using only a single way of hiding content can harm accessibility because users using assistive technologies won't get the full context of the page the way the regular screen users do. In this article, we are going to cover several ways of hiding elements, depending on accessibility.

Hiding content from all devices

Using CSS rules likedisplay: none; or visibility: hidden;, or HTML hidden attribute is the first thing that comes to mind when hiding elements or part of the content. Using these two CSS attributes will make both display devices and assistive technologies (like screen readers) to completely ignore the element and not present it to users.

Of course, there are cases where we want to hide content from all devices. For example, we can use these CSS rules on elements in an accordion, tabs or other toggleable elements.

Hiding content from screen devices

In some cases, we want to hide some elements from displays, but we want to let assistive technologies present the visually hidden content to users. An example of that case, off the top of my head, are labelless inputs. Labels are usually hidden with display: none; but we would prefer if labels were accessible to the assistive technologies in order to provide more context to users.

This solution is a bit hacky, but very effective solution if we want to hide content from screen devices only. We can use the following CSS rule:

.hidden--visually {
    border: 0;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

Hiding content from assistive devices

There are cases where we would like to hide the content from screen readers and other assistive technologies. For example, if we have an image carousel, with "previous" button on the beginning, carousel images in the middle and "next" button on the end, we don't want the screen reader to read it out in that order. We can provide a separate, more accessible controls which are visually hidden, but hide the "previous" and "next" buttons from assistive devices.

In cases where we want to hide content from the assistive devices, we can use the aria-hidden="true" HTML attribute.

Override quirk

It's important to note that CSS rules like display: none; will override the aria-hidden="false" and the content will be ignored by assistive technologies.