HTML: Могу ли я безопасно игнорировать предупреждение «Элемент input не может быть вложен в элемент button»?

Question

Вот HTML:

<div class="dropdown">
  <button class="btn dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><input type="checkbox" checked="checked" onclick="return false"/></button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#"><input type="checkbox" onclick="return false" disabled="disabled"/></a>
    <a class="dropdown-item" href="#"><input type="checkbox" onclick="return false"/></a>
    <a class="dropdown-item" href="#"><input type="checkbox" checked onclick="return false"/></a>
  </div>
</div>

В основном это пример раскрывающегося списка Bootstrap.

Мне нужно это для фильтра столбцов таблицы, чтобы иметь возможность фильтровать либо по true , false или без фильтра.

Не берите в голову JS logi c здесь.

• флажки «только для представления» - они не должны функционировать как флажки, они служат символами флажка. У меня нет времени и ресурсов для предоставления векторной графики / специализированных шрифтов здесь. Я хочу, чтобы это было как можно проще. Вставьте это в JSFiddle и включите Bootstrap, чтобы увидеть, как оно выглядит.
• все флажки должны отображаться корректно в современных настольных и мобильных браузерах

Это не должно ничего сломать.

Однако Visual Studio предупреждает меня о input внутри button. Я знаю, что это против HTML стандарта, но я тестировал его на Edge, Chrome и FireFox, и он работает. Здесь есть подвох?

Я знаю, флажок (или любой другой вход) ПОВЕДЕНИЕ внутри элемента кнопки не определено. Но если я не хочу, чтобы они работали, просто отобразите - все должно быть в порядке? Ну, я даже позаботился о неопределенном поведении: если один браузер решил разрешить работу флажка внутри кнопки, я явно установил атрибут onclick, чтобы он просто возвращал false.

Итак, вы бы оставили его или нет? Есть ли лучший способ представить такой фильтр? Может быть, бесплатный веб-шрифт, играющий с Bootstrap? Веб-шрифт, содержащий символы, такие как флажок, флажок без отметки, звездочка или любой другой символ, обозначающий «Мне все равно, если флажок установлен».

Answer 1

Нет, вы не должны игнорировать предупреждение. Недопустимо HTML размещать интерактивные элементы (например, <input> элементы) внутри <a> ссылок или <button> элементов и создает проблемы с доступностью.

Некоторые дополнительные соображения:

• Ваши пункты выпадающего меню действуют как флажки? Если пользователь щелкает один, состояние флажка изменяется? Если это так, вы должны использовать <input type="checkbox"> элементы вместо ссылок.

• И наоборот, если элементы вашего выпадающего меню действуют как ссылки (переход пользователя на новый контент ), вы не должны делать их визуально похожими на флажки.

Если вы найдете семантически обоснованную причину необходимости <a> ссылок или <button> элементов, которые выглядят как флажки, вы следует использовать <img> для части флажка вместо того, чтобы использовать другой элемент, который не является семантически подходящим.