Hiding content

Introduction

As part of my role at Nomensa I regularly provide accessibility consultancy services for a wide range of clients.  More often than not this involves auditing websites to identify issues that will have a negative impact on accessibility.  One of the issues that we frequently identify is inappropriate use of CSS for hiding elements on a page.  Different methods for hiding content on the web will  have very different outcomes for sighted and visually impaired people.  Depending on the techniques used an element may or may not be accessible to people using assistive technologies such as screen readers even though it has been visually removed from the page. In this post I will identify some of the common techniques that are used to hide content and will attempt to identify the implications of using these techniques.  I will also attempt to identify appropriate situations in which each technique could practically be put to good use.  All of the techniques that we have identified below have been tested with Jaws 12 and NVDA 2011.1 using Firefox 4, Firefox 5 and Internet Explorer 8.  In addition the examples were tested with voiceover on Apple OSX 10.6.4 with Safari.

Scenario

Consider a search form on a website.  The form has a label which reads "Search".  However, the design for the site does not include a visually apparent label next to the search field.  As such it has been visually removed from the document.  In addition to this, the form field is given a placeholder using javascript which reads "Search for a keyword" (see code example below).  Sighted people will be able to identify the purpose of the field fairly easily by looking at the placeholder.  However, a blind person using a screen reader will not be able to do the same.  When they move focus to the form field the placeholder will (traditionally) be removed from the field making it impossible for them to read it.  Therefore, ensuring that the form label is accessible is of paramount importance as it will allow them to easily identify the purpose of the field.

Code Example

HTML

<form action="." method="POST">

    <label class="hidden-accessible" for="q">Search for a keyword</label>

    <input id="q" type="text" name="search" />

    <input type="submit" name="submit" value="Search" />

</form>

Hiding content from everyone

Solution 1

One of the most commonly used techniques for hiding page content is to remove the element using the CSS display:none; declaration.  Many legacy screen reader packages used to identify elements that had been hidden using this technique.  As such this was a reasonable technique for hiding elements intended for people who use assistive technologies such as screen readers.  However, this is no longer the case.  Most common screen reader packages in use today will ignore elements that have been hidden using the display:none; declaration.  As such, if a label (or any other element) is hidden using this CSS declaration a person using a screen reader is highly unlikely to encounter it whilst browsing through the page. Consider the scenario above again.  If the form label were hidden using the display:none; declaration, when a person using a screen reader moves focus to the corresponding form field they will not be able to find the associated form label.  Instead it will find another value and announce that instead.  Normally this other value will be the closest piece of text (that comes before the form field) that can be found on the page.  This value is not likely to identify the purpose of the field and as such will make it hard for a person using a screen reader to identify the purpose of the field. The CSS visibility:hidden; declaration works in almost exactly the same way as the display:none; declaration.  Elements that have been hidden using visibility:hidden; will also be inaccessible to people who use screen readers.  The only practical difference between display:none; and visibility:hidden; is that an element hidden using the latter declaration will retain the same visual space on the page.  In contrast display:none; will remove the element from the page in its entirety.

Solution 2

Another method that is frequently used to visually hide content is to give the element a height and width of 0px and ensure that the overflow property is set to 'hidden' (see code example below).  Historically screen readers have interacted with elements hidden in this manner in very different ways.  All of the screen readers that we tested with successfully identified elements that had been hidden using this technique.  However, since there are widespread reports of screen readers ignoring content hidden in this manner I would advise against using this method at all.  As the result of using this particular technique is inconsistent it could potentially cause more accessibility issues than it is likely to solve.  There are far better techniques for hiding content that can be used to achieve the same effect in a much more consistent and accessible manner.

Code example

CSS

.hidden-accessible{

    height:0;

    width:0;

    overflow:hidden;

}

Hiding content from sight

Solution  1

One of the methods that we frequently use to hide content in such a way that it is visually removed from the page yet is still accessible to people who use assistive technologies such as screen readers is to position the element off screen using absolute positioning (see code example below).  Since absolute positioning removes elements from the flow of the document it can be positioned off screen without drastically affecting the layout of other page elements.

Code example

.hidden-accessible{

    position:absolute;

    left:-9999em;

}

