How to use the aria label attribute in HTML
In this video, I teach you how to make links on your website accessible using the aria-label attribute in your HTML. I show you how screen readers such as VoiceOver read out a web page, and how you can use the accessibility tree in Chrome Dev Tools to check accessibility on your web pages.
If you need to display multiple links with the same text on a web page — such as 'read more' — this video helps you understand why you should be using aria labels to improve web accessibility for people who use screen readers and assistive technology on your website.
0:00 Intro
0:34 Demo of a collection of 'read more' links with VoiceOver with no aria labels
1:34 Demo of accessibility tree in Chromium dev tools
1:56 Adding aria labels to the 'read more' links
2:01 Showing how aria labels appear in the accessibility tree
2:07 Demo of VoiceOver with aria labels on the 'read more' links
2:25 Blog post plug
Link to blog post: https://whitep4nth3r.com/blog/when-to...
Website: https://whitep4nth3r.com
Twitter: / whitep4nth3r
Twitch: / whitep4nth3r
https://www.bonfire.com/store/p4nth3r...
#accessibility #html #webdev