Мне нужен совет от гуру HTML.
Семантически я чувствую, что FIELDSET лучше всего подходит для формы, содержащей список полей для заполнения и отправки пользователем. Однако без встроенного элемента LEGEND на странице не выполняется проверка HTML 5. Мы используем тег H1 для названия формы и не нуждаемся в LEGEND.
Мы можем добавить пустой элемент LEGEND в FIELDSET и исправить проблему проверки. Однако есть ли что-то лучшее для использования в этой ситуации (кроме DIV)?
Цените любые идеи!
Я часто нахожу себя в поле формы без легенды и придумываю элегантное и удобное для чтения с экрана приложение, сохраняя при этом правильную схему документа и проверку HTML5. См. Следующий код:
<section>
<h2 id="legend-heading">
Inputfield buttons
</h2>
<form method="post" action="" name="inputfield-form">
<fieldset aria-labelledby="legend-heading">
<legend class="hide"></legend>
...
</fieldset>
</form>
</section>
В классе "hide" элемента legend есть правило "display: none", которое скрывает содержимое из представления. Кроме того, устройства чтения с экрана пропускают содержимое, которое имеет отображение: не назначено. Установив алиас-labelled-attibute в полевом поле, мы скажем, что экранные устройства используют элемент с соответствующим id (здесь допускается несколько идентификаторов). Используя h2 (или любой другой элемент заголовка), мы получаем правильную схему документа, и в итоге получаем DRY-код, доступный, действительный и удобный для SEO.
Набор полей без легенды действительно должен быть прекрасным в качестве средства группировки входных данных формы. Не бойтесь использовать divs или элементы формы, тем не менее, особенно если вы намереваетесь повторно использовать этот код где-нибудь, где вы хотите что-то вроде легенды. Это связано с тем, что следует избегать легенд с легендами, если вы не используете их для группировки одного набора флажков или переключателей.
Почему? Некоторые читатели экрана предполагают, что наборы полей будут использоваться только таким образом и оптимизированы для этого случая использования, в результате чего программа чтения с экрана будет объявлять легенду на каждом отдельном входе в списке, что делает его досадно подробным для ввода вклада и уменьшения доступности формы. Это один из тех редких случаев, когда вы можете уменьшить удобство использования своего HTML, сделав его слишком семантически богатым.
Для более подробного объяснения см. эту старую (но актуальную) ссылку: https://web.archive.org/web/20130922062411/http://www.rnib.org.uk/professionals/webaccessibility/wacblog/Lists/Posts/Post.aspx?id=40
Вы правы в том, что FIELDSET соответствует счету.
DIV используется слишком часто, IMO, для всех ситуаций, когда разработчик не знает, что еще использовать для контейнера, так как TABLE используется так часто для макета (в основном из лени).
Я не вижу проблемы с пустым элементом LEGEND, но рассмотрю замену вашего H1 на стилизованный LEGEND для максимальной семантической yumminess.