何时使用ARIA角色属性

Question

我正在尝试使我的网站符合WCAG。用于role="radio"属性的自定义单选按钮是否将样式为div的原生HTML控件覆盖？

Answer 1

这取决于哪个元素将获得键盘焦点。如果焦点集中在本机元素（<input type="radio">）上，那么屏幕阅读器将正确地宣布它，您就很好。如果涉及到您的自定义元素，那么您将需要一个ARIA角色（role="radiogroup"也需要一个容器角色）。

请注意，如果焦点集中在本机收音机上，请确保自定义元素在屏幕阅读器中处于隐藏状态（aria-hidden="true"）。能够将屏幕阅读器的焦点放在两个收音机上会令人困惑。