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

5

这是一个我时不时会考虑的小问题。大约一两年来,我一直在思考如何最好地使用HTML5元素。

我看到最频繁的技术是 - 使用类和ARIA角色的元素,例如header、footer、section、aside等。对于较旧的浏览器,使用html5shiv.js。

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

另一种方法与渐进增强更相符,并且不依赖于在旧浏览器中启用JS才能使布局正常工作。我曾与Josh Clark [Global Moxie] 简要讨论过这个问题。他们在People Magazine的m.版本中使用了这种方法。http://www.people.com/people/mobile/home/ 他们使用HTML5元素来帮助概述文档的语义,使用classess的divs进行样式设置。没有任何样式依赖于HTML5元素,如header、footer、aside、section。

我的问题之一是,如果已经在div上设置了ARIA角色,将HTML5元素层叠在我的div/spans周围是否有益于给文档标记提供更好的概述?除了“语义化”之外,这有什么好处吗?

如果在用于样式的div周围添加HTML5元素,将ARIA角色从div移动到HTML5元素是否有益?我假设是有益的,但很乐意听取有关此技术的更多反馈。

1个回答

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/

话虽如此,HTML5的新语义元素确实占据了许多<div>的领地。但所有相关的文档都反其道而行之。HTML5分块元素仅用于对页面进行分块。确实,你可以在<导航>部分应用样式,但鼓励使用<div>来代替。请参考http://html5doctor.com/avoiding-common-html5-mistakes/。 - InanisAtheos

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接