在div中嵌套语义html标记会影响辅助技术的使用吗？
如果语义标记嵌套在用作容器的div中以创建网页布局，辅助技术能否正常工作？
我以前使用网格或flexbox创建布局，首先使用div容器创建布局，然后将内容放入其中，但我想知道这种工作方式是否会影响辅助技术的正常流程。
回答 2
Stack Overflow用户
发布于 2022-06-26 08:00:29
许多语义元素(如footer、header等)与div的CSS没有太大的不同。因此，您当然可以直接自定义它们，而无需包装它们。
我猜(主要是基于我阅读过的A11Y指南& 斧头输出)，嵌套并不重要。也就是说，footer和包装在div中的footer大多是等价的。
当然，这取决于上下文，有些元素(例如table、ul)只能有某些类型的子元素。在这些上下文中嵌套可能导致无效(而不是11y友好的)标记。
在野外，我主要看到人们认为保持“顶级”标记(header、nav、menu、main、section、article、footer)是“干净的”(我认为，部分原因是因为它很容易实现)&因为通常不会有太多的CSS附加在这些标记上，因为在情人级别上“在那里”之后，标记就会变得不那么结构化了。然而，所有这一切似乎都是优先考虑的问题。
Stack Overflow用户
发布于 2022-06-26 12:19:15
也许值得检查一下文档对象模型(DOM)是如何创建的，以便理解：
标记化:浏览器将字符串转换为不同的标记--如W3C HTML5标准所指定的，例如，"
<html>“、”<body>“、尖括号中的其他字符串。每个标记都有一个特殊的含义和它自己的一套规则。
在这里，值得注意的是“每个标记都有一个特殊的含义和它自己的一套规则”。现在让我们检查一下来自<div>的HTML5标准规则
div元素完全没有特殊的意义。
div元素不是语义元素，在这一点上，它不同于语义元素。
如果您希望对div元素进行样式化，那么对于构造对象模型来说，这可能也不是一个成功的技巧。样式的任务是向用户呈现内容。在构建CSS对象模型(CSSOM)时，样式被规则紧密绑定到HTML (令牌)。这使我们回到HTML元素(令牌)的语义。
因此，您的问题与理解标记(HTML元素)的语义有关。我冒昧地建议，可访问的富Internet应用程序(WAI-ARIA)标准主要是为了向非语义HTML元素，包括HTML <div>添加语义。
摘要:使用语义HTML元素可以更容易地理解内容的结构，包括残疾用户。
https://stackoverflow.com/questions/72759540
复制相似问题
腾讯云开发者
