# 可访问性：锚点链接需要一个标签

**URL:** https://meta.discourse.org/t/accessibility-anchor-links-need-a-label/186032
**Category:** UX
**Created:** [2021年四月8日 06:03 UTC](https://meta.discourse.org/t/accessibility-anchor-links-need-a-label/186032 "2021-04-08T06:03:14Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![MarcoZehe](https://avatars.discourse-cdn.com/v4/letter/m/9de053/32.png) [@MarcoZehe](https://meta.discourse.org/u/MarcoZehe)
#### Post date: [2021年四月8日 06:03 UTC](https://meta.discourse.org/t/accessibility-anchor-links-need-a-label/186032/1 "2021-04-08T06:03:14Z")

</div>

由于这些功能仅在 beta 7 中刚刚出现，我想提请注意：长帖中每个子标题的链接需要添加 aria-label。目前的实现方式仅使用了带名称的 `a` 标签，并通过 CSS 类 `.anchor` 引入背景图像，这导致屏幕阅读器会读出某些数字（可能是帖子 ID）以及标题的部分内容。更稳妥的做法是明确标注，例如“固定链接”，或“固定链接至”加上子标题的文本。这样，当屏幕阅读器用户浏览页面上的链接列表时，就能获得命名清晰的链接。

此外，是否可以将锚点放在 `h` 元素内标题文本的_之后_，而不是之前？目前，当屏幕阅读器在标题之间导航时，总是先读出链接；尤其是如果如上文建议那样在标签中重复标题文本，阅读过程会变得相当繁琐。由于屏幕阅读器用户通常通过标题结构来概览页面（参见各类 WebAIM 屏幕阅读器用户调查），将链接置于标题文本之后会更合适。

感谢你们始终致力于提升 Discourse 的可访问性！

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [2021年四月8日 21:54 UTC](https://meta.discourse.org/t/accessibility-anchor-links-need-a-label/186032/2 "2021-04-08T21:54:47Z")

</div>

嗯，数字不知从哪儿被提取出来，这确实有点奇怪……

不过话说回来，这些建议都很合理，实现起来应该没什么问题。再次感谢你的建议！

---

<div class="post-metadata">

### Author: ![\_diondiondion](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/_diondiondion/32/200719_2.png) [@\_diondiondion](https://meta.discourse.org/u/_diondiondion)
#### Post date: [2021年四月9日 09:23 UTC](https://meta.discourse.org/t/accessibility-anchor-links-need-a-label/186032/4 "2021-04-09T09:23:02Z")

</div>

> [@awesomerobot](#):
>
> 嗯，似乎很奇怪，竟然会从某个地方提取到一个数字……

如果链接上没有其他标签，屏幕阅读器会读取 `href` 属性的内容，因此用户至少可以知道链接的目标或 URL。

关于可访问锚点链接，这里有一篇非常深入的技术解析：[Are your Anchor Links Accessible? | Amber Wilson](https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/)
