Accessibility
On each web page, custom controls must have an appropriate role, with any required ARIA attributes giving them properties and status. For instance: to convey status correctly, a custom checkbox must have a role="checkbox" and aria-checked="true|false".
You can use a screen reader or the ChromeDevTools accessibility panel if you need to verify that all custom interactive controls have the appropriate ARIA roles.
In CSS, the <div> and <button> elements provide different experiences when inspected by a screen reader: the <div> is announced through its textual content, while the <button> is announced as a "button", i.e. something the user can interact with.
You can solve the situation by not using custom interactive controls together: do not use a <div> with the button function, but try to use a real <button> directly.
If you need to keep the <div> though, assign a role=”button” to it and aria-pressed=”false”.
In this way, screen readers are able to announce the role and interactive state of the <div>.
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
Builders and generators Google
Choose a map theme or build your custom Google map. Customize maps with your own creativity, settings, styles and colors.
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.
Tester and validators
Test your Web Vitals metrics, score and diagnostic. Measures Google Core Web Vitals LCP, FID, CLS, TTFB, FCP, TTI, TBT and more.
Server and proxy
IP Address and Domain Name Geolocation Lookup Tool. IPv4, IPv6 and domain name Geolocation. Accurate IP and Domain name lookup database.
Images
Zoom in, scale, flip, rotate, crop and resize your images. Upload and edit yours images file for free with dunplab image editor.
Compressor
JS minifier tool. Optimize and compress your Javascript code, make your website faster and reduce network payload sizes.
Retrieve your Public IP Address and geolocation. Get your IP address, ISP-Organization information and geolocation data for free.
Converters
Convert Timestamp in date time value and vice versa. Convert epoch/unix timestamp in readable date time value and vice versa.