Accessibility
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”.
When a button has no text content or an aria-label property, SeoChecker will notify it.
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>
Learn more about Accessibility
On page SEO performance and page checkup.
Over 300 parameters for the deeper page analysis.
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
Images
Upload yours images and get the color palette. Get color palette for all dominant colors identified in your uploaded image.
Builders and generators
Create your personalized Barcode in over 70 formats. Choose your data, formats and colors and get your personalized Barcode.
Tester and validators
Find out which theme, version, author and license a WordPress site is using trought Wordpress Theme detector tool
Choose your data and create your custom QR Code. Specify format, size, margins, charset, colors and more of your custom QR Code.
Build your Service Workers and enrich user experience. Transform your website in a huge Progressive Web App and enrich users experience.
Builders and generators Google
Draw rectangles, circle, polygon, polyline and shape on maps and get coordinates. Set styles and colors for your drawed shapes and get the code.
Builders and generators Social
Transform web pages in rich objects in a social graph. 25 Open Graph type to create a huge impact of social traffic on your website.
Validate your Css file sheet with W3C validation Service. Check if the markup of your Cascading style Sheet document is W3C compliant.