了解更多链接没有描述性文字

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而不是“阅读更多”。

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