Fix Button Accessibility in Lighthouse

Short Answer

Add text to the button.

<button>Submit</button>

If a button does not have text, add an aria-label attribute to the element.

<button aria-label="Close">&times;</button>

If a button contains an image, use the alt tag on the image element.

When you place an img within a button, the button takes its accessible name from the image.

<button>
  <img src="close.png" alt="close" />
</button>

Exclusive Content

🚀 Don't Miss Out on the Full Content of this article🚀

Unlock your full potential by gaining access to our exclusive content.

The exclusive content for this article includes:

• 🤔 Why is it Important to make Buttons Accessible
• 📚 What is Aria-label?
• 🔧 How does aria-label make buttons accessible?
  • 🏷️ Describing the button's function
  • 🔎 Making the button visible
• 💡 Benefits of using aria-label
  • ♿ Improved accessibility
  • 📃 Compliance with accessibility standards
  • 🌟 Improved user experience

👉 Click the Subscribe button below and gain immediate access to our comprehensive resources! Subscribe now and elevate your skills!