W3C home > Mailing lists > Public > w3c-wai-ig@w3.org > January to March 2015

best way to make content visible only to screen readers ??

From: Michael A. Peters <mpeters@domblogger.net>
Date: Thu, 26 Feb 2015 16:34:11 -0800
Message-ID: <54EFBB83.2020708@domblogger.net>
To: WAI Interest Group <w3c-wai-ig@w3.org>
On my desktop design there isn't a problem.

My header is absolute positioned with a z-index, so scrolling it is 
always there for visual display.

First link goes to #content - and thus serves for accessibility to skip 
to the content and as a way for users of graphical browsers to easily 
return to the top.

Mobile I do not do absolute positioning because of the screen real 
estate, the header scrolls with the page. And due to limited width of 
screen, I try to conserve menu items in it.

Since that first link to #content just takes up limited space in a 
potentially 320px wide screen and is only visible when the page is 
already at the top, I remove it.

But I wonder if rather than remove it, I should just hide it from 
visible display but keep it for assistive technology that may be in use 
on a phone or small tablet?

I looked at http://webaim.org/techniques/css/invisiblecontent/

This link to #content is part of an unordered list, I'm not sure the CSS 
clip method would work well.

Is there no attribute / CSS that has the effect of display: none; but 
that screen readers WILL still read?

I don't know how assistive technology on phones works, is it important 
to keep that #content link as the first on phones?
Received on Friday, 27 February 2015 00:34:40 UTC

This archive was generated by hypermail 2.3.1 : Tuesday, 13 October 2015 16:21:54 UTC