DEV Community

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

Collapse
 
grahamthedev profile image
GrahamTheDev • 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

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!