How to solve UX vs screen reader accessibility problem?

Question

I'm learning web-development and semantic html markup. Recently a tutorial suggested that because "Click here" or "Read more" anchor texts are not so descriptive to visually impaired users depending on screen readers, one should wrap the descriptive part of the text with anchor tags rather than the CTA.

For example, <a href="">Click here</a> to know more information about the trips. is not good according the tutorial and it should be Click here to know more <a href="">information about the trips</a>. This creates a certain problem where the visually able user will want to click on the Click here text but nothing will happen.

How to solve this problem UX-wise where both visually impaired and visually able person can access the page effortlessly?

Answer 1

"Click Here" buttons are usually located in a block of the design; it is common to have a listing of articles with "Click Here" CTA on each one. In this case the whole element should be a link and not just "Click Here"

In an article body text "Click Here" should not be used. Imagine this example text:

The study showed that the results of foo where consistent with bar. <a>Click here for a link to the study</a>.

or

The <a>study on foo</a> show consistent results with bar.

The second example isn't just better for accessibility and SEO but is also far more readable because it doesn't call a reader to action. If the user wants to read more they know where to click because it is a link.

Lastly, if you absolutely must have "Click Here" CTA links you need to learn how to use ARIA attributes correctly.

If you are going to use ambiguous link text then you need to use the aria-label attribute to give context to the link. In an example on meaningful link text from UoW they suggest:

<a href="post.php?post=632" aria-label="More on Using Meaningful Link Text">More...</a>

Answer 2

You avoid "click here" because not every user will be using a mouse (especially now so many people use touchscreens and "tap") and just use the anchor with sensible text that can stand alone when presented out of context.

<a href="">More information about the trips</a>.

Answer 3

As said in http://ux.stackexchange.com/a/127688/32746, worry about showing the "click" word to people who tap:

<a href="">Know more information about the trips</a>

Visually impaired will be told that it's a link.

As long as your HTML is correct when your page starts and that correctness is held by any potential live script codes, there should be no problem.

Answer 4

This isn't really a UX vs screen reader problem. Ambiguous link phrases aren't just an accessibility barrier but also basic usability and readability issues. Descriptive links benefit everyone.

There is generally no need to include verb phrases like "click here" in a link at all. Styling should make links distinctive and easy to recognise in their own right, without an explicit written instruction to click. It just adds extra noise and repetition, and forces users to read the surrounding content in order to understand the purpose of a link.

To demonstrate one of the problems that generic link phrases cause for screen reader users specifically, here's an example of a page with lots of non-descriptive links. There's no way for the user to tell where any of those links go.

It is far better for each link to be self-descriptive, so that it still makes sense in its own right when removed from the original context. That does allow screen reader users to navigate, but also makes content more readable and pages more scannable by sighted users.