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

Question

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

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

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

Answer 1

我也有同样的问题。 属性

aria-label

不起作用，灯塔仍然显示问题。
我通过在链接内添加隐藏的详细文本来修复它。

<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>

注意

.screen-reader-text

：这个CSS是从wordpress默认的二十七主题中抓取的。

Answer 2

是的，您可以使用

aria-label

向辅助技术（例如屏幕阅读器）提供更多描述性文本。

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

辅助技术将读取

aria-label

的内容，而不是“阅读更多”。

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

Answer 3

我的网站（https://bonsais.com）也有这个错误 “链接没有描述性文字”如何解决？