Is there a way to make a link appear as plain text on a screen reader but visibly be a link?

32 Views Asked by At

We are trying to reduce redundant links being read out by screen readers on our blog posts. Currently the title of the post is a clickable link, as well as the "read more" being a clickable link. We still want the "read more" announced as a link to the screen reader users, but do not want the title of the post to be announced as a link, while still being visibly a link to non-screen reader users. Is this possible?

For other similar items with two similar links by each other we had been using “aria-hidden=”true” AND a tabindex=”-1” but that makes the screen reader completely skip one of the links. We still want one of the links to read as plain text to the screen reader.

1

There are 1 best solutions below

0
QuentinC On

It's very easy to do it:

<a role="presentation" tabindex="-1" href="#">Link</a>

However, it isn't a very good idea to do so:

  • It's rather common nowadays for a blog to have both the post title as a link, as well as a link "read more" after the post intro, and it isn't at all a problem
    • Having the post title as a link allows to open very quickly a given post, given that the screen reader allows to jump from heading to heading
    • If I don't know well with the title alone if I want to read the post, maybe the intro will convince me, and at that time I will click on the "read more" link. Otherwise I have to go back to the post title to open it.
  • tabindex=-1 must come along with role=presentation. Since the link isn't announced as such, when it takes the focus, I might wonder why this element can take focus and what it does if I press enter.
  • Having a non-focusable link can confuse keyboard-only users who don't use a screen reader
  • Changing the role of a natively non-neutral element isn't to take too lightly. You should have a very good rason to do so. All role replacements may not work well everywhere! As ARIA rules say, you should avoid using ARIA, unless you have no better solution
  • Just in case, I haven't actually tested, but removing the link role probably won't make screen readers read the text continuously better than with the link, if it was your concern