carlos-sanchez
11/14/2013 - 3:03 AM

Hidden but accesible. Setting display: none hides content for screen readers and search engine bots. This is the difference that really ma

Hidden but accesible. Setting display: none hides content for screen readers and search engine bots. This is the difference that really matters. When you’re making tabs or playing with slideToggle(), don’t hide the content with display: none because you will make it unavailable for both, screen readers and search bots. Instead give it the previous class.

.visuallyhidden {
    position: absolute;
    width: 1px; /* Setting this to 0 make it invisible for VoiceOver */
    height: 1px; /* Setting this to 0 make it invisible for VoiceOver */
    padding: 0;
    margin: -1px;
    border: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;   
}