无需登录 数据私有 本地保存

ARIA 属性快捷生成器 - 角色与属性搭配建议

11
0
0
0

ARIA 属性快捷生成器

选择 ARIA 角色，自动推荐配套属性，一键生成无障碍 HTML 代码

场景模板 · 快速加载

👈 从左侧选择一个 ARIA 角色，或点击上方场景模板开始

角色描述 -
HTML 标签
元素 ID（可选）
ARIA 属性配置 0

请先选择角色以加载推荐属性

生成的 HTML 代码
<!-- 请选择角色和属性 -->
常见问题 & 知识点

ARIA（Accessible Rich Internet Applications）是一组由 W3C 制定的规范，用于增强网页的无障碍访问能力。当原生 HTML 语义不足以描述复杂的交互组件（如标签页、下拉菜单、模态对话框等）时，ARIA 通过 role、aria-* 属性向辅助技术（如屏幕阅读器）传达元素的角色、状态和属性。但请记住第一规则：优先使用原生 HTML 语义元素，仅在必要时使用 ARIA。

aria-label 直接提供一个字符串作为元素的标签；aria-labelledby 则通过引用页面中其他元素的 ID 来提供标签（可以是多个 ID，空格分隔）。优先使用 aria-labelledby，因为它是可见的、可翻译的，且被多个辅助技术更好地支持。当页面上没有可见标签可引用时，再使用 aria-label。
注意：两者不应同时使用，如果同时存在，aria-labelledby 优先级更高。

aria-hidden="true" 会从无障碍树中完全移除该元素及其子元素，屏幕阅读器将忽略它们。适用于：纯装饰性图标、重复隐藏的文本、折叠状态下不可见的面板内容、模态对话框外的背景遮罩内容。
警告：不要对可聚焦元素（如按钮、链接、输入框）使用 aria-hidden="true"，否则会导致键盘焦点进入"不可见"的元素，造成困惑。也不要用它来隐藏敏感信息，因为它只对辅助技术隐藏，视觉上仍可见（除非配合 CSS display:none 等）。

aria-live 用于标识动态更新区域，让屏幕阅读器自动播报变化：
off（默认）：不自动播报更新。
polite：等当前播报结束后再播报更新，适合非紧急通知（如搜索结果计数）。
assertive：立即中断当前播报，适合紧急错误提示或重要状态变化。配合 aria-atomic（是否播报整个区域）和 aria-relevant（关注哪些变化类型）使用效果更佳。

aria-current 用于标识当前活跃项，常见取值：
page：当前页面（用于面包屑导航或分页链接）。
step：多步骤流程中的当前步骤。
location：在流程或层级中的当前位置。
date：日历中的当前日期。
time：时间选择器中的当前时间。
true：通用当前状态。最常用于导航链接标记当前页面。

HTML 语义元素（如 <nav>、<button>、<main>）自带隐式 ARIA 角色，浏览器和辅助技术原生支持。始终优先使用原生 HTML 语义元素——它们更健壮、更易维护、无需额外代码。ARIA 角色应用于：自定义交互组件（如用 <div> 模拟的标签页）、增强现有语义（如给 <ul> 添加 role="listbox"）、修复因 CSS 破坏的语义。遵循第一规则：能用原生 HTML 就不用 ARIA。
🔧 相关工具