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

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

From: Michael A. Peters <mpeters@domblogger.net>
Date: Fri, 27 Feb 2015 08:00:20 -0800
Message-ID: <54F09494.3090106@domblogger.net>
To: w3c-wai-ig@w3.org

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

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