The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Accessible Icon Buttons

Accessible Icon Buttons

3:42
Icon buttons are very common in web applications, yet they often have accessibility problems. Learn how to make your icon buttons accessible to keyboard and screen reader users with HTML, CSS, SVG and ARIA.
Watch this lesson now
Avatar
egghead.io

Icon buttons are very common in web applications, yet they often have accessibility problems. Learn how to make your icon buttons accessible to keyboard and screen reader users with HTML, CSS, SVG and ARIA.

Avatar
Michael

Great topic, and often overlooked. Would be great to see more videos about using Aria.

Avatar
Alan

This, a thousand times. There just isn't any useful info out there on using ARIA in typical web apps. It's an important topic but hard to get into and often hard to justify spending time on researching when working on a tight deadline.

In reply to Michael
Avatar
Ingvi Jonasson

Would it not be better to use aria-label attribute instead of using the <title> element in for the SVG example. As well as for the .visuallyhidden class example?

Avatar
Marcy

Not necessarily. They are different techniques that accomplish the same thing–exposing an accessible name.

In reply to Ingvi Jonasson
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?