0

我的任务是浏览一个站点并使其完全符合 ADA 标准。我目前遇到的问题是如何解决重复 ID 的问题。

在这里阅读：https ://dequeuniversity.com/rules/axe/2.2/duplicate-id?application=lighthouse

它指出重复 ID 是 ADA 的一个问题。

此站点上存在重复 ID 的原因是因为它有两个主要导航。一种用于台式机，一种用于移动设备。在某个视口，移动菜单会从 display: none 切换其 CSS 样式；显示：块；桌面菜单反之亦然。

我在这里读到：https ://www.html5accessibility.com/tests/hidden2013.html

那个显示：无；是一种支持向屏幕阅读器隐藏内容的方式。所以我想知道的是，重复 ID 的问题是否不是问题，并且由于移动和桌面菜单永远不会同时显示，这不是问题。

这些 ID 也没有连接到表单、表格标题单元格等的标签。所以这不是需要担心的问题吗？或者这是否仍然不符合 ADA，如果是，我可以采取什么步骤使其符合 ADA 而不将桌面和移动菜单合并为一个或同时为它们提供唯一 ID？

4

1 回答 1

1

您是正确的，使用display:none将隐藏所有用户的内容，这实际上将消除重复 ID 的问题。

但是，您仍应小心行事，因为这是一种可能存在陷阱的次优做法。

一方面，具有重复的 ID 不是有效的 HTML。HTML5 规范明确指出：

“该值在元素的主子树中的所有 ID 中必须是唯一的” https://www.w3.org/TR/2011/WD-html5-20110525/elements.html#the-id-attribute

此外，任何以 ID 为目标元素的脚本（当前或未来）都可能会因重复 ID 而窒息，并可能产生不可预测的结果。

于 2019-01-28T21:09:57.157 回答