How to improve web accessibility by hiding elements

Hiding elements can be done for a number of reasons, for different groups of people. You can hide elements from screen readers, sighted users or from everyone.

In this article, Amani Ali – Accessibility Consultant at Nomensa – explains why you should consider hiding elements and how this can be done.

The importance of hiding elements

If you want to hide elements, you need to ensure that you’re doing it right, otherwise you may actually not be hiding it at all. There are many places where we’ve found that CSS has been used inappropriately for hiding things.

If you’re a developer and you solely use display: none to hide elements, did you mean to hide it from everyone? Screen readers generally ignore anything with display: none, therefore it is not read out to screen readers.

There are various ways of having things hidden visually or non-visually, so we’ll run through the cases and techniques for each.

Hiding elements from everyone

In general, we recommend that everything visible is available for people using screen readers and everything hidden visually is also hidden for screen readers. Using display: none in CSS is suitable because it is hidden from everyone.

.hidden { display: none; }

display:none ensures that the element is not visible, nor will it affect the layout of the page and interactive elements are not in the tabbing order. There are some reports of very old screen readers ignoring this technique, but it is currently the safest and easiest one.

An alternative technique is to use the HTML attribute ‘hidden’ since the support for this is good in recent browsers and screen readers. The Paciello Group has tested various techniques in recent years.

Hiding elements visually

When would you need to hide elements visually?

If you frequently surf the web, you’ll notice that label-less fields are quite common. Take a search bar on a website for example, there’s a magnifying glass icon which clearly conveys to the user that it’s a search function. For screen readers, though, this isn’t so great. A blind user who relies on a screen reader may not grasp the purpose of the function, so if you want to keep the same visual design but still make it work for people using screen readers, this is where hiding elements comes into play. You can use a label to associate with the search bar and hide it.

A label-less field such as a search bar can create accessibility issues for screen reader users 

Another example is where you want to have a good heading structure, but there is a strong design element where it is visually obvious what something is, but no room for a heading. A carousel is an example of this; it is a set of featured items that has a visually obvious purpose, but no heading to describe that section of the page. A hidden heading can help to keep a useful heading structure. So how exactly do you visually hide elements properly?

Hiding elements using the clip method

Over the years various techniques have been tried, such as moving elements off-screen to the left. Each method ran into various niche cases where it did something undesirable, such as showing up in right-to-left languages or slowing down scrolling for some mobile devices.

Webaim.org has kept tabs on this technique over the years and recommends the CSS Clipping technique  which allows you to hide elements visually and allow content to be read out to screen readers.

Clipping CSS Snippet:

 .hide-element {
    border: 0;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip; rect(1px, 1px, 1px, 1px);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px; 
}

Add this class to your code and you have a better and effective way of hiding elements.

Let’s break down the CSS:

• An absolute positioning takes the element out of flow so it doesn’t affect the surrounding layout. It is also in the right place in the code, so visual use of a screen reader is not impacted.
• Using a size of 1px by 1px ensures the element it still there and will be read out by screen readers.
• The first ‘clip’ accommodates older versions of Internet Explorer.
• Setting padding and border to 0 prevents any problem that occurs due to the edges of the clipped area.
• A margin of -1px means that any text within the element is moved out of the 1px by 1px box.

Example HTML:

Search criteria

 

Focusable Elements

It is worth remembering that not every keyboard user has a visual impairment – they may have a motor impairment such as Parkinson’s disease and rely on looking at the screen. Therefore, if something can be tabbed to, it should be visible, even if it is hidden to start with.

A perfect example for keyboard users would be a ‘Skip to Content’ link – a visually hidden anchor that keyboard users can access via tabbing that allows them to skip over a section of content such as a navigation menu. This function isn’t useful for mouse users and can appear odd to users who don’t need it, so it makes sense to hide the element until it receives focus via the keyboard.

The CSS code below builds on the clipping technique above and you can add it to allow the hidden element to receive focus when tabbed to via keyboard.

CSS Snippet

.hide-element-focusable:active,
.hide-element-focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

Example HTML


Skip to the main content

The main content

To see it in action, try tabbing through this site – you should see a big yellow skip link appear at the top of the page.

Hiding elements from screen readers

There may be rare instances where you want to branch your interface between what is visually shown and what a screen reader will access. For example, where a custom checkbox is used you might keep the native HTML checkbox available, but visually hidden, and the custom checkbox visible but hidden from screen readers.

If you have an element on your website that’s not relevant for users of screen readers you can hide it by using an ARIA (Accessible Rich Internet Application) attribute. This will be an instruction for assistive technology that you can place in your HTML.

aria-hidden="true">This element is ignored by assistive technology

Elements that are assigned with this attribute (and all the child elements) will be ignored by a screen reader as it will be invisible to them, but will be visible to sighted users.

Another example for this technique are font-icons, which can be read out in strange ways, although we’d recommend switching to SVG icons in that case.