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.
Top comments (4)
Great video. Just so you know “read” in your
aria-labelis 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!
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!
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!
It’s quite hidden isn’t it! I only discovered it this year! Glad the information was helpful for you ☺️