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

These kinds of questions always depend on context. Let me give it a shot sans context.

1. Learn More does the trick as long as contextually someone will understand what they will learn more about. Usually the button is preceded by some descriptive text. However, if it just brings someone to another page as opposed to firing a modal, I would use a link.

2. × for a close button (I am using the character entity for ×, which is more symmetrical than x. Again, if the button is at the top of a modal (for example), perhaps adjacent to its heading, then that is probably adequate.

3. [icon] can work for a carousel. Note that a font icon can be lost if the typeface does not download. A background image will disappear in Windows High Contrast Mode (WHCM) for IE11 and older versions of Edge. The aria-label will not help the WHCM users. Probably best to use an image (even an SVG) and its alt attribute instead, which means then you do not need aria-label.

You do not need a name attribute. It does nothing useful here.

Do not use a role="button" attribute. That role is automagically part of the element. If you assign another role, then you have a big problem.

Definitely do not use a title attribute. That does more harm than good.