Investigate accessibility of [hide/show]-on-[device] #35

Closed
smileyj68 opened this Issue Oct 26, 2011 · 2 comments

Comments

Projects
None yet
2 participants
Contributor

smileyj68 commented Oct 26, 2011

A commented on Smashing Mag raised a good point: the mobile visibility classes could be a nightmare for screen readers. Going to investigate if there's a way we can alleviate that.

kevva commented Oct 26, 2011

display: none and visibility: hidden will hide content from both browsers and screen readers, http://juicystudio.com/article/screen-readers-display-none.php.

If you still want to access your content from screen readers but hide it from browsers this is the way to go:

border: 0;
clip: rect(0 0 0 0); 
height: 1px; 
margin: -1px; 
overflow: hidden; 
padding: 0; 
position: absolute; 
width: 1px;

http://snook.ca/archives/html_and_css/hiding-content-for-accessibility

Contributor

smileyj68 commented Oct 26, 2011

Thanks kevva - that answers that for us. Of course at deploy the best practice would be to completely remove the hidden elements, but if not it sounds like we're still covered. Nifty.

smileyj68 closed this Oct 26, 2011

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment