Что является более "семантическим HTML" для сообщений об ошибках?

Question

Мы обсуждали с коллегой и пытались решить, какой элемент HTML использовать для сообщения об ошибке проверки формы.

Один из нас говорит, что мы должны использовать span или div, потому что это часть поля ввода, а другой говорит, что это должен быть элемент ap, потому что это текст.

Что вы, ребята, думаете?

Answer 1

Полагаю, вам следует использовать <label>, который напрямую связывает сообщение об ошибке с элементом ввода.

цитирование W3 ^{спецификаций}

Элемент LABEL может использоваться для прикрепления информации к элементам управления.

и

С одним и тем же элементом управления можно связать несколько меток, создав несколько ссылок через атрибут for.

---

См. Также Сообщение об ошибке: против

Answer 2

В принципе, выбор элемента должен быть продиктован значением, а не тем, «как и где вы хотите отобразить» его (как предложил @Babiker). В этом вся идея, не говоря уже о том, какое влияние будет иметь выбор (например, на пользователей с ослабленным зрением (для которых «то, где вы его отображаете» может быть полностью утрачено).

К сожалению, даже в HTML 5 нет элемента для этого. Возможно, «в сторону» (http://www.w3.org/TR/html5/sections.html#the-aside-element) будет самым близким? Спецификация описывает это в Разделе 4.3.5 как:

Элемент aside представляет собой раздел страницы, который состоит из содержимого, косвенно связанного с содержимым вокруг элемента aside, и которое может рассматриваться отдельно от этого содержимого. Такие разделы часто представлены в виде боковых панелей в печатной типографии.

Элемент может использоваться для типографских эффектов, таких как кавычки или боковые панели, для рекламы, для групп элементов навигации и для другого содержимого, которое считается отдельным от основного содержимого страницы.

Answer 3

Просто бросить в банку: А как насчет <ul> -элементов.Если проверка поля ввода не удалась по нескольким причинам, вы можете прикрепить к этому полю более одного сообщения об ошибке.

Пример для поля загрузки файла:

• Файл, который вы пытались загрузить, имеет неправильный формат.(Допускаются только png , gif и jpg )
• Файл, который вы пытались загрузить, имеет большой размер.(Макс. 1 МБ)
• и т. Д. *

Например, Zend-Framework Error Decorator использует ul -Elements.

Однако еслиМне пришлось выбирать между div, p и span, мой выбор будет div.Лучший стиль (например, цвет фона).

Answer 4

Нет правильного тега для сообщения об ошибке. Все зависит от того, как и где вы хотите отобразить ошибку. После того, как вы определитесь с этими вещами, ваш выбор будет сужен, так как свойства тегов и ограничения различаются. Но как <p> пришел в это?

Answer 5

Рекомендации WCAG2.0, на

1.3.1 Информация и взаимосвязи: Информация, структура и отношения, передаваемые посредством презентации, могут быть определены программно или доступны в текстовом виде.

Перечислены как достаточные методы.

G138: использование семантической разметки при использовании цветовых сигналов

И

H49: использование семантической разметки для маркировки выделенного или специального текста

Исходя из этого, я делаю вывод, что единственными подходящими тегами для ошибок являются <em> и <strong>

---

Использование <label> недостаточно, поскольку показывает взаимосвязь между содержимым метки и целевым полем, но не отражает важность содержимого.

Answer 6

Если бы у details/summary была лучшая поддержка, я бы предложил это.

http://caniuse.com/#feat=details