This page contains various methods for displaying buttons. Goals are:
Button must be accessible to screen reader users
Button must be operable by speech recognition users
Button must be visible in Windows High Contrast mode
Button color must be easy to customize using CSS.
Example #1: Using <input type="button"> with CSS background image
The image doesn't show up in Windows high contrast mode.
VoiceOver announces this as "Play button"
Button responds to verbal command "click Play" using Dragon Naturally Speaking
Example #2: Using the <button> element with nested <img>
This is surprisingly difficult to stylize. The image is offset slightly inside the button container, and I couldn't figure out a way to correct that so that it displayed consistently in all browsers.
Surprisingly, screen readers don't read the alt text of the nested image. Voiceover and NVDA simply announce this as "Button" and JAWS announces it as "Unlabeled 1 button". This problem can be corrected by adding a title attribute to the <button> element.
Button does not responds to Dragon command "click Play", only to the more general "click button". This wouldn't be very useful if the button was one of many buttons, such as on a media player.
Example #3: Using the <div> element with nested <img> (No ARIA)
This is displayed predictably in all browsers and is displayed fine in Windows High Contrast mode.
This doesn't use semantic markup, and without ARIA, VoiceOver announces it as "Play image", and JAWS announces it as "Graphic Play"
This button does not respond to either "Click play" or "Click button" using Dragon Naturally Speaking.
Example #4: Using the <div> element with nested <img> (with ARIA)
This is displayed predictably in all browsers and is displayed fine in Windows High Contrast mode.
Like the previous example, this doesn't use semantic markup, but in this case I've added ARIA role="button" to the <div> element. However, this role causes screen readers to ignore the nested image. VoiceOver, NVDA, and JAWS just announce "Button" and "Unlabeled 1 button" unless a title (or aria-label) attribute is also added to the div (same as Example #2).
For Dragon Naturally Speaking users, this example is no different than Example #3. This demonstrates one of the ways in which speech recognition users could benefit from Dragon supporting ARIA, but it currently does not.
Example #5: Using <input type="image">
This is the best method.
It works as well as the previous example, but is ultimately better because it's using semantic HTML markup. Therefore its accessibility isn't dependent on ARIA, and will work for older assistive technologies.
It's also more efficient than the previous example, using only a single element and overall less code.
Voiceover, JAWS, and NVDA all announce this either as "Play button" or "Button Play"
This button responds to the Dragon command "Click Play".
