我的任务是检查一个网站并使其完全符合 ADA 标准。我目前遇到的问题是如何解决重复 ID 的问题。
阅读此处:https://dequeuniversity.com/rules/axe/2.2/duplicate-id?application=lighthouse
它指出重复 ID 是 ADA 的一个问题。
此站点上存在重复 ID 的原因是因为它有两个主要导航。一种用于台式机，一种用于移动设备。在某个视口(viewport)，移动菜单会将其 CSS 样式从显示切换为:无；显示: block ；桌面菜单反之亦然。
我在这里阅读:https://www.html5accessibility.com/tests/hidden2013.html
那个显示:无；是支持对屏幕阅读器隐藏内容的一种方式。所以我想知道重复 ID 的问题是否不是问题，并且由于移动和桌面菜单永远不会同时显示，所以这不是问题。
这些 ID 也没有连接到表单标签、表格标题单元格等。所以这不是一个值得担心的问题吗？还是这仍然不符合 ADA 标准？如果是，我可以采取什么步骤使其符合 ADA 标准，而无需将桌面和移动菜单合并为一个或为它们提供唯一的 ID？
最佳答案
您是正确的，使用 display:none 会向所有用户隐藏内容，这实际上会消除重复 ID 的问题。
但是，您仍然应该谨慎行事，因为这是一种具有潜在缺陷的次优做法。
一方面，具有重复的 ID 不是有效的 HTML。 HTML5 规范明确指出:
"The value must be unique amongst all the IDs in the element's home subtree" https://www.w3.org/TR/2011/WD-html5-20110525/elements.html#the-id-attribute
此外，任何按 ID 定位元素的脚本(当前或 future )都可能会因重复的 ID 而窒息，并可能产生不可预测的结果。
关于html - 具有相同 ID 的桌面和移动设备导航是否存在 ADA 问题？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54409784/