making elements invisible to screenreaders / keyboard focus - but visible to mouse clicks

Question

I'm aware of how to make invisible elements keyboard focusable and read by screenreaders, however for the purpose of a student-led survey - I would like certain elements to be invisible to screenreaders / keyboard focus to be less distracting, but have them visible for tutors to use using a mouse.

I've tried using iframes, however the keyboard can still 'tab' into them. I was considering a pop-up window that can control the parent window? - but might have some issues with blockers etc.

Many thanks! Mike

score 0 · Answer 1 · answered May 29 '13 at 10:32

a good way to prevent screen readers from viewing an element is to apply the aria-hidden="true" attribute; this is fairly well supported by browsers, and will prompt JAWS and other screen readers to skip the content. You can also use role="presentation" - there's a good article on this here: http://john.foliot.ca/aria-hidden/

Applying tabindex=-1 will only only allow the element to be focused on by scripts and not keyboard input, so this will work too. Additionally, although I don't recommend it, I found while tearing my hair out over someone else's script, that if you don't have an 'href' attribute defined for a link element, (making it invalid) this also prevents focus.

score 0 · Accepted Answer · answered Sep 20 '11 at 11:08

One of the simplest ways to get content ignored by a screen reader is to place it into an image and then set the alt text on the image to be "" in your HTML. This will cause the screen reader to skip this content since it can't interpret it. This will also eliminate any tabbing or keyboard focus since the web browser will treat it like any other image in your page.

Another way to do this, and a bit more complicated, is to detect if your page is being pulled into a screen reading browser and set the CSS properties of the content you don't want read by the reader to be have the following:

 visibility: hidden; display:none;

Screen readers will ignore anything that is invisible and/or not displaying, thus it will not be read to the user. This is also a bit cleaner since you're not destroying the SEO ranking of the page but are just modifying the content displayed to users who don't need to see/hear it.

The image idea minus alt text may work, however as the img will be within an tag, the keyboard will still focus to it - unless I use javascipt onclick instead??? Giving me feed for thought - many thanks! — Mike Thrussell, Sep 20 '11 at 12:20
There's nothing that says that the image has to be within an tag, but you're correct that this will result in keyboard focus. If you don't want it to get focus, don't put it in an anchor tag. If you do need to use an anchor link this StackOverflow article (http://stackoverflow.com/questions/1561021/prevent-tabstop-on-a-element-anchor-link-in-html) mentions a "hack" that uses tabindex = -1 as a means to prevent browsers allowing keyboard focus/tabbing. No JavaScript required. — Liam, Sep 20 '11 at 15:26

making elements invisible to screenreaders / keyboard focus - but visible to mouse clicks

2 Answers2