If you need to hide content but still want it available to screen readers, avoid using  display:none in your CSS. display:none means exactly what it says – NONE! Thus the element will also be hidden from all screen readers and all browsers.

To have the element hidden from browsers, but still available to screen readers use techniques such as

position: absolute;
left: -9999px;
or
text-indent: -9999px;
More methods can be found here: Hiding Content for Accessibility.

If you are hiding content temporarily, it’s most likely that you will be using jQuery to make it visible. This also means that to users who do not have Javascript enabled browsers, the element will always be hidden.

This can be dealt with by using jQuery to hide the element on page load, instead of using the CSS methods. Therefore, if the browser does not have javascript enabled, the element will always be visible.

Tags: accessibility, css, Hide Content, jquery

This entry was posted on 21 Aug 2011 at 19:56. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Posted in accessibility css jquery by admin No Comments Yet