如何实现适配屏幕阅读器的PDF下载无障碍按钮？

仅使用<a href='path-to-pdf'>...</a>的方案不足以满足无障碍要求，确实会对残障用户造成认知混淆：屏幕阅读器默认会将其识别为普通链接，用户会默认预期点击后跳转到新页面，而非触发本地下载操作，容易产生预期不符的困扰。

以下是两种符合WCAG标准的实现方案：

方案1：优化锚点标签语义（推荐，兼容性最好） #

基于原生锚点标签补充无障碍属性，兼顾键盘操作、语义识别和无JS场景的可用性：

• 按钮文本必须明确说明操作类型和文件格式，不要仅使用「点击下载」「查看文档」这类模糊描述，示例：下载2024年度财报PDF文件
• 保留href和download属性：href保证锚点可被键盘聚焦，符合键盘操作逻辑；download属性会被大部分主流屏幕阅读器识别，额外播报「下载」相关提示，降低认知成本
• 可额外补充aria-label补充操作说明，适合按钮文本较短的场景，示例：

  <a href="/xxx.pdf" download aria-label="下载2024年度财报PDF，将保存到你的本地设备">
    下载财报（PDF）
  </a>
  

• 若需要补充更复杂的提示（比如文件体积、打开要求），可以用aria-describedby关联隐藏的说明文本，示例：

  <a href="/xxx.pdf" download aria-describedby="pdf-desc">下载财报（PDF）</a>
  <p id="pdf-desc" class="visually-hidden">文件大小2.4MB，下载后将保存到本地设备</p>
  

  其中visually-hidden是通用的视觉隐藏类，仅对屏幕阅读器可见。

方案2：使用语义化button标签实现 #

如果希望屏幕阅读器完全将其识别为「操作按钮」而非链接，可使用原生button标签配合JS实现：

• 直接使用<button>标签，屏幕阅读器会默认播报为按钮，符合用户对「点击触发操作」的预期
• 点击事件中通过JS触发下载，同时建议保留无JS场景的降级方案，示例：

  <button id="pdf-download">下载财报（PDF，2.4MB）</button>
  <noscript>
    <a href="/xxx.pdf" download>无JS环境下点击下载财报PDF</a>
  </noscript>
  <script>
    document.getElementById('pdf-download').addEventListener('click', () => {
      const a = document.createElement('a')
      a.href = '/xxx.pdf'
      a.download = '2024年度财报.pdf'
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
    })
  </script>
  

通用注意事项 #

• 禁止使用div、span等非语义化标签自定义下载按钮，这类标签默认无法被键盘聚焦，也没有默认交互语义，即便手动补充role="button"和tabindex属性，也容易遗漏键盘回车、空格触发的事件监听，出错概率远高于原生语义标签
• 所有场景下都要明确告知用户文件格式、可选补充文件体积，方便依赖流量的用户判断是否要执行下载操作

内容的提问来源于stack exchange，提问作者Marcin Mroczko