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>

Related guides

Learn more about Accessibility

ARIA ATTRIBUTE

ARIA CHILDREN

ARIA INPUT FIELD

BYPASS

COLOR CONTRAST

CONSOLE ERROR

CUSTOM CONTROLS LABELS

CUSTOM CONTROLS ROLES

DEFINITION LIST

DEPRECATIONS

DL ITEM

DOCTYPE

EXTERNAL NOOPENER

FORM LABEL

FRAME TITLE

HTML LANG

IMAGE ASPECT RATIO

JS LIBRARIES

LANG VALUE

LIST

LIST ITEM

MANIFEST

META VIEWPORT

OFFSCREEN CONTENT

PASSIVE LISTENERS

TAB INDEX

TD HEADERS

UNLOAD LISTENER

VIDEO CAPTION

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!

Web tools for modern developers. Try these one!

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

MD5 / SHA-1 / BASE64

Converters

Convert text into MD5, SHA-1 and Base64 hash string.

Type or paste text and get Messade-Digest Algorithm 5, SHA-1 and Base64 hased string.

IMAGE COLOR PALETTE

Images

Upload yours images and get the color palette.

Get color palette for all dominant colors identified in your uploaded image.

PAGESPEED INSIGHTS

Tester and validators

Analyze your web page speed performance.

Retrieve information about speed index, latency, first contentful paint and more.

FACEBOOK EVENTS

Social Tracking script

Measure and track user interactions with your contents.

Track all the events you want: downloads, clicks, video plays, checkout flow, engagement.

TWITTER CARD

Builders and generators Social

Generate Twitter cards markup and improve yours html meta.

Attach rich photos, videos and media experiences to Tweets and drive traffic to your site.

WHAT IS MY IP?

Server and proxy

Retrieve your Public IP Address and geolocation.

Get your IP address, ISP-Organization information and geolocation data for free.

IOS TRACKING URL

Analytics Google Tracking script

Generate URLs for iOS Campaign Measurement.

Use this free tool to generate URLs for measuring the source of iOS application installs.

QR CODE GENERATOR

Builders and generators

Choose your data and create your custom QR Code.

Specify format, size, margins, charset, colors and more of your custom QR Code.