向辅助技术标识特殊超链接（download、mailto等）的最佳实践

确实有成熟的最佳实践，用来区分普通页面跳转链接和带特殊行为（download、mailto、target="_blank"、ping等）的链接，帮助屏幕阅读器用户准确预判链接操作的结果。

核心问题回应 #

你提到的默认情况下，带download属性的链接会被屏幕阅读器播报为“link”而非“download”，这种情况不可行——用户无法提前知晓点击后是下载文件还是跳转页面，容易造成困惑，必须补充标识说明。

常见特殊链接的标识方法 #

1. 下载链接（带download属性）

有三种主流方案，按需选择：

• 方案一：可见文本直接说明（优先推荐）
  直接在链接文本中加入“下载”字样，兼顾普通用户和辅助技术用户，最直观：

  <a href="myfile.jpg" download="myfile.jpg">
      下载 Some File 
      <span>10Kb / JPG</span>
  </a>
  

• 方案二：仅屏幕阅读器可见的辅助文本（你提供的示例方式）
  这种方式适合不想破坏视觉布局的场景，是行业认可的合规做法，完全合适。只要确保sr-only的CSS正确实现（将元素移出视口但保留可访问性）即可：

  <style>
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border-width: 0;
    }
  </style>
  <a href="myfile.jpg" download="myfile.jpg">
     <span class="sr-only">下载</span> 
     Some File 
     <span>10Kb / JPG</span>
  </a>
  

• 方案三：使用ARIA标签
  通过aria-label直接定义屏幕阅读器播报的内容，注意要包含完整的链接信息：

  <a href="myfile.jpg" download="myfile.jpg" aria-label="下载 Some File，文件大小10Kb，格式JPG">
      Some File 
      <span>10Kb / JPG</span>
  </a>
  

2. 邮件链接（mailto）

同样需要明确标识“发送邮件”的行为：

<!-- 可见文本说明 -->
<a href="mailto:support@example.com">发送邮件至 support@example.com</a>

<!-- 或sr-only辅助 -->
<a href="mailto:support@example.com">
  <span class="sr-only">发送邮件至</span>
  support@example.com
</a>

3. 新窗口打开的链接（target="_blank"）

必须告知用户链接会在新窗口打开，避免用户迷失：

<!-- 图标+sr-only文本 -->
<a href="external-page.html" target="_blank">
  查看外部页面
  <span class="sr-only">（在新窗口打开）</span>
  <span>↗</span>
</a>

<!-- 或aria-label补充 -->
<a href="external-page.html" target="_blank" aria-label="查看外部页面，在新窗口打开">
  查看外部页面
</a>

4. ping属性链接

这类链接通常用于统计点击，无页面跳转，需要明确告知用户点击后不会导航：

<a href="/track-click" ping="/track-click" aria-label="点击统计，不会跳转页面">
  点击统计
</a>

总结 #

• 优先选择可见文本直接说明的方式，覆盖所有用户群体；
• 视觉布局受限的情况下，sr-only辅助文本或ARIA属性都是可靠的替代方案；
• 所有特殊行为的链接都必须明确标识，确保屏幕阅读器用户能准确预判操作结果。

内容的提问来源于stack exchange，提问作者Robin Schambach