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
Converters
Pixel - Rem - Point units converter. Convert Pixel to REM or Point unit in seconds and vice versa with this free converrter.
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.
Builders and generators
Generate your Web App Manifest json and improve site data. Provide information about your website, allow users to quick access for a better experience.
Tester and validators
Validate your pages with W3C Markup Validation Service. Check the markup validity of HTML5 web documents with W3C Validator.
Test your Progressive Web App. Check the performance of your PWA, try to deliver high quality, engaging, fast and capable apps on every devices.
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.
Generate icons for web, Android, iOs, Microsoft and Apps. Show a graphical representation of your site within browser’s address bar.
Compressor
JS minifier tool. Optimize and compress your Javascript code, make your website faster and reduce network payload sizes.