html - 在一个文档中同时使用 WAI-ARIA 属性和 HTML5 语义标签

Question

我正在为我们的小公司设计一个网站，我想制作 使用语义标签( <article> 、 <section> 等)和 JSON-LD 结构化数据片段。

除了语义标签和 JSON-LD，我们还想让残障人士更容易访问网站，我一直在学习 WAI-ARIA 属性。

WAI-ARIA 属性能否与语义标签和结构化数据同时使用？ 或者，是否存在会影响其功能的冲突风险？

Answer 1

WAI-ARIA 支持在浏览器和屏幕阅读器技术之间存在不确定性。

我建议仅在您无法在 native HTML 中获得相同结果的情况下使用 ARIA 属性，因为 HTML5 已经大大改进了语义。不必要地添加 ARIA 属性不会提高您网站的可访问性，只会增加您的工作量。仅在需要时使用它。

first rule of ARIA状态:

If you can use a native HTML element [HTML51] or attribute with the semantics and behaviour you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.

例如，当您可以只使用 alt 时，您不想将 aria-label 添加到图像。当许多角色已经通过其等效的 HTML 元素(例如:按钮、导航、文章)隐含时，也无需使用 aria-role 显式分配角色。它也更喜欢使用 HTML 状态，例如 required 和 disabled 而不是 ARIA 等价物:aria-disabled 和 aria-required。

WAI-ARIA 资源
PowerMapper WAI-ARIA Screen Reader Compatibility - 这是一个非常好的 ARIA 属性与屏幕阅读器和浏览器兼容的映射。

What is WAI-ARIA, what does it do for me, and what not? - 我推荐阅读的关键部分是“我什么时候不应该使用它？”和“我应该什么时候使用它？”。