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

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

Be careful about fixed areas -- when the user zooms in to 200% with the browser the page functionality must still be available unless the page also supports text only zoom in a way where all functionality is available.

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

In general I am not a supporter of this.  There is a strong benefit to have content visible for users with low vision and keyboard only users.  For example, a link that was invisible but in the focus order would be a violation of SC 2.4.7.   

On a related note aria-labelledby can reference content that is not shown with display:none.

Jonathan

-- 
Jonathan Avila 
Chief Accessibility Officer
SSB BART Group 
jon.avila@ssbbartgroup.com
Phone 703.637.8957  
Follow us: Facebook | Twitter | LinkedIn | Blog | Newsletter

-----Original Message-----
From: Michael A. Peters [mailto:mpeters@domblogger.net] 
Sent: Thursday, February 26, 2015 7:34 PM
To: WAI Interest Group
Subject: 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 15:02:57 UTC