Test button role with image

I came across a page with a link that had role="button" and aria-haspopup="true". The link had an image with proper alt text, but no other text. Voiceover announced the button and popup state, but not the image's alt text. This page will test that support.

flower

<a href="#" role="button" aria-haspopup="true">
    <img src="http://farm9.staticflickr.com/8510/8526435718_b92f577bcd_m.jpg" alt="flower">
</a>

VoiceOver and Safari are not announcing the alt text. The aria-haspopup attribute is not making a difference. It's clearly tied to the role="button"

Real button with image

This test checks how VoiceOver and Safari react to a real button with image. Theoretically, this should be good. The HTML specification allows an image to sit within a button tag.


<button>
    <img src="http://farm9.staticflickr.com/8510/8526435718_b92f577bcd_m.jpg" alt="flower">
</button>