When I was looking for the way to edit title attributes I came across an article about how the title text is often seen as helpful for people that use screen readers but that it actually isn’t. Screen readers skip title text. They also skip display none items.
This week we had a lunch and learn with Billy Gregory and he showed us how people with screen readers can navigate websites by skipping through headers and links.
I started thinking about those click more, read more, continue reading buttons on websites and how they provide little information to people with screen readers.
It’s unclear what page they will be taken to when clicked. But sometimes for us sighted users a “read more” link is completely appropriate.
So what if there was a way to add more text to a link but hide it. So that people with screen readers can get more information on the link they have navigated to but left buttons and links visually appealing and what designers are asking for?
This article by David Bell gives an example of how to achieve this. See my CodePen below. You can also use this way to add hidden headers to sections where you don’t visually need them but would help visually impaired people navigate to different sections of your website.
Wrap the extra link text in a span, give it a class, I gave mine accessibility. Then with css hide it.