From the course: Simplifying Web Development with Accessibility Best Practices
Unlock this course with a free trial
Join today to access over 24,700 courses taught by industry experts.
How to hide content from screen readers - HTML Tutorial
From the course: Simplifying Web Development with Accessibility Best Practices
How to hide content from screen readers
- [Instructor] From time to time, you'll come across situations where you need to hide content from a screen reader. Here's an example. We have a card previewing an article. The card contains an image, the title of the article, which has a link, a short description, and a link with the text "Read more." For users of visual browsers, there's a good chance they'll just click on the "Read more" link, even though the title is also a link, because the "Read more" link is an explicit call to action, but they can also click on the title if they're used to doing that. It'll take them to the same article. Here's the problem though. A screen reader user tabbing through this card will encounter two links to the same location. First the title, and then the "Read more" link. This is redundant, and if there are many cards, it'll get confusing. Why are there double links to each article? To get around this problem, we can…