DEV Community

loading...
Cover image for How to use aria labels in your HTML – and why you should: the video

How to use aria labels in your HTML – and why you should: the video

Salma Alam-Naylor
✨⚡️ I help developers build stuff, learn things, and love what they do • DevRel @contentful • Founder of unbreak.tech • she/her ⚡️✨
・1 min read

If you need to display multiple links with the same text on a web page — such as 'read more' — this short video helps you understand why you should be using aria labels to improve accessibility for people who use screen readers and assistive technology such as VoiceOver, on your website.

Prefer to read a blog post? Click here to read the post on DEV.

Build stuff, learn things, love what you do.

Discussion (4)

Collapse
inhuofficial profile image
InHuOfficial • Edited

Great video. Just so you know “read” in your aria-label is not strictly necessary. A link let’s people know they are navigating to a page with that name.

Also it could be argued that the title or the read more should be removed from the focus order of the page (one or the other). At the moment you have 2 links leading to the same place, which WCAG advises against. (I am On my phone at the moment, but I will try and remember to find the relevant guidance when at PC).

This is because It doubles the tab stops for keyboard users. Minor issue but annoying and a slight redesign of the HTML could solve it easily.

You could even (shock horror) make one of them only work with a mouse click or touch event and remove them from the focus order (the heading if you did it this way)! (Cue dramatic music as everyone is stunned that someone who advocates for accessibility is suggesting making an element not interactive 😜😂)

Anyway, minor suggestions, great video showing how easy it is and drawing attention to the “read more” problem many sites have. Have a ❤️🦄 from me!

Collapse
whitep4nth3r profile image
Salma Alam-Naylor Author

All good points! Thanks for watching. Accessibility is never easy, and I'm pretty sure we can never reach 100% perfection. But the more we talk about it and the more we can educate, the better it will be!

Collapse
netanelvaknin profile image
Netanel Vaknin

Wow. I didn't know that Chrome dev tools have "Accessability" tab and I can see what screen readers will "say".
Will be helpful in my work for sure!

Collapse
whitep4nth3r profile image
Salma Alam-Naylor Author

It’s quite hidden isn’t it! I only discovered it this year! Glad the information was helpful for you ☺️