HTML的a标签aria-current属性怎么在面包屑导航中标记当前页面位置-html教程-PHP中文网

aria-current="page"是标记面包屑当前页的唯一合规方式，必须直接加在当前页对应的标签上，值只能为"page"，不可用class="active"或aria-current="true"替代，否则屏幕阅读器无法识别当前位置。

html的a标签aria-current属性怎么在面包屑导航中标记当前页面位置

aria-current="page" 是面包屑里标记当前页的唯一标准方式

直接给当前页面对应的 <a></a> 标签加上 aria-current="page"，屏幕阅读器就能准确识别“这是当前位置”，视觉上也方便 CSS 做样式区分。别用 aria-current="true" 或 aria-current="location" —— 只有 "page" 是语义正确的取值。

为什么不能只靠 class 或 CSS 伪类来标记当前项

仅靠 class="active" 或 :last-child 无法被辅助技术感知，对视障用户等于没标。而 aria-current="page" 是 WAI-ARIA 规范明确定义的语义属性，主流读屏软件（NVDA、VoiceOver、JAWS）都会播报“当前页面”或类似提示。

必须加在 <a></a> 上（不是 <span></span> 或 <li>），因为它是可聚焦的导航元素
当前页链接仍需保留 href 属性（哪怕指向自身），否则会破坏键盘导航流和 SEO
不要同时加 aria-disabled="true" 或移除 href —— 这会让链接不可聚焦，反而降低可访问性

实际 HTML 结构怎么写才合规

面包屑应为语义化的列表，当前页用带 aria-current 的链接，而非禁用状态：

<nav aria-label="面包屑导航"><ol>
<li><a href="/home">首页</a></li>
    <li><a href="/products">商品列表</a></li>
    <li><a href="/products/123" aria-current="page">无线耳机</a></li>
  </ol></nav>

注意：aria-current="page" 不影响链接行为，点击仍会刷新或跳转 —— 这是故意的。如果真不想让用户再点当前页，应该用 <span></span> 替代 <a></a>，但此时必须补上 aria-current="page" 和 role="link"，且确保它可聚焦（tabindex="0"）。

Html To Pdf

使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。

下载

容易被忽略的 CSS 和 JS 配合点

仅加 ARIA 属性不会自动变灰或加粗，得靠 CSS 主动响应：

a[aria-current="page"] {
  font-weight: bold;
  pointer-events: none; /* 视觉上禁用点击反馈 */
  color: #333;
}

但要注意：JS 里如果监听了 click 事件并阻止默认行为，会导致键盘用户按回车无法触发（因为 pointer-events: none 不影响键盘操作）。更稳妥的做法是保留链接行为，或用 JS 检查 event.target.matches('a[aria-current="page"]') 来跳过处理。

另外，服务端渲染时要确保 aria-current 准确对应当前 URL；前端路由（如 React Router）需在组件挂载或路由变更后，动态更新对应 <a></a> 的属性 —— 别漏掉 SSR 和 CSR 场景的一致性。