Какой лучший семантический способ обернуть область поиска? - PullRequest
Новая
       9

Какой лучший семантический способ обернуть область поиска?

7 голосов
/ 22 декабря 2010

Я хотел бы воспользоваться улучшенной семантикой html5. Я создаю область поиска, и область поиска должна иметь фон и содержать связанные с поиском вещи, такие как автозаполнение и подсказки поиска.

Есть ли какой-то консенсус относительно того, к какому типу элементов следует относить что-то вроде области поиска?

  • Должно ли это быть NAV, потому что поиск - это метод навигации?
  • Должен ли это быть РАЗДЕЛ, потому что это незаметный раздел страницы?
  • Должно ли это быть DIV, потому что упаковка элементов, связанных с поиском, не имеет четкой семантики?

Разметка выглядит примерно так: 

<?whatElement?>
  <input type="search" placeholder="Search for a name or ID..." required />
  <a href="#" class="search button">Search</a>
</?whatElement?>

Спасибо за ваши мысли.

Ответы [ 4 ]

7 голосов
/ 19 июля 2016

Я знаю, что на этот вопрос уже есть выбранный ответ, но он занял настолько высокое место в моем поиске Google для "семантической формы поиска" , что я чувствую необходимость внести вклад в то, что, по моему мнению, немного лучшеответьте семантически и с точки зрения стандартов. 

<section role="search">
    <form action="#" method="get">
        <fieldset>
            <legend>Search this website:</legend>
            <label for="s">
                <input type="search" name="s" id="s" placeholder="Search..." maxlength="200" />
            </label>
            <button type="submit" title="Search this website now">Submit</button>
        </fieldset>
    </form>
</section>

Конечно, я сделал ряд предположений и заполнил HTML некоторыми значениями по умолчанию (action, get, id и name для ввода и т. Д.) И безИмена классов для элементов (которые я всегда использую в пользу общих имен элементов или, не дай Бог, идентификаторов), но вы должны адаптироваться к вашим собственным потребностям.

Например, некоторые дополнения помимо превосходного вкладавыше: первый дочерний элемент любой формы всегда должен быть тегом <fieldset> и иметь прикрепленный <legend> (видимый или нет - https://www.w3.org/TR/WCAG20-TECHS/H71.html), а все теги <input> должны иметь связанный тег <label>через свойства for и id (https://www.w3.org/TR/WCAG20-TECHS/H44.html - мне проще просто обернуть ввод в метку, чтобы не забыть подключить их).Все элементы призыва к действию должны иметь заголовок (для SEO и юзабилити, чтобы усилить действие, которое пользователь собирается совершить непосредственно перед тем, как он его сделает) и т. Д.

7 голосов
/ 22 декабря 2010

В спецификации HTML5 говорится об элементе section:

Роль должна быть либо регионом, документом, приложением, контентом, основной информацией, поиском , предупреждением, диалогом,alerttdialog, status или log

, поэтому я бы использовал это.

5 голосов
/ 22 декабря 2010

Как насчет: 

<form>
   <input type="search" name="" value="" />
   <input type="submit" value="Search" />
</form>
4 голосов
/ 04 февраля 2013 
<section role="search">

Атрибут role является ориентиром ARIA :

Ориентир региона, который содержит коллекцию предметов и объектов, которые в целом объединяются, чтобы создать средство поиска.

...