「更多」鏈接和W3C的建議

Question

在我的文章列表中，我通過了前進方向並通過「更多」鏈接進行鏈接：

<article> 
    <h3><a href="#">Title here</a></h3> 
    <p class="lead">Lead here</p> 
    <a href="#" title="Title here">Read more</a> 
</article> 

看了W3C's tips on avoiding verbs in link text，我不願意有一個「閱讀更多」鏈接，但我覺得有必要告訴用戶，當他們到達主題文本的末尾時還有更多需要閱讀的內容。

是否使用title="Title here"一個很好的折衷？

Answer 1

（就個人而言，我不尖從未同意使用動詞短語。）

在我看來，「閱讀」是有問題的，因爲它是沒有用的/有意義的斷章取義。想想一個典型的博客首頁，列出10個最近的文章片段。如果屏幕閱讀器的用戶使用該功能來顯示網頁上的所有鏈接，他們得到的是這樣的：

超鏈接：瞭解更多
超鏈接：瞭解更多
超鏈接：瞭解更多
超鏈接：瞭解更多
...

因此，他們不知道這些鏈接將導致哪裏。 （...瞭解更多什麼？）

因此，您應該在鏈接中包含此上下文，即文章標題。

原則上，使用title屬性是適當的。但是，許多用戶代理（包括許多屏幕閱讀器）默認忽略此屬性。所以爲了安全起見，文章標題應該包含在錨文本中。 （如果你願意，你可以直觀地隱藏它，這樣它仍然可以讀取屏幕閱讀器用戶。）

你也可以考慮完全忽略這個鏈接（如果你直觀地表明標題是鏈接，並且如果你只顯示一個簡短的總結/介紹，不可能被認爲是整篇文章）。對UX SE一些相關的討論：

• Use of 'read more' on teaser copy on index pages - is it necessary?
• Should I have 「read more」 links in a responsive design?

---

在任何情況下，你可能想使用bookmark link type的鏈接到文章全文。

<article> 
    <h3><a href="#" rel="bookmark">Title here</a></h3> 
    <!-- … --> 
</article> 

Answer 2

最後，我帶着span標籤是唯一可見的屏幕閱讀器：

<a href="#">Read more<span class="sr-only"> about 'Title here'</span></a> 

一些網站嵌入物品本身，以確保他們的工作在屏幕閱讀器的文本複製時，記並粘貼到另一個網站：

<p>Paragraph one here.</p> 
<p class="sr-only">Read more at <a href="#">our-site.com</a></p> 
<p>Paragraph 2 here.</p> 

這是一個健康的妥協，因爲希望取悅搜索引擎，當然歡迎屏幕閱讀器。