何时使用 ARIA 角色属性
When to use ARIA role attribute
我正在尝试使我的网站符合 WCAG。使用样式化 div 覆盖本机 HTML 控件的自定义单选按钮是否是 role="radio" 属性的正确用例？
这取决于哪个元素将获得键盘焦点。如果焦点转到本机元素 (<input type="radio">)，则屏幕 reader 会正确地宣布它，你很好。如果它转到您的自定义元素，那么您需要一个 ARIA 角色（以及一个容器角色，role="radiogroup"）。
请注意，如果焦点转到本机收音机，请确保您的自定义元素从屏幕 reader 中隐藏 (aria-hidden="true")。能够将屏幕 reader 聚焦在两个收音机上会让人感到困惑。
我正在尝试使我的网站符合 WCAG。使用样式化 div 覆盖本机 HTML 控件的自定义单选按钮是否是 role="radio" 属性的正确用例？
这取决于哪个元素将获得键盘焦点。如果焦点转到本机元素 (<input type="radio">)，则屏幕 reader 会正确地宣布它，你很好。如果它转到您的自定义元素，那么您需要一个 ARIA 角色（以及一个容器角色，role="radiogroup"）。
请注意，如果焦点转到本机收音机，请确保您的自定义元素从屏幕 reader 中隐藏 (aria-hidden="true")。能够将屏幕 reader 聚焦在两个收音机上会让人感到困惑。