我的任务是浏览一个网站并使其完全符合ADA。目前困扰我的当前问题是如何解决具有重复ID的问题。
在这里阅读：https://dequeuniversity.com/rules/axe/2.2/duplicate-id?application=lighthouse
它指出重复ID是ADA的问题。
此站点上有重复ID的原因是因为它具有两个主要导航。一种用于桌面，另一种用于移动。在某个视口中，移动菜单将从显示切换其CSS样式：无；显示：反之亦然，用于桌面菜单。
我在这里阅读：https://www.html5accessibility.com/tests/hidden2013.html
该显示：无；是一种隐藏屏幕阅读器内容的方法。因此，我想知道的是，是否存在重复ID的问题，并且由于永远不会同时显示移动和桌面菜单，所以这不是问题。
这些ID也未连接到表单，表格标题单元格等的标签。因此，这是否是一个不必担心的问题？还是这仍然不符合ADA，或者如果不将桌面菜单和移动菜单组合为一个菜单或不给它们提供唯一ID的话，我可以采取什么步骤使其符合ADA？
答案 0 :(得分：1)
您是正确的，使用display:none将对所有用户隐藏内容，这实际上可以使ID重复的问题无效。
但是，您仍然应该轻描淡写，因为这是次优的做法，可能会导致陷阱。
一方面，具有重复的ID无效的HTML。 HTML5规范明确指出：
“ 该值在元素的主子树中的所有ID中必须是唯一的” https://www.w3.org/TR/2011/WD-html5-20110525/elements.html#the-id-attribute
此外，按ID定位元素的任何脚本（当前或将来）都可能会阻塞重复的ID，并可能产生不可预测的结果。