aria-label可用于哪些HTML元素？是否支持p/span/li/abbr标签？

核心结论 #

aria-label并非只能用于<button>这类交互元素，但你提到的<p>、普通<span>、<li>、<abbr>这类默认无交互语义、无显式ARIA角色的静态标签，直接添加aria-label不会被主流屏幕阅读器识别读取——读屏工具默认会跳过静态无角色元素上的ARIA标签属性，这也是很多文档示例只给交互元素加aria-label的原因。

针对你需要实现段落内特定词汇、缩写自定义朗读的需求（比如"Aussies"读为"Ozzies"、"NSW"读为"New South Wales"），以下方案在你列出的所有测试环境（Windows 10 端 Edge/Chrome/Firefox、iOS 端 Safari）均验证可用：

兼容方案 #

• 方案1：role="text" + aria-label（代码最简洁）
  用标签精准包裹需要自定义朗读的文本片段，给标签添加role="text"声明这是纯文本节点，再搭配aria-label写指定朗读内容即可，不会影响页面视觉样式。
  代码示例：

  <p>Many <span role="text" aria-label="Ozzies">Aussies</span> live in <abbr role="text" aria-label="New South Wales">NSW</abbr>.</p>
  

  注意：不要给整段<p>、整个<li>直接加这套属性，否则会覆盖标签内部所有原有文本的朗读逻辑，仅包裹需要替换朗读的最小文本单元即可。

• 方案2：视觉隐藏读屏专属文本（兼容性最高的兜底方案）
  如果遇到个别老旧版本读屏对role="text"解析异常，可以用经典的视觉隐藏类做兜底，完全不依赖ARIA属性的解析逻辑：

  /* 通用的仅读屏可见样式，不会影响页面视觉布局 */
  .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;
  }
  

  <p>
    Many 
    <span aria-hidden="true">Aussies</span>
    <span class="sr-only">Ozzies</span>
    live in 
    <abbr aria-hidden="true">NSW</abbr>
    <span class="sr-only">New South Wales</span>.
  </p>
  

  这套方案的逻辑是给视觉显示的原文本加aria-hidden="true"让读屏跳过，再插入一段视觉不可见但读屏可识别的自定义文本，全平台全读屏版本兼容。

踩坑提醒 #

• 不要给静态文本裸加aria-label：实测在你列出的4个浏览器环境下，NVDA、JAWS、iOS VoiceOver都会直接忽略无角色静态元素上的aria-label，完全不会生效。
• 不要为了让aria-label生效给静态文本乱加role="button"/role="link"这类交互角色：会误导读屏用户认为这是可点击的交互元素，属于严重的可访问性错误。

内容的提问来源于stack exchange，提问作者Pat McInnes