阅读更多链接没有描述性文字

Posted 2023-03-25

【中文标题】阅读更多链接没有描述性文字

【英文标题】：Read more Links do not have descriptive text

【发布时间】：2021-12-25 01:42:21

【问题描述】：

我有一个包含项目列表的页面。每个项目都包含一个指向不同页面的“阅读更多”链接。但是当我在该页面上运行灯塔工具时，它抱怨链接没有描述性文本。现在我无法在此处更改阅读更多文本。

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

有没有其他方法可以解决这个问题？

【问题讨论】：

查看这篇文章web.dev/link-text

为什么不能更改那里的文字？

【参考方案1】：

是的，您可以使用 aria-label 为 Assistive Tech 提供更多描述性文本，例如屏幕阅读器。

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

辅助技术人员会读出aria-label 的内容，而不是“阅读更多”。

请记住，如果可能，您输入的文本应该足以知道链接会将您带到哪里，而不是依赖于上下文（链接文本本身应该有意义）。

【讨论】：

我试过了，但它仍然抱怨，有趣的是，如果我将文本更改为 Read this 那就没问题了，因为他们似乎将这里提到的一些词列入黑名单web.dev/link-text/

好吧，如果您使用的aria-label 描述得体，那么您肯定做得对，这可能是工具误报。该页面是否可公开访问，如果是，您想共享一个 URL 吗？我很乐意看看。

替代方案是在一个跨度内视觉隐藏文本，如果您无法通过aria-label 获得解决方案，我可以介绍这一点。它实际上是一个更强大的解决方案，但仅此而已。