Labelledby vs Describedby

Posted on October 08, 2014 – Return home

At Accessibility Camp Toronto last month – at Dave Newton's talk Using Responsive Images Responsibly: Performance & Accessibility in fact – I was made aware of an inconsistency between the ARIA attributes aria-labelledby and aria-describedby. Thanks to Dylan Barrel for the tip and the subsequent help (@dylanbarrel on Twitter).

Some further looking into this behaviour revealed VoiceOver (VO) treats aria-describedby and, as it turns out, the title attributes as quote/ unquote "hints" when used to describe images, specifically. Which means, apparently, there is a delay in what VO reads back when it encounters content contained within the previously mentioned attributes.

Thing is, I've never encountered this behaviour in any of my testing travels before (on OSX at least, iOS behaves in the described manner). And this demo serves as a way for me to find out why. And seeing how it's nearly Halloween and all, I thought this picture was appropriate for this demo.

Using alt

This image is a photograph of me looking a little zombie-like

This image is using the simple alt attribute to describe it. And acts as a baseline example.

Using Title

This image is using a title attribute to describe it.

Using Labelledby

This image has a empty alt attribute, is using an aria-labelledby attribute to describe the image and a aria-hidden on the text immediately following the image to prevent VoiceOver from speaking the same block of text twice.

Using Describedby

This image has a empty alt attribute, is using an aria-describedby attribute to describe the image and a aria-hidden on the text immediately following the image to prevent VoiceOver from speaking the same block of text twice.