Search code examples
htmlbuttonaccessibilitysemanticswcag2.0

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

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 accessible and compliant.

What is the appropriate way to mark-up a <button>? What attributes or combination do they need to have?

My buttons fall into three categories:

  1. Buttons that have text that describes their intended action. (e.g. "Learn More" to launch a modal with more product information)
  2. Buttons that have text that does not describe their action. (e.g. "X" or text that titles a section of accordion content)
  3. 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)

For instance, in the following simple example of 3 above: http://codepen.io/ga-joe/pen/ggeLeW

Is it acceptable to add only an aria-label attribute for a button with no text? Are name and / or value always required? Please send help! Thank you!

These seem to be the relevant WCAG Guidelines:

Solution

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

    1. <button>Learn More</button> 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. <button aria-label="Close">&#215;</button> 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. <button aria-label="Image 1">[icon]</button> 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 <button> 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.