使用 HTML5 元素/ARIA 角色的首选技术

Question

所以这是我不时思考的一个小问题。大约一两年来，我一直对使用 HTML5 元素的最佳方式感到好奇。

我看到的最常见的技术 - 使用页眉、页脚、部分等元素，除了类和 ARIA 角色。对旧版浏览器使用 html5shiv.js。

这更符合优雅降级而不是渐进增强。如果 JS 在较旧的移动/桌面浏览器中未启用/根本不可用，我们将失去对仅使用 HTML5 元素构建的布局进行样式设置的能力。

我看到的另一种方法更符合渐进增强，并且不依赖于在旧浏览器中启用 JS 以使布局正常工作。我已经与 Josh Clark[Global Moxie] 简要讨论过这个问题。他们在 m 中使用了这种方法。人物杂志版。 http://www.people.com/people/mobile/home/ 他们使用 HTML5 元素来帮助勾勒出文档的语义和带有样式的类的 div。没有样式依赖于 HTML5 元素，如页眉、页脚、旁边、部分。

我的一个问题是，如果已经在 div 上设置了 ARIA 角色，那么在我的 div/spans 周围分层 HTML5 元素是否有益于为文档标记提供更好的轮廓？除了“语义化”，这还有什么好处？

如果在用于样式的 div 周围添加 HTML5 元素，将 ARIA 角色从 div 移动到 HTML5 元素是否有益？我假设它会，但希望获得有关此技术的更多反馈。

Answer 1

HTML5 规范极大地改进了大纲算法的自动化，因此浏览器和屏幕阅读器肯定会因您包含 html5 标记和 ARIA 角色而受益。

Mozilla 就该主题制作了一篇很棒的文档，该文档解决了将 html5 元素合并到 html4 文档中的问题。这应该是一个很好的例子，说明您可以将一些 div 换成更多语义元素。在这里找到：https://developer.mozilla.org/en-US/docs/HTML/Sections_and_Outlines_of_an_HTML5_document

话虽如此，HTML5 的新语义元素确实占据了 div 的大部分领域，但是当没有其他符合您目的的语义上合适的元素时，仍应使用 div。 html5 Doctor 也大大扩展了这一点。在这里找到：http://html5doctor.com/you-can-still-use-div/