检查所有自定义控件是否具有适当的 role 以及用于赋予其属性和状态的所有必需 ARIA 属性。例如，自定义复选框需要 role="checkbox" 和 aria-checked="true|false" 才能正确传达其状态。
了解如何使用 ARIA 和 HTML，以了解何时最好为自定义控件提供缺少的语义。
如何测试
如需检查所有自定义交互式控件是否具有适当的 ARIA 角色，请使用 Chrome 开发者工具无障碍功能窗格或屏幕阅读器测试页面。
JAWS 和 NVDA 是 Windows 上两款较为流行的屏幕阅读器。VoiceOver 是 macOS 内置的屏幕阅读器。
借助 CSS，您可以为 <div> 和 <button> 元素设置样式，以传达相同的视觉功能，但使用屏幕阅读器时，体验会截然不同。<div> 只是一个通用分组元素，因此屏幕阅读器只会读出 <div> 的文本内容。将 <button> 宣布为“按钮”，这是一个更强大的信号，向用户表明他们可以与之互动。
另请参阅语义和屏幕阅读器。
解决方法
解决此问题的最佳方法是完全避免使用自定义交互式控件。例如，将用作按钮的 <div> 替换为实际的 <button>。
<button>Learn more</button>
如果您必须使用 <div>，请添加 role="button" 和 aria-pressed="false"。
<div role="button" aria-pressed="false">Learn more</div>
现在，屏幕阅读器会读出 <div> 的角色和互动状态。
重要性
如果您之前从未使用过辅助技术，可能不知道您的内容对辅助技术用户的表现如何。理想情况下，您可以与经常使用辅助技术的用户交谈，并就您的网站或 Web 应用的表现分享反馈。
如需了解辅助技术用户如何体验您的内容，另一种方法是使用辅助技术进行测试。使用屏幕阅读器有助于您更清楚地了解内容的标签方式，以及导航是否存在任何障碍。
资源
您可以查看自定义控件具有 ARIA 角色审核的源代码