Навигация для ПК и мобильных устройств с одинаковыми идентификаторами Проблема с ADA?

Question

Мне поручено пройти сайт и сделать его полностью совместимым с ADA.Текущая проблема, с которой я столкнулся, состоит в том, как решить проблему с дублирующимися идентификаторами.

Чтение здесь: https://dequeuniversity.com/rules/axe/2.2/duplicate-id?application=lighthouse

утверждает, что дублирующие идентификаторы являются проблемой для ADA.

Причина, по которой на этом сайте дублируются идентификаторы, заключается в том, что он имеет две основные навигации.Один для настольного компьютера и один для мобильного.В определенном окне просмотра мобильное меню переключит свои стили CSS с дисплея: нет;отобразить: блок;и наоборот для меню рабочего стола.

Я прочитал здесь: https://www.html5accessibility.com/tests/hidden2013.html

Этот дисплей: нет;это способ, который поддерживается, чтобы скрыть контент от программ чтения с экрана.Поэтому мне интересно, если проблема с дублирующимися идентификаторами не является проблемой, и поскольку меню для мобильных устройств и настольных компьютеров никогда не отображаются одновременно, это не проблема.

Эти идентификаторы также не связаны с метками для форм, ячеек заголовка таблицы и т. Д. Так что это не проблема для беспокойства?Или это что-то, что все еще не будет совместимым с ADA, и если да, то какой шаг я могу предпринять, чтобы сделать его совместимым с ADA, не объединяя меню рабочего стола и мобильного устройства в одно или назначая им оба уникальных идентификатора?

Answer 1

Вы правы, что использование display:none скрывает контент от всех пользователей, что на практике сводит на нет проблему дублирования идентификаторов.

Однако вы все равно должны действовать осторожно, поскольку это неоптимальная практика с потенциальными ловушками.

С одной стороны, наличие дублирующих идентификаторов не является допустимым HTML.В спецификации HTML5 четко говорится, что:

" Значение должно быть уникальным среди всех идентификаторов в домашнем поддереве элемента " https://www.w3.org/TR/2011/WD-html5-20110525/elements.html#the-id-attribute

Кроме того, любые сценарии (текущие или будущие), которые нацелены на элементы по идентификатору, могут подавиться дублирующими идентификаторами и могут привести к непредсказуемым результатам.