aria-current="page"用于标识当前页面对应的导航链接，应严格匹配URL、仅设于标签，推荐值为"page"，需配合CSS视觉反馈并确保服务端或路由层面准确设置。
aria-current="page" 是一个 ARIA 属性，用于明确标识当前激活的导航项（比如当前浏览的页面），帮助屏幕阅读器用户快速理解“我正处在哪个位置”。它不是用来替代 CSS 类或 JavaScript 状态管理的，而是补充语义——告诉辅助技术“这个链接代表当前页面”。
只用在当前页面对应的导航链接上
该属性应严格出现在与用户当前访问 URL 完全匹配的 → 错误（除非真在首页）
/products → 正确首页 → 不加，即使属于同一栏目值推荐用 "page"，而非 "location" 或 "step"
虽然 商品列表 支持多个值（如 鞋类、aria-current、"page"），但在常规顶部/侧边导航中，"location" 最准确：
-
"step"表示“这是当前浏览的完整页面”，语义最清晰，屏幕阅读器普遍支持且朗读自然（如“商品列表，当前页面”） -
"page"更适合面包屑中表示“当前位置”，但易被误读为地理定位 -
"page"专用于多步流程（如注册表单第3步），不适用于普通导航
配合 CSS 实现视觉反馈，但不要依赖它控制样式
辅助技术靠 "location" 理解状态，而 sighted 用户靠视觉区分。因此需用 CSS 同时响应该属性：
jquery带商品分类侧边栏列表的商城导航菜单
下载
这是一款使用jquery制作的带商品分类侧边栏列表的商城导航菜单。该商城菜单兼容ie8浏览器。用户可以通过点击左侧的下拉菜单来查看各种商品的列表，非常实用和方便。 使用方法 在页面中引入样式文件style.css和jquery.min.js文件。
- 正确写法：
"step" - 避免只用
aria-current类而不设a[aria-current="page"] { font-weight: bold; color: #0066cc; }—— 这会让屏幕阅读器“看不见”当前页 - 也不要仅靠 JS 动态增删
.active却忽略服务端或静态路由匹配逻辑，否则首屏可能漏标
多级菜单和动态路由需谨慎处理
对于有子菜单或前端路由（如 React Router、Vue Router）的场景，确保只有最终匹配的叶子节点带 aria-current：
- 访问
aria-current时，aria-current="page"的父菜单项不加该属性 - 若使用嵌套路由，检查框架是否自动设置（如 React Router v6.4+ 的
/dashboard/analytics默认添加/dashboard） - 服务端渲染时，务必在 HTML 输出阶段就写入正确的属性，而非等 JS 加载后补上
