html - 使用 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/