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

On 02/26/2015 04:34 PM, Michael A. Peters wrote:
> 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?
>

The way I solved it, at least for now - the simple solution was staring 
me in the face.

On mobile since the header isn't fixed, I can just put a paragraph 
before the header with a "skip to content" link - same thing most pages 
about accessibility do. Solves the problem, it isn't taking space in the 
header nav menu, and no tricks needed to hide it - it's fine as visible.

-=-

I am using media queries, and a piece of JS that runs on page load to 
make some changes to the DOM for mobile.

I was not aware that zooming would trigger media query but sure enough 
it does.

So I need to trigger on that too w/ the JS and not just on pageload.

Looks like there's not an actual event that triggers on zoom or media 
query but I did find some tricks to detect it, I'll have to play with 
them. Unfortunately tricks often don't work across all browsers :(

Received on Friday, 27 February 2015 16:00:45 UTC