Using this technique has an effect on the visual placement of the element alone.  This means that the element remains accessible through the source of the document.  This will help to ensure that a person using a screen reader will still be able to access the content of the element even though it has been removed from the visual flow of the document.  This particular solution would be an appropriate way of hiding the label within the form identified in the scenario above.

Solution 2

Another method that we frequently use to remove content from the visual flow of the document whilst ensuring that it remains accessible is to make use of the CSS text-indent property.  If this property is declared and assigned a negative value it will be pushed out to the left of its container.  Assuming that the value assigned to it is large enough it will be visually removed from the page whilst ensuring that people who use assistive technologies such as screen readers will still be able to access the content.  It is important to note that this technique can only be applied to text and other inline elements.  If block level elements need to be removed from the page visually the solution outlined above (Solution 1) should be used instead. At Nomensa we commonly use this technique to remove the textual content of a link and apply an image to it using CSS (See code example below).  This is a great way of ensuring that an image link has an accessible textual alternative.  However, it will often result in slightly confusing focus indicators.  When this technique is used the focus indicator will often appear to extend off to the left side of the page. Focus Indicator extending off to the left of the page The easiest way of making sure that the focus indicator does not extend to the left side of the screen is to apply the CSS property overflow:hidden; to the element.  This will ensure that the focus indicator surrounds the element as it would do normally. Focus indicator restored to surround the image alone

Solution 3

Another method that is sometimes used to hide content on the page is to make use of the CSS clip property.  If the clip property is used to clip the content to the size of a 1px rectangle (See code example below) people who use screen readers will still be able to access the content of the element yet it will not be visible on the page.  This CSS property will work in all major browsers and the most popular screen readers should be able to access the content within the element.  This technique is not used as frequently as those identified in solutions 1 and 2 above but seems just as effective.

Code example

CSS
.hidden-accessible{

    position:absolute;

    clip:rect(1px 1px 1px 1px);

}

What about focusable elements?

If a focusable element (such as a link, button or form field) is hidden in such a way that it is still accessible it could cause confusion amongst sighted keyboard users.  For example, it has become common practise to position skip links off screen.  Since skip links are only really intended for people who use a keyboard for navigation they should still be able to receive focus.  For a person using a screen reader this technique will not cause any problems.  However, a sighted keyboard user will effectively see the focus 'disappear' from the page.  This will make it hard for them to identify which element within the HTML has focus  and will make it nearly impossible for them to identify the purpose or destination of the element or link.  On the other hand, if skip links are visible all of the time people who use a mouse may become confused when the link does not appear to do anything.  One of the methods that we commonly use to circumnavigate the issue (for skip links) is to position the link off screen by default.  We will then ensure that it is shown when it gains focus.  This can be achieved using the CSS :focus pseudo class (See code example below).  Although this is not without its own issues (the sudden appearance of a link on a page may be confusing for people with severe cognitive or learning disabilities) it is, in my opinion, a better solution than displaying or hiding the link all of the time.

Code example

HTML
<a href="#content" class="skip link">Skip to content</a>
CSS
a.skip-link,

a.skip-link:link{

    position:absolute;

    left:-9999em;

}

a.skip-link:focus{

    left:10px;

    top:10px;

}

Conclusion

There are quite a few different methods that can be used for hiding content on a web page.  It is important to consider the effect that the methods you choose to use will have on people who visit your website.  As a general rule of thumb, if content should be hidden from every visitor to your website you should use one of the following CSS techniques:

  1. display:none;
  2. visibility:hidden.

If, on the other hand, content should be hidden visually but should remain accessible to people who use assistive technologies such as screen readers absolute positioning, the CSS 'clip' property or the CSS 'text-indent' properties should be used to visually remove the content. One thing that should be considered carefully is the effect of placing focusable elements into "hidden" regions of the page.  If you find yourself positioning focusable elements off screen regularly there is likely to be an issue with the website design that should really be resolved.

Note

Many of the techniques identified above have previously been abused by black hat SEO companies in order to increase page rankings by 'stuffing' keywords into 'invisible' regions of the page.  Most search engines are aware of these techniques and will penalise sites seen to be making excessive use of them.  As such, if you rely on these techniques too heavily major search engines may reduce your page rankings or even remove your website from their listings completely.  However, if the techniques identified above are used appropriately it should not cause any issues.

Add a comment

Fields marked with an asterisk (*) are mandatory.