24Jul

Think about screen readers, use screenreader class

I recently went to some interesting talk and one was about accessibility. I would like to share the most important point I heard during that talk.

Many screen readers don’t read the title attribute on links so it’s usually impossible for someone with disability to know what the “read more” link relates to.
On mobile devices where there is no hover effect, the title attribute on link becomes completely useless. Just two easy step to makes your links accessible for screen readers:

Create a .screenreader class

Important: don’t use display: none; as it hide content for everyone.

[code language=”css”].screenreader {position: absolute; top:0; left:-999em}[/code]

Hide part of the text in your links

[code language=”html”]<a href="your_url">Read more <span class="screenreader">about title_of_your_page</span></a>[/code]

It’s very important for accessibility and good for SEO (remember google is blind and depth, so think about it =)

Leave a Reply