HTML怎么标注当前幻灯片_HTML aria-current用于slide【教程】-html教程-PHP中文网

必须用 aria-current="step"，因为WAI-ARIA规范中仅"step"语义匹配轮播当前项，屏幕阅读器据此播报“第x项，当前”，而"page"被误作导航、"true"被忽略，且主流轮播库仅识别"step"。

html怎么标注当前幻灯片_html aria-current用于slide【教程】

用 aria-current="step" 标注当前幻灯片，不是 "page" 或 "location" —— 这是唯一被主流轮播库和屏幕阅读器一致识别的取值。

为什么必须用 `aria-current="step"` 而不是其他值

很多开发者随手写 aria-current="true" 或 "page"，但 WAI-ARIA 规范里只有 "step" 明确对应“线性流程中的当前项”，比如轮播、向导、分步表单。屏幕阅读器（如 NVDA、VoiceOver）对 "step" 有专用播报逻辑，会读作“第3项，当前”；而 "page" 会被当作导航链接处理，"true" 则直接被忽略。

aria-current 是枚举属性，只接受预定义值："page"、"step"、"location"、"date"、"time"、"false"
轮播不是“页面”也不是“地理位置”，"step" 是语义唯一匹配项
React/Vue 组件库（如 Swiper、Flickity）内部也只检查 "step" 来触发高亮或焦点管理

怎么给当前幻灯片加 `aria-current`（HTML + JS 场景）

静态 HTML 可以手写，但真实项目中基本靠 JS 动态更新。关键点是：只在当前激活的

或

 上设置，且每次切换后立刻同步。不要写在容器上（如轮播外层 ），必须落在具体幻灯片节点
切换时先清除所有 aria-current，再给目标节点设 aria-current="step"

示例片段：<ol class="carousel-indicators">
<li aria-current="step">1</li>
  <li>2</li>
  <li>3</li>
</ol>

容易被忽略的兼容性细节
光加属性还不够。如果幻灯片本身不可聚焦，键盘用户仍无法感知“当前”状态。

											
												
												
													Wechat Article Html
													将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
												
												下载
												
											
										

确保当前幻灯片节点有 tabindex="0"（或本身就是可聚焦元素，如带 href 的 ）
配合 CSS 使用 [aria-current="step"] 选择器做视觉反馈，别只依赖 JS 类名（比如不写 .slide--active，直接写 [aria-current="step"]）
旧版 Safari（iOS 12–14）对 aria-current 支持不稳定，需搭配 role="group" 和 aria-label 补充上下文

真正难的不是加这行属性，而是确保它和焦点、键盘流、视觉状态三者始终同步——漏掉任意一环，残障用户就卡在“看不见的当前页”里。