如何让博客标题链接在屏幕阅读器中显示为纯文本且视觉仍为链接？

核心思路 #

让标题视觉上保持链接样式，但语义上不被识别为链接，同时保留点击和键盘可访问性；「read more」保留正常链接语义。

方案一：非链接元素+JS绑定点击（推荐） #

标题用<h2>等语义化文本标签，添加链接的CSS样式，通过JavaScript绑定跳转事件，避免<a>标签自带的链接语义。

<!-- 标题部分 -->
<h2 class="link-style">我的博客文章标题</h2>

<!-- Read More 部分 -->
<p><a href="/article-detail">read more</a></p>

<!-- CSS 样式 -->
<style>
.link-style {
  color: #0066cc;
  text-decoration: underline;
  cursor: pointer;
}
.link-style:focus {
  outline: 2px solid #0066cc; /* 键盘聚焦样式，保证无障碍 */
}
</style>

<!-- JS 交互 -->
<script>
const titleEl = document.querySelector('.link-style');
titleEl.setAttribute('tabindex', '0'); // 允许键盘聚焦
titleEl.addEventListener('click', () => {
  window.location.href = '/article-detail';
});
titleEl.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' || e.key === ' ') {
    e.preventDefault();
    window.location.href = '/article-detail';
  }
});
</script>

• 优势：语义清晰，屏幕阅读器直接识别为标题文本，无需额外ARIA属性
• 关键：必须处理键盘聚焦和按键事件，确保键盘用户能正常触发跳转

方案二：修改<a>标签语义（兼容已有结构） #

如果必须用<a>标签包裹标题，可通过role="presentation"移除其链接语义，同时保留交互能力：

<h2>
  <a href="/article-detail" role="presentation" tabindex="0" onclick="window.location.href=this.href;">
    我的博客文章标题
  </a>
</h2>
<p><a href="/article-detail">read more</a></p>

• role="presentation"：告诉屏幕阅读器该<a>仅为装饰，不具备链接语义
• tabindex="0"：确保键盘用户可聚焦该元素
• onclick：显式绑定跳转，避免role属性影响默认行为

为什么之前的方法无效？ #

你之前用aria-hidden="true"搭配tabindex="-1"会让屏幕阅读器完全跳过标题，同时键盘无法聚焦，既不符合语义要求，也破坏了无障碍体验；上述方案既保留了视觉样式和交互，又修正了冗余链接播报的问题。

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