Accessibility Errors in Google Lighthouse

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Buttons do not have an accessible name

Webflow doesn't have a native HTML <button>. The Button in Add Elements is actually a link, but the Submit button is native HTML.

In HTML, buttons do something, and links go somewhere.

If you use the "button" as a Call to Action, which links to a signup form on the page, that's no problem. It's linking you to somewhere. If you use the "button" to open a modal (pop-up window), this does something, and so it should be a button. In this case we can add a bit of ARIA in the Element Setting (D) of Webflow to tell screen readers that this is in fact a button.

In Custom Attributes + Name = "role" + Value = "button". And that's it. You've written your first (and probably last) bit of ARIA, and you've made your website more accessible.

Add Name and Value to a button
role="button" is added to the code

Before the ARIA is added we have

<a href="#" class="w-button">Button Text</a>

Once the ARIA is added we have

<a role="button" href="#" class="w-button">Button Text</a>

Google Lighthouse says

When a button doesn't have an accessible name, screen readers and other assistive technologies announce it as button, which provides no information to users about what the button does.