使不同的HTML元素可访问的正确方法是什么？

Question

以下哪种方法对使链接可访问更正确/更好？

<a href="http://example.com" aria-label="Title of post read more">Read More <i class="fas fa-chevron-right" aria-hidden="true"></i></a>

OR

<a href="http://example.com"><span class="sr-only">Title of post</span> Read More <i class="fas fa-chevron-right" aria-hidden="true"></i></a>

哪种方法最适合/更适合使节可访问？

<section aria-label="Events"></section>

OR

<section aria-labelledby="hdng">
<h2 id="hdng">Events</h2>
</section>

OR

<section>
<h2 class="sr-only">Events</h2>
</section>

Answer 1

对于链接，it should make sense out of context，所以我将在有用的屏幕阅读器特定文本周围使用sr-only类。

<a href="http://example.com"><span class="sr-only">Title of post</span> Read More <i class="fas fa-chevron-right" aria-hidden="true"></i></a>

关于本节，a major heading tag at the very beginning将做得很好。如果您希望屏幕阅读器和普通用户都可以看到标题，请使用带有aria-labelledby属性的标题标签。如果只希望屏幕阅读器用户看到标题，请再次使用sr-only类。通常，您希望所有用户都能看到部分标题，以便所有人都可以识别新内容组的开头。

<section aria-labelledby="hdng">
  <h2 id="hdng">Events</h2>
</section>

Answer 2

只是为了扩展@thenomadicmann的出色回答，这里是关于该主题的一些建议，并且为什么在WCAG /一般可访问性指南中有所建议。

如何在链接中包含屏幕阅读器友好的文本？

在您给出的两个示例中（一个使用视觉隐藏的文本，另一个使用aria-label），您应该使用视觉隐藏的文本。

兼容性有一个很好的理由。

14 browser / screen reader combinations have problems with aria-label on links（尽管支持很好）

但是，浏览器/屏幕阅读器组合的100％会读取视觉上隐藏的文本。

因此，您应该使用

aria-label

图标旁注

考虑用内嵌SVG替换字体真棒的图标。它们更易于访问，因为如果有人覆盖您的网站字体，它们将不会消失（例如，患有阅读障碍的人更喜欢某种字体，因为它们更易于阅读）。再加上令人敬畏的字体，大约有150kb的CSS，而内嵌SVG约为1kb，因此如果您只有几个图标，它也可以使网站更快！

如何使部分可访问

按照标准，以下是正确的方法

<a href="http://example.com"><span class="sr-only">Title of post</span> Read More <i class="fas fa-chevron-right" aria-hidden="true"></i></a>

但是为了获得最大的可比性，您应该使用

<section>
    <h2>section title example<h2>
</section>

和aria-label。

role="region"

这里有两点。

1. role="region"支持近100％（如前所述），而

   <section aria-label="section title example" role="region">
       <h2>section title example<h2>
   </section>

2. [C0周围。这样，aria-label的添加（几乎）为那些屏幕阅读器用户提供了相同的语义。

区域和标题的旁注

1-aria-labelledby support is not as good将导致某些屏幕阅读器出现某些重复的公告。然而，这仍然是优选的，因为用户可能更喜欢按区域导航，并且这样宣布区域名称是有用的。

2-在您的评论中，您想知道为什么使用aria-labelledby标题而不是标签。

我在上一点中部分介绍了这一点（2% of all screen reader users are still stuck on IE6-8的可靠性比视觉上隐藏的文本稍差一些，但是还有另一个原因。

[虽然某些屏幕阅读器用户按区域导航，但其他用户更喜欢按标题导航页面（即，在NVDA中，您按NVDA键 + 2循环浏览所有2级标题。

这就是标题很重要的原因，实际上，标题比正确使用role="region"元素更重要，因为这是大多数屏幕阅读器用户浏览页面的方式。