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.

button name

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>

Related guides

Learn more about Accessibility

Seo Audit

SEO Audit

On page SEO performance and page checkup.

Over 300 parameters for the deeper page analysis.

Try it now

Share this Guide

Did you like it? Share it!

Share this tool

Web tools for modern developers. Try these one!

Over 50 generators, builders and validators to improve your SEO and web performances

Home Back to top of the page