使不同的 HTML 元素可访问的正确方法是什么？
What is the correct way to make the different HTML elements accessible?
以下哪一种方法对于使 link 易于访问是正确/更好的？
<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>
或
<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>
或
<section aria-labelledby="hdng">
<h2 id="hdng">Events</h2>
</section>
或
<section>
<h2 class="sr-only">Events</h2>
</section>
对于 link、it should make sense out of context，所以我会使用 sr-only class 围绕有用的 screen-reader 特定文本。
<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 会很好地完成工作。如果您希望 screen-reader 和普通用户都能看到标题，请使用带有 aria-labelledby 属性的标题标签。如果您只希望屏幕阅读器用户看到标题，请再次使用 sr-only class。通常，您希望所有用户都能看到一个部分标题，这样每个人都可以识别一组新内容的开头。
<section aria-labelledby="hdng">
<h2 id="hdng">Events</h2>
</section>
只是为了扩展@thenomadicmann 的精彩回答，这里有一些关于这个主题的建议，为什么 WCAG/一般可访问性指南中提出了一些建议。
我应该如何在 link 中包含 screen-reader 友好文本？
在您给出的两个示例中（一个使用视觉隐藏文本，一个使用 aria-label），您应该使用视觉隐藏文本。
这有一个很好的理由，兼容性。
14 browser / screen reader combinations have problems with aria-label on links（虽然支持很好）
但是 100% 的浏览器/屏幕 reader 组合将读取视觉上隐藏的文本。
因此你应该使用
<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>
图标旁注
考虑用内联 SVG 替换您的 font-awesome 图标。它们对可访问性更友好，因为如果有人覆盖了您的网站字体，它们就不会消失（例如，有阅读障碍的人更喜欢某种字体，因为它更容易阅读）。另外，很棒的字体大约有 150kb CSS，内联 SVG 大约有 1kb，因此如果您只有几个图标，它也会使网站更快！
如何使部分无障碍
根据标准，以下是正确的方法
<section>
<h2>section title example<h2>
</section>
然而，为了获得最大的可比性，您应该使用 aria-label 和 role="region"。
<section aria-label="section title example" role="region">
<h2>section title example<h2>
</section>
这里有两点。
aria-label 支持率接近 100%（如前所述），而 aria-labelledby support is not as good- 大约 2% of all screen reader users are still stuck on IE6-8。因此，添加
role="region" 为那些屏幕 reader 用户提供（几乎）相同的语义。
关于区域和标题的旁注
1 - aria-label 将导致某些屏幕 reader 出现一些重复的公告。然而，这仍然是可取的，因为用户可能更喜欢按地区导航，因此宣布地区名称很有用。
2 - 在您的评论中，您想知道为什么要使用 sr-only 标题而不是标签。
我在前一点中部分介绍了这一点（aria-label 比视觉上隐藏的文本稍微不可靠）但还有另一个原因。
虽然有些屏幕 reader 用户按区域导航，但其他用户更喜欢按标题导航页面（即在 NVDA 中，您按 NVDA 键 + 2 遍历所有 2 级标题。）。
这就是标题很重要的原因，事实上它们比正确使用 <section> 元素更重要，因为大多数 reader 屏幕用户浏览您的页面都是这样。
以下哪一种方法对于使 link 易于访问是正确/更好的？
<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>
或
<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>
或
<section aria-labelledby="hdng">
<h2 id="hdng">Events</h2>
</section>
或
<section>
<h2 class="sr-only">Events</h2>
</section>
对于 link、it should make sense out of context，所以我会使用 sr-only class 围绕有用的 screen-reader 特定文本。
<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 会很好地完成工作。如果您希望 screen-reader 和普通用户都能看到标题，请使用带有 aria-labelledby 属性的标题标签。如果您只希望屏幕阅读器用户看到标题，请再次使用 sr-only class。通常，您希望所有用户都能看到一个部分标题，这样每个人都可以识别一组新内容的开头。
<section aria-labelledby="hdng">
<h2 id="hdng">Events</h2>
</section>
只是为了扩展@thenomadicmann 的精彩回答，这里有一些关于这个主题的建议，为什么 WCAG/一般可访问性指南中提出了一些建议。
我应该如何在 link 中包含 screen-reader 友好文本？
在您给出的两个示例中（一个使用视觉隐藏文本，一个使用 aria-label），您应该使用视觉隐藏文本。
这有一个很好的理由，兼容性。
14 browser / screen reader combinations have problems with aria-label on links（虽然支持很好）
但是 100% 的浏览器/屏幕 reader 组合将读取视觉上隐藏的文本。
因此你应该使用
<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>
图标旁注
考虑用内联 SVG 替换您的 font-awesome 图标。它们对可访问性更友好，因为如果有人覆盖了您的网站字体，它们就不会消失（例如，有阅读障碍的人更喜欢某种字体，因为它更容易阅读）。另外，很棒的字体大约有 150kb CSS，内联 SVG 大约有 1kb，因此如果您只有几个图标，它也会使网站更快！
如何使部分无障碍
根据标准，以下是正确的方法
<section>
<h2>section title example<h2>
</section>
然而，为了获得最大的可比性，您应该使用 aria-label 和 role="region"。
<section aria-label="section title example" role="region">
<h2>section title example<h2>
</section>
这里有两点。
aria-label支持率接近 100%（如前所述），而aria-labelledbysupport is not as good- 大约 2% of all screen reader users are still stuck on IE6-8。因此，添加
role="region"为那些屏幕 reader 用户提供（几乎）相同的语义。
关于区域和标题的旁注
1 - aria-label 将导致某些屏幕 reader 出现一些重复的公告。然而，这仍然是可取的，因为用户可能更喜欢按地区导航，因此宣布地区名称很有用。
2 - 在您的评论中，您想知道为什么要使用 sr-only 标题而不是标签。
我在前一点中部分介绍了这一点（aria-label 比视觉上隐藏的文本稍微不可靠）但还有另一个原因。
虽然有些屏幕 reader 用户按区域导航，但其他用户更喜欢按标题导航页面（即在 NVDA 中，您按 NVDA 键 + 2 遍历所有 2 级标题。）。
这就是标题很重要的原因，事实上它们比正确使用 <section> 元素更重要，因为大多数 reader 屏幕用户浏览您的页面都是这样。