Button Name

When a button does not have an accessible name

Accessibility

When a button does not have an accessible name

Assistive technologies, such as screen readers, are not able to give information about a button if it does not have an accessible name; therefore they simply name it “button”.

How the SeoChecker button name audit is displayed

When a button has no text content or an aria-label property, SeoChecker will notify it.

How can I add accessible names to buttons

Use a clear CTA when you add text content to the button:

<button> Shop now </button>

Use the aria-label attribute to describe the button when the label is not visible:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Accessible icon button demo</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <link rel="stylesheet" href="/style.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
  </head>  
  <body>
    <h1>Accessible icon button demo</h1>
    
    <button class="btn" aria-label="Left Align">
      <span class="material-icons" aria-hidden="true">format_align_left</span>
    </button>
    <button class="btn" aria-label="Center Align">
      <span class="material-icons" aria-hidden="true">format_align_center</span>
    </button>
    <button class="btn" aria-label="Right Align">
      <span class="material-icons" aria-hidden="true">format_align_right</span>
    </button>
    <button class="btn" aria-label="Justify">
      <span class="material-icons" aria-hidden="true">format_align_justify</span>
    </button>
  </body>
</html>