如何保留href属性并避免JAWS播报锚点为‘同页链接’

在Chrome浏览器中使用带有href="#dashboard"的<a>标签时，JAWS屏幕阅读器会播报“Dashboard same page link”，但希望在不移除href属性的前提下，让JAWS仅播报“Dashboard link”，请问有哪些可行的解决方法？

示例代码：

<a href="#dashboard" data-modal-content-id="trigger-popup" data-ph-at-id="dashboard" aria-current="false" class="phw-pt-2 phw-g-text-default-dark phw-pb-2 phw-mt-2 phw-pt-xl-1 phw-pb-xl-1 phw-pt-md-2 phw-pb-md-0 phw-mb-md-2 phw-td-none phw-d-flex phw-s-dashboard" data-ps="5e87c0a1-a-1">
  <span class="phw-icon-ctr" data-ps="5e87c0a1-span-9">
    <svg aria-hidden="true" fill="currentcolor" class="phw-i-sz-3" data-ps="5e87c0a1-svg-4">
      <!----><!----><!----><!----><!----><!----><!---->
      <use href="#phw-cns-icon-pentagon" data-ps="5e87c0a1-use-10"></use>
    </svg>
  </span>
  <span class="_tab-text_4vaal_143 phw-ml-1" data-ps="5e87c0a1-span-10">Dashboard</span>
</a>

可行解决方法 #

方法1：使用aria-label覆盖播报文本 #

直接给<a>标签添加aria-label="Dashboard"，JAWS会优先读取这个标签内容，结合链接本身的角色，最终播报“Dashboard link”。

修改后的代码：

<a href="#dashboard" aria-label="Dashboard" data-modal-content-id="trigger-popup" data-ph-at-id="dashboard" aria-current="false" class="phw-pt-2 phw-g-text-default-dark phw-pb-2 phw-mt-2 phw-pt-xl-1 phw-pb-xl-1 phw-pt-md-2 phw-pb-md-0 phw-mb-md-2 phw-td-none phw-d-flex phw-s-dashboard" data-ps="5e87c0a1-a-1">
  <span class="phw-icon-ctr" data-ps="5e87c0a1-span-9">
    <svg aria-hidden="true" fill="currentcolor" class="phw-i-sz-3" data-ps="5e87c0a1-svg-4">
      <!----><!----><!----><!----><!----><!----><!---->
      <use href="#phw-cns-icon-pentagon" data-ps="5e87c0a1-use-10"></use>
    </svg>
  </span>
  <span class="_tab-text_4vaal_143 phw-ml-1" data-ps="5e87c0a1-span-10">Dashboard</span>
</a>

方法2：使用aria-labelledby关联文本元素 #

如果希望保持视觉文本和屏幕阅读器文本一致，可给<a>标签添加aria-labelledby属性，指向显示文本的<span>元素（需给该<span>设置唯一id）。这种方式下，JAWS会忽略锚点的“same page”提示，仅播报关联文本和链接角色。

修改后的代码：

<a href="#dashboard" aria-labelledby="dashboard-text" data-modal-content-id="trigger-popup" data-ph-at-id="dashboard" aria-current="false" class="phw-pt-2 phw-g-text-default-dark phw-pb-2 phw-mt-2 phw-pt-xl-1 phw-pb-xl-1 phw-pt-md-2 phw-pb-md-0 phw-mb-md-2 phw-td-none phw-d-flex phw-s-dashboard" data-ps="5e87c0a1-a-1">
  <span class="phw-icon-ctr" data-ps="5e87c0a1-span-9">
    <svg aria-hidden="true" fill="currentcolor" class="phw-i-sz-3" data-ps="5e87c0a1-svg-4">
      <!----><!----><!----><!----><!----><!----><!---->
      <use href="#phw-cns-icon-pentagon" data-ps="5e87c0a1-use-10"></use>
    </svg>
  </span>
  <span id="dashboard-text" class="_tab-text_4vaal_143 phw-ml-1" data-ps="5e87c0a1-span-10">Dashboard</span>
</a>

方法3：用role="link"结合tabindex（不推荐，仅作补充） #

不建议修改原生<a>的角色，但特殊场景下，可将元素设置为role="link"和tabindex="0"，再用JavaScript处理点击跳转。不过这种方式会丢失原生链接的默认行为，需额外处理键盘导航（如Enter键触发跳转）。

修改后的代码示例：

<div role="link" tabindex="0" onclick="window.location.href='#dashboard'" data-modal-content-id="trigger-popup" data-ph-at-id="dashboard" aria-current="false" class="phw-pt-2 phw-g-text-default-dark phw-pb-2 phw-mt-2 phw-pt-xl-1 phw-pb-xl-1 phw-pt-md-2 phw-pb-md-0 phw-mb-md-2 phw-td-none phw-d-flex phw-s-dashboard" data-ps="5e87c0a1-a-1">
  <span class="phw-icon-ctr" data-ps="5e87c0a1-span-9">
    <svg aria-hidden="true" fill="currentcolor" class="phw-i-sz-3" data-ps="5e87c0a1-svg-4">
      <!----><!----><!----><!----><!----><!----><!---->
      <use href="#phw-cns-icon-pentagon" data-ps="5e87c0a1-use-10"></use>
    </svg>
  </span>
  <span class="_tab-text_4vaal_143 phw-ml-1" data-ps="5e87c0a1-span-10">Dashboard</span>
</div>

注意：方法3需额外添加键盘事件监听，确保用户按Enter或Space键时能触发跳转，否则会影响可访问性。

内容的提问来源于stack exchange，提问作者Faizan Khan