01. aria-current 的概念与作用
01.1 什么是 aria-current
aria-current 是一个全局属性，用于标识“当前项”在同一语义集合中的状态，帮助辅助技术用户快速定位当前位置。它的取值可以是 page、step、location、date、time、布尔值 true（等同于 aria-current="true"）等，具体取值含义依场景而定。在正确的上下文中使用，可以显著提升无障碍体验。
当一个集合中的某个元素被标记为 aria-current 时，屏幕阅读器会发出相应的提示，如“当前页面”或“当前步骤”，从而帮助用户理解导航结构的当前状态。关键点在于仅在有意义的项目上设定该属性，避免在不相关的元素上滥用。
01.2 aria-current 在无障碍体验中的作用
在无障碍设计中，aria-current 提升了上下文感知能力，使得使用键盘导航的用户能够快速判断自己在一组项中的位置。例如，在导航菜单、分页、步骤条等地方应用 aria-current，可以减少认知负担。
与此同时，aria-current 也是一种信息传达的辅助性标记，与其它无障碍属性（如 aria-label、aria-labelledby、aria-selected）配合时，能够呈现更清晰的状态。这不仅有助于可访问性，也有利于实现一致的用户体验。下面给出一个简单实例，展示当前导航项的实现方式。
<nav aria-label="主导航"><ul><li><a href="/home" aria-current="page">首页</a></li><li><a href="/products">产品</a></li><li><a href="/contact">联系</a></li></ul>
</nav>02. aria-current 的取值及语义
02.1 常用取值及含义
在实际场景中，最常用的取值有 aria-current="page"、aria-current="step"、以及aria-current="location"、aria-current="date"、aria-current="time"。page 通常用于导航中的当前页面；step 适用于多步骤流程中的当前步骤；location、date、time 则用于表示地理位置、日期或时间等场景的当前项。
需要注意的是，仅在一个集合中指定一个当前项，以避免混淆。若一个集合中的多项都设为 aria-current，屏幕阅读器和辅助设备的行为可能变得不可预测。正确的使用应与页面结构和语义标签相匹配。
02.2 其他取值及边界
除了上述常用取值，aria-current 还支持全局布尔值 true，表示“当前项”的状态，等价于某些场景下的隐式标记。在可访问性设计中，明确指定取值总比使用布尔值更具可解释性，因为它提供了更具体的含义。
在实现时，避免在无关的列表或控件上使用 aria-current，并确保与其对应的标签与控件的角色一致。例如，导航中的当前项通常是一个链接，面包屑的最后一项通常是文本节点而非可点击元素，二者对 aria-current 的使用有所不同。
03. 在具体组件中的正确应用
03.1 导航菜单中的应用
在站点的主导航中，当前页面的链接应设置 aria-current="page"，以便屏幕阅读器和辅助技术告知用户所在位置。结合语义化的导航标签 <nav>，能提供稳定的结构信息并提升可访问性。
此外，保持导航的可聚焦性和键盘可操作性同样重要。不要仅依赖 aria-current 进行状态指示，还应结合清晰的视觉高亮和焦点样式，以帮助所有用户快速识别当前项。
<nav aria-label="主导航"><ul><li><a href="/home" aria-current="page">首页</a></li><li><a href="/products">产品</a></li><li><a href="/contact">联系</a></li></ul>
</nav>03.2 面包屑导航中的应用
在面包屑中，最后一个项目通常表示“当前位置”，可通过 aria-current="page" 或者直接把最后一个节点设为文本并标记 aria-current="page" 来提示当前项。这样，屏幕阅读器在遍历面包屑时会清晰地告知用户当前所处的位置层级。
请确保前面的面包屑项仍然是链接，最后一项可以是文本，并且以合适的语义结构呈现，以避免混淆。一致的结构有助于可访问性的一致性。下面给出一个面包屑示例。
<nav aria-label="面包屑"><ol><li><a href="/home">首页</a></li><li><a href="/products">产品</a></li><li aria-current="page">当前产品</li></ol>
</nav>03.3 多步流程中的应用
对于多步骤的表单或向导，可以将步骤列表设为有序，例如使用 aria-current="step" 来标识当前步骤。这样，用户可以清晰地看到自己在整个流程中的位置。
实现时，尽量让步骤本身具有语义性，如使用有序列表、清晰的文本描述，并在当前步骤添加 aria-current。这能提升无障碍访问的可理解性。以下是一个简单的步骤条实现：
<ol role="list" aria-label="购买流程"><li>1. 选择商品</li><li aria-current="step">2. 填写信息</li><li>3. 确认订单</li>
</ol>04. 兼容性、无障碍考虑与常见误用
04.1 与其他无障碍属性的协同
在实现 aria-current 时，应与 aria-label、aria-labelledby、aria-selected 等属性，以及角色（如 role="navigation"、role="tab"、role="listitem"）协同工作。不要把 aria-current 替代了语义标签，而是作为增强状态的补充信息。
此外，结合可视样式，确保高对比度的视觉提示与焦点指示一致。例如，当前项的文本颜色、下划线或边框等应在键盘聚焦时同样易于识别。无障碍不仅是屏幕阅读器体验，也包含视觉与交互的一致性。
04.2 常见误用及纠正
常见误用包括在所有列表项上统一设置 aria-current、在非当前项上设置不明确的值、以及在不具备语义意义的控件上滥用 aria-current。正确做法是只在明确“当前项”的场景使用，并确保该状态与布局、文本和控件的行为一致。
另一个误区是把 aria-current 当作可替代的可点击状态指示。aria-current 仅传达状态信息，不应替代 aria-selected、标签页的选择行为或按钮的可操作性。在实现时，应结合实际控件角色和键盘交互来设计。
04.3 与搜索引擎的关系
关于 SEO，aria-current 的影响不是直接的排名因素，搜索引擎通常不会将 aria-current 作为排序信号。它更多是面向无障碍访问的辅助信息，帮助屏幕阅读器用户理解结构。
尽管如此，良好的语义结构、明确的导航和面包屑等对搜索引擎理解站点结构有间接益处，因此在提高可访问性时，也有助于整体的用户体验与站点可发现性。确保使用标准的标签与属性，避免为了 SEO 强行添加无语义的布尔属性。
