How to mark-up a button for WCAG 2.0 Compliance?

Question

In striving for WCAG 2.0 Compliance, I\'m finding quite a bit of varied information regarding proper treatment of buttons, specifically what is required to consider the button a

Answer 1

Buttons that have text that describes their intended action. (e.g. "Learn More" to launch a modal with more product information)

You can read the recommendations for WCAG 2.4.9 Link Purpose (Link Only) even if we're not talking about links. The text "Learn more" can be understood when in context, but for low vision users who require screen magnifier, for instance, it can be difficult to understand the action from the button text itself.

For instance the text Learn more about "Wheels on the bus" may seem more appropriate.

Buttons that have text that does not describe their action. (e.g. "X" or text that titles a section of accordion content)

I answered that subject in another post: What is aria-label and how should I use it?

You have to use both aria-label (useful for screenreaders) and title attributes (for standard users using standard browsers which may need more support):

X

Buttons that do not have text that describes their intended action or otherwise. (e.g. An icon / image that switches the context of a carousel)

The same reasoning can apply to this point. But for blind people, moving a carousel to the left or to the right is a different experience, sometimes useless. If they can ignore that what they see is a carousel, without losing any content, navigating with the keyboard or their assistive technology, then you are doing what is expected.

Also, you have to never forget that accessibility does not only target blind users, but also children, old people, people with cognitive or sensitive disabilities. For instance, the aria-label will never be sufficient enough to help those people when needed. They do not have a screen reader, and they do not read the HTML source code.

In the case of users using "speech-recognition software" (yep, they are not a lot but let's improve their life), not having any visible text can also lead to difficulties.