Accessible Icon Buttons

Marcy Sutton
InstructorMarcy Sutton

Share this video with your friends

Send Tweet

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.

Michael
Michael
~ 5 years ago

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

Alan Plum
Alan Plum
~ 5 years ago

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.

Marcy Sutton
Marcy Suttoninstructor
~ 5 years ago

You got it!

Ingvi Jonasson
Ingvi Jonasson
~ 4 years ago

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?

Marcy Sutton
Marcy Suttoninstructor
~ 4 years ago

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