Block level links and accessibility

One of the news in HTML5 is that links are now allowed to contain block level elements. In HTML 4, only inline elements are allowed.

Linking block level elements such as headings and paragraphs can be useful, but there are some things to be aware of in order to avoid reducing the usability and accessibility of such links to screen reader users.

Testing block level links in screen readers

Derek Featherstone writes about this in Accessibility and HTML5 Block Links, noting that screen readers do not currently handle such links perfectly. Steve Faulkner followed up by posting HTML5 Accessibility Chops: Block Links, where he takes a closer look at several test cases in some different combinations of screen readers and web browsers.

The conclusions from Derek’s and Steve’s testing with block level links are:

sometimes content in links will be repeated
sometimes some link content will not be announced
sometimes a single link will be announced as several separate links

Exactly what happens depends on the screen reader and the markup. See Steve’s HTML5 block link tests for details.

The only way to use block level links without causing any issues at all for screen readers seems to be to make sure the a element only contains a single block level element and no inline text. Thinking about the times I’ve felt that a block level link would have been handy I don’t think this is the most likely scenario – many times you will want to put the a element around at least two other elements.

Even if the link only contains a single block level element, VoiceOver will say “new line, new line” after a p element and “new line” after a div element. That, and VoiceOver’s tendency to repeat link text, should probably be categorised as bugs that Apple needs to fix. It should also be said that while these bugs can certainly be annoying, at least no content is skipped.

The link length issue

One more potential problem with block level links is that they may increase the temptation to create really, really long link text. This already happens on many newspaper sites, where headings and article excerpts tend to be stuffed into a giant link to make a big clickable target. Listening to all those long links is not much fun, so I’d be careful with this.

If you do create long links this way, take the advice Steve provides in the concluding paragraph of his article and include the key information at the start of the link. That way a screen reader user can figure out if the link is interesting or not and either follow it or skip to the next one instead of waiting for all of it to be read.

Use when called for

Block level links can definitely come in handy, but be aware of these issues and use wisely. Also try to continue making link text meaningful and concise.

Posted on September 6, 2011 in Accessibility, HTML 5