Today I Learned - Rocky Kev

TIL a Accessible way to solve Read More

POSTED ON:

TAGS: accessibility links webdev html

I do a lot of work with web accessibility at work. (Not on this blog. I don't even think anybody reads this! If you're a visitor who needs accessibility, send me a email and details of your use-cases!)

Screenreaders help sight-impaired visitors have a better experience. The most annoying thing on a news website is to hear this:

“Read more — link, read more — link, read more — link”

There's two ways to solve it.

Solution 1

No more read mores. Just link the whole thing.

Solution 2

Aria-labels!

<h4>News</h4>
<p>Eleks Design Team will participate in the Space Hackathon.
<a href="aerospace-hackathon.html" aria-label="Read more about Eleks participation in the Space Hackathon">Read more...</a>
</p>
<p>Projector Tech and Creative Institute launches five courses on web accessibility this year.
<a href="new-courses.html" aria-label="Read more about new courses on accessibility by Projector Institute">Read more...</a>
</p>

via Designing Better Links For Websites And Emails: A Guideline

Related TILs

Tagged: accessibility

TIL aria-expanded for showing when things are hidden/shown

The aria-expanded attribute is set on an element to indicate if a control is expanded or collapsed, and whether or not its child elements are displayed or hidden.

TIL ARIA role presentation

Think of this as a reset. You use role=presentation to remove semantic meaning from an element.

TIL reduce-motion-blur

Dizziness and vertigo are symptoms of a vestibular balance disorder. If the user has set up a user preference that they prefer motion-based animation be disabled/reduced, we can tap into that. As web developers, we can also support them.