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

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默认的Twenty-Seventeen主题中抓取的。

Answer 2

是的，您可以使用aria-label为辅助技术(如屏幕阅读器(提供更多描述性文本。

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

辅助技术将读出CCD_ 4的内容；阅读更多"；。

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