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.
Great topic, and often overlooked. Would be great to see more videos about using Aria.
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.
You got it!
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?
Not necessarily. They are different techniques that accomplish the same thing–exposing an accessible name.