Question 22583 in SEO Question posted in
Some basic information to get you started with this can be found here.

Read more Links do not have descriptive text – SEO

I have a page which contains a list of items. Each item contains a ‘Read more’ link that points to a different page. But when I run the lighthouse tool on that page, it complains that links do not have a descriptive text. Now I cannot change the Read more text here.

<a href="link 1">Read more</a>
<a href="link 2">Read more</a>
<a href="link 3">Read more</a>

Is there any other way to resolve this?

Tags:

2

Answers


  1. 0

    Yes, you can use aria-label in order to provide more descriptive text to Assistive Tech such as a screen reader.

    <a href="link 1" aria-label="some more descriptive text that explains the link">Read more</a>

    Assistive tech will read the contents of the aria-label out instead of "Read More".

    Bear in mind that the text you enter should be enough to know where the link will take you and not context dependent (the link text should make sense on its own) if possible.

    Login or Signup to reply.
  2. 0

    I had the same problem.
    Attribute aria-label does not works, lighthouse still display issue.
    I fixed it by adding hidden detailed text inside link.

    <a href="link 1">Read more<span class="screen-reader-text">Details</span></a>

<style>
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
    word-break: normal;
}
</style>

    Note about .screen-reader-text: this CSS grabbed from wordpress default Twenty Seventeen theme.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search