Pull to refresh

Использование элементов fieldset и legend для группировки управляющих элементов HTML форм

Lumber room
Translation
Original author: Roger Johansson
Элементы fieldset и legend должны использоваться вместе для создания именованных групп связанных с точки зрения семантики полей ввода HTML форм. Это позволяет пользователю понять, как поля ввода связаны между собой.

Как группировка представляется пользователю, зависит в основном от того, зрячий он или нет. Большинство графических браузеров по умолчанию рисуют рамку вокруг элемента fieldset и отображают legend вверху этой рамки, в то время как «читалки» проговаривают текст, который находится в legend, в начале каждого блока fieldset или перед каждым элементом управления, который находится внутри него. В результате — лучше делать его коротким и продумывать то, как будут сочетаться текст в legend и label, если их произнести вместе.
Вот пример использования fieldset для группировки radio:

  1. <fieldset>
  2. <legend>Favourite colour</legend>
  3. <input type="radio" name="fav-col" id="fav-col-1" value="red">
  4. <label for="fav-col-1">Red</label>
  5. <input type="radio" name="fav-col" id="fav-col-2" value="green">
  6. <label for="fav-col-2">Green</label>
  7. <input type="radio" name="fav-col" id="fav-col-3" value="blue">
  8. <label for="fav-col-3">Blue</label>
  9. </fieldset>


В общем: не используйте fieldset и legend если вы хотите обрамить рамочкой информационное наполнение страницы (От переводчика: весьма неожиданный вывод. Кто бы мог подумать, да?) Их следует использовать для логической группировки элементов управления в форме, всегда следует использовать оба элемента и текст в legend должен быть краток.

Дополнительные материалы:




Этот пост — заметка. Предыстория: Заметки для веб-разработчиков и веб-дизайнеров/верстальщиков.

Связанные заметки




Послесловие.


Мне интересна тема доступности веб-сайтов. Особенно для пользователей с ограничениями по зрению или отсутствием такового. Если кто то знает реально используемые такими людьми бесплатные скринридеры, статьи, которые описывают особенности работы с ними, любую информацию по этой тематике — пожалуйста напишите мне. А я по мере того как буду получать информацию сам — буду писать статейки, которые освещают данную проблематику.

О переводчике.


Я — Ворон. А Ворон это — я. Кое где известен, как Тихий Бес (Silent Imp).
Я вольнонаемный верстальщик, программист.
Очень люблю качественно верстать макеты.
А еще у меня есть маленький сайтик.
Переводами занимаюсь потому, что сам читаю эти статейки и иногда мне хочется сделать что-то хорошее окружающим меня людям. Надеюсь, что статейка доставит вам удовольствие или даже будет вам полезна.

Для подсветки синтаксиса использовался ресурс highlight.hohli.com/
Tags:xhtmlAccessibilityQuick Tipsзаметкидоступностьформыfieldsetlegend
Hubs: Lumber room
Total votes 10: ↑5 and ↓5 0
Views3.2K

Comments 14

Only those users with full accounts are able to leave comments. Log in, please.

Popular right now

Node.js: серверный JavaScript
April 26, 202127,000 ₽Loftschool
SEO-специалист
April 26, 202164,900 ₽Нетология
Факультет дизайна
April 26, 2021236,988 ₽GeekBrains