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

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