title: How to mark-up a button for WCAG 2.0 Compliance?
body: <p>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.</p>
  
  <p>What is the appropriate way to mark-up a <code>&lt;button&gt;</code>? What attributes or combination do they need to have? </p>
  
  <p>My buttons fall into three categories: </p>
  
  <ol>
  <li>Buttons that have text that describes their intended action. (e.g. "Learn More" to launch a modal with more product information)</li>
  <li>Buttons that have text that does not describe their action. (e.g. "X" or text that titles a section of accordion content)</li>
  <li>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)</li>
  </ol>
  
  <p>For instance, in the following simple example of 3 above: <a href="http://codepen.io/ga-joe/pen/ggeLeW" rel="nofollow noreferrer">http://codepen.io/ga-joe/pen/ggeLeW</a></p>
  
  <p>Is it acceptable to add only an <code>aria-label</code> attribute for a button with no text? Are <code>name</code> and / or <code>value</code> always required? Please send help! Thank you! </p>
  
  <p>These seem to be the relevant WCAG Guidelines:</p>
  
  <ul>
  <li><a href="https://www.w3.org/TR/WCAG20/#text-equiv-all" rel="nofollow noreferrer">https://www.w3.org/TR/WCAG20/#text-equiv-all</a></li>
  <li><a href="https://www.w3.org/TR/WCAG20/#navigation-mechanisms-refs" rel="nofollow noreferrer">https://www.w3.org/TR/WCAG20/#navigation-mechanisms-refs</a></li>
  <li><a href="https://www.w3.org/TR/WCAG20/#ensure-compat-rsv" rel="nofollow noreferrer">https://www.w3.org/TR/WCAG20/#ensure-compat-rsv</a></li>
  </ul>