Article: Avoid screen reader "stutter" when you need two separate links to the same page

Created by: jjenzz

Sometimes, for example, you want an image link and a text link within a module that both go to the same place but you cannot wrap them in the same anchor due to separation in the markup.

My immediate assumption was to wrap the link around the image but leave the alt attribute empty. However, during testing, I noticed that the screen reader will tab to this link and then read aloud the anchor href value. This is not ideal and also leaves extra unnecessary tab stops.

Here is an example of the problem I was trying to solve and the reason why HTML5 block-links would not be a good solution:

http://codepen.io/jjenzz/full/fCnip

The solution I managed to find was to apply aria-hidden="true" role="presentation" tabindex="-1" to the anchor around the image and then add role="presentation" to the image tag. Special thanks to the following article for this (which also contains screen reader test results):

http://john.foliot.ca/aria-hidden/

The article was written in 2012 so the test results are a little out of date. I tested NVDA 2013.2 with IE9 and it gets a thumbs up now. I haven't tested IE8 though as the project I'm working on does not support that browser.