一堆“读更多”、“查看详情”、“点这里”的链接堆在同一个页面上，用读屏软件的老铁们直接懵圈——每个链接念出来都一样，完全不知道点进去会看到啥。这不就芭比Q了吗？其实只要给链接和标题牵个线，让它们串在一起被读出来，问题就迎刃而解。这个叫 aria-labelledby 的属性就是那个“月老”，能把好几个元素的ID绑到一块，读屏软件会把这些ID对应的文本内容拼成一个句子念出来。比如链接里只写了“读更多”，但绑定了文章标题“龙的那些事儿”，读屏就会念“读更多 龙的那些事儿”，是不是瞬间清晰多了？
啥是串联ID
aria-labelledby 是HTML里给辅助技术（比如读屏软件）递小纸条的一种方式。正常情况下，一个链接的朗读文本要么是 <a> 标签中间写的那段字，要么是 aria-label 给的替代值。但 aria-labelledby 更野——它可以塞进去好几个ID，中间用空格隔开，读屏软件会按顺序把这些ID对应的元素里的文字（或者元素的 aria-label）拼成一大串念出来。举个栗子：一个页面有个标题 <h2 id="dragon-stuff">西方龙到底喷不喷火</h2>，下面跟着一个链接 <a href="#" id="read-btn" aria-labelledby="read-btn dragon-stuff">查阅</a>，读屏就会念“查阅 西方龙到底喷不喷火”。这招特别适合那种为了界面美观不得不写短链接文字，但又想让辅助设备获得完整信息的情况。需要注意的是，aria-labelledby 会完全覆盖掉链接标签里原本的文字内容（视觉上还显示原来的短文字，但读屏已经不鸟它了），所以视觉设计和可访问性可以两全，绝绝子。
实操走一波
拿WordPress举例，毕竟这玩意儿满大街都是。默认的按钮块压根没有给 aria-labelledby 留位置，得动点手脚。下面把步骤掰开揉碎：
步骤1：给标题塞一个ID
在WordPress编辑器里找到那个想被读出来的标题块（比如H2）。点一下标题块，右侧面板切换到“高级”选项卡（有的叫“区块设置”里的“高级”）。看到一个叫“HTML锚点”或者“锚点”的输入框，往里头敲一个英文ID，比如 fire-dragon-head。这个ID不能有空格、不能数字开头，建议用小写加短横线。填好后保存，WordPress会在渲染页面时给这个标题加上 id="fire-dragon-head"。
步骤2：把按钮块转成自定义HTML
插入一个按钮块，先随便写点视觉文字，比如“查阅报告”。然后点击按钮块右上角那三个竖点，在菜单里选“转换为自定义HTML”。这时候按钮块会变成一堆HTML代码，大概长这样：
<div class="wp-block-buttons">
<div class="wp-block-button">
<a class="wp-block-button__link wp-element-button" href="https://example.com/report">
查阅报告
</a>
</div>
</div>步骤3：手动添加ID和aria-labelledby
在 <a> 标签里塞两个属性：一个是给这个链接自己起个ID（随便写，比如 my-report-btn），另一个就是 aria-labelledby，值写成 链接自己的ID + 空格 + 标题的ID。改完的代码：
<div class="wp-block-buttons">
<div class="wp-block-button">
<a id="my-report-btn" aria-labelledby="my-report-btn fire-dragon-head" class="wp-block-button__link wp-element-button" href="https://example.com/report">
查阅报告
</a>
</div>
</div>为啥要把链接自己的ID也写进去？因为 aria-labelledby 如果只写标题ID，读屏就只会念标题的内容，链接里原本的“查阅报告”就彻底消失了。把两个ID都放进去，读屏会先念链接自己的文本（注意：这里念的其实是链接元素本身的文本，但 aria-labelledby 会覆盖默认行为，不过把自己ID加进去后，读屏会去读取这个ID对应的元素——也就是链接自己——的 aria-label 或者文本内容。更保险的做法是给链接再加个 aria-label？不用，因为 aria-labelledby 引用了链接自己的ID，读屏会去抓 <a> 标签内的文本“查阅报告”，然后再接着抓标题的文字，最终念出“查阅报告 西方龙到底喷不喷火”）。这样视觉上还是短小的“查阅报告”，读屏里却得到了完整上下文。
步骤4：处理WordPress的“不太乐意”
直接这样改完代码，点更新或者预览，WordPress可能会报错或者直接过滤掉这些自定义属性（因为区块转换后编辑器会做安全检查）。如果发现保存后 id 和 aria-labelledby 消失了，别慌——这时候需要把整个自定义HTML块的内容再检查一遍，确保没有语法错误。一个更稳当的法子：干脆不用按钮块，直接插入一个“自定义HTML”块，然后把上面那整段 <div> 代码原样贴进去。这样WordPress就不会再乱动属性了。缺点就是没法用可视化样式面板调颜色圆角啥的，但为了可访问性，这点牺牲值了。
另一个路子
要是觉得每次手动改HTML太麻烦，还有两条路可以走。第一条：在主题的 functions.php 里挂个钩子，给按钮块输出时强行加上 aria-labelledby 选项。不过这需要写PHP代码，对不碰代码的萌新来说有点门槛，而且主题一更新可能就没了。第二条：找找有没有现成的WordPress插件能直接给区块增加ARIA属性面板。目前搜了一圈确实没找到专门干这事儿的，但可以曲线救国——用“可访问性增强”类插件，比如 Accessibility Enabler 或者 WP Accessibility，它们通常提供全局设置，但很难精细到让每个按钮单独绑定不同标题。所以最接地气的方案还是上面那个“自定义HTML块”大法，一劳永逸，只要把代码保存成代码片段，下次复制粘贴就行。
通用场景下的另一种写法（不依赖WordPress）：
在一个新闻列表里，每篇文章都有标题和“读更多”，可以这样写：
<article>
<h2 id="post1-title">2024年龙年吉祥物丑哭了</h2>
<p>……一段介绍……</p>
<a href="/post1" id="post1-link" aria-labelledby="post1-link post1-title">读更多</a>
</article>
<article>
<h2 id="post2-title">西方龙居然有三对翅膀？</h2>
<p>……</p>
<a href="/post2" id="post2-link" aria-labelledby="post2-link post2-title">读更多</a>
</article>读屏软件会分别念出“读更多 2024年龙年吉祥物丑哭了”和“读更多 西方龙居然有三对翅膀？”，完美区分每一个链接。这里要注意每个ID都必须独一无二，同一个页面里不能出现两个 post1-title。另外 aria-labelledby 的值里写链接自己的ID不是强制要求，但为了保留链接原本的短文本（比如“读更多”），建议写进去；如果不写，只写标题ID，读屏就只念标题，丢失了“读更多”这个动作提示。
啥时候换别的招
aria-labelledby 虽然好用，但有个前提：想要念出来的那段文字必须已经实实在在地显示在页面上了。如果页面上没有现成的文字，比如想额外加一段读屏专用的话，就得用 aria-label。举个例子：一个只有图标的分享按钮，没有任何文本，可以写 <button aria-label="分享到微博">👍</button>。但 aria-label 有个坑——它对部分语言的翻译不友好，而且如果按钮里已经有可见文字，aria-label 会覆盖它，导致视觉文字被忽略。所以经验之谈：优先用 aria-labelledby 引用页面上已有的可见文本；实在没有可见文本再用 aria-label。另外别两个属性一起扔上去，浏览器会优先用 aria-labelledby，aria-label 就歇菜了，容易把人绕晕。
最后丢个表格对比一下几种让读屏喊话的方式：
| 方式 | 念出的内容 | 适用场景 |
|---|---|---|
| 链接内文字 | 标签里的文字 | 文字本身已够详细 |
| aria-label | 属性值里的文字 | 无可见文字时 |
| aria-labelledby | 多个ID对应元素的文字串 | 可见文字分散在不同位置 |
整个流程走下来，会发现就改几行代码的事，却能让用读屏软件的朋友不再对着满屏“读更多”一脸懵逼。下次写链接的时候，记得问问自己：这链接单独拎出来，不看上下文，能知道是干啥的吗？不能的话，aria-labelledby 就是那颗解药。