Accessibility Tips

A collection of tips, guidance and practical suggestions in developing accessible websites

Avoiding visibility hidden

By Isofarro on March 5th, 2008 - One comment

Hiding content from view with visibility: hidden in many cases prevents the screenreader from reading the content, so content styled this way is inaccessible. This technique is not appropriate for hiding content on screen because no screenspace is saved by styling this way – the visitor is left looking at a blank region the size of the hidden content.

In a number of cases visibility: hidden is used in conjunction with positioning the content offscreen (position: absolute; left: -999em;). This is unnecessary since positioning content off the viewport is sufficient to hide the content, and the visibility: hidden makes the content unavailable to screen readers.

There’s no reason to use visibility: hidden. Positioning the content offscreen is safer and has far less accessibility implications. If you fee that visibility: hidden is appropriate for your requirements, I strongly recommend revisiting the requirement and finding an altogether different solution.

One Response to “Avoiding visibility hidden”

  1. 1 Retha cook says: August 14th, 2011 at 3:41 am

    In order to sign up for an account to Google Chrome they employ these word of hidden visibility and tell you to describe it. This is impossible and unnecessary. Then they give you no way to contact them to dispute the fact that it cannot be read. Then they give you an option to listen to a handicap version of this hidden visibility. Its absolutely creapy sounding and you can’t understand anything it says anyway. It just creaps you out and again you have no way to contact Google to tell them this so you end up not being able to sign up to google chrome.

Add a comment or reply

Copyright © 2007 - 2009, isolani