Read more Links do not have descriptive text

Question

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?

Chrismatory

check this article web.dev/link-text – Celin

Why can't you change the text there? – Scrannel

Answer 1

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.

Bevvy

Answer 2

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.

Eccles

I tried that but it still complains and the funny thing is that if I change the text to Read this then it's fine as it seems like they are blacklisting some words mentioned here web.dev/link-text/ – Chrismatory

Well if you are using an aria-label with a decent description you are certainly doing it correctly and it may be the tool misreporting. Is the page publicly accessible, if it is do you want to share a URL to it? I will happily have a look. – Eccles

The alternative would be visually hidden text within a span, I can cover that if you can't get a solution with aria-label. It is actually a more robust solution, but it is a little more work that is all. – Eccles

Answer 3

If you don't want to risk Google penalizing due to invisible text, you can also add punctuation like a "." or "!" and it'll pass the "Links do not have descriptive text" audit from lighthouse (space will not work as it trims before testing against the blocklist).

Here is the current blocklist for the "Links do not have descriptive text" audit in lighthouse:

const BLOCKLIST = new Set([
  // English
  'click here',
  'click this',
  'go',
  'here',
  'information',
  'learn more',
  'more',
  'more info',
  'more information',
  'right here',
  'read more',
  'see more',
  'start',
  'this',
  // Japanese
  'ここをクリック',
  'こちらをクリック',
  'リンク',
  '続きを読む',
  '続く',
  '全文表示',
  // Spanish
  'click aquí',
  'click aqui',
  'clicka aquí',
  'clicka aqui',
  'pincha aquí',
  'pincha aqui',
  'aquí',
  'aqui',
  'más',
  'mas',
  'más información',
  'más informacion',
  'mas información',
  'mas informacion',
  'este',
  'enlace',
  'este enlace',
  'empezar',
  // Portuguese
  'clique aqui',
  'ir',
  'mais informação',
  'mais informações',
  'mais',
  'veja mais',
  // Korean
  '여기',
  '여기를 클릭',
  '클릭',
  '링크',
  '자세히',
  '자세히 보기',
  '계속',
  '이동',
  '전체 보기',
  // Swedish
  'här',
  'klicka här',
  'läs mer',
  'mer',
  'mer info',
  'mer information',
  // Tamil
  'அடுத்த பக்கம்',
  'மறுபக்கம்',
  'முந்தைய பக்கம்',
  'முன்பக்கம்',
  'மேலும் அறிக',
  'மேலும் தகவலுக்கு',
  'மேலும் தரவுகளுக்கு',
  'தயவுசெய்து இங்கே அழுத்தவும்',
  'இங்கே கிளிக் செய்யவும்',
  // Persian
  'اطلاعات بیشتر',
  'اطلاعات',
  'این',
  'اینجا بزنید',
  'اینجا کلیک کنید',
  'اینجا',
  'برو',
  'بیشتر بخوانید',
  'بیشتر بدانید',
  'بیشتر',
  'شروع',
]);

So "Read more" will fail the audit, while "Read more." will pass.

Carboxylase

Answer 4

As others have pointed out, 'Read more' is blacklisted because it is not descriptive enough. What we ended up doing was adding aria-label to provide a descriptive name and moving the 'Read more' text to the content of ::after pseudo-element.

<a href="link" class="read-more" aria-label="Descriptive text"></a>

<style>
.read-more::after {
    content: 'Read more';
}
</style>

The aria-label is important to avoid the "Links do not have a discernible name" message in Lightouse report.

Moony