Семантическое использование ‹nav› в HTML5 с элементом формы поиска

Определение W3C кажется немного расплывчатым, когда дело доходит до _1 _ :

Элемент nav представляет собой раздел страницы, который ссылается на другие страницы или на части страницы: раздел с навигационными ссылками.

Не все группы ссылок на странице должны быть в элементе навигации - элемент в первую очередь предназначен для разделов, которые состоят из основных блоков навигации. В частности, нижние колонтитулы часто содержат короткий список ссылок на различные страницы сайта, например условия обслуживания, домашнюю страницу и страницу с авторскими правами. В таких случаях достаточно одного элемента нижнего колонтитула; Хотя в таких случаях можно использовать элемент nav, обычно в нем нет необходимости.

Пользовательские агенты (например, программы чтения с экрана), которые нацелены на пользователей, которые могут извлечь выгоду из исключения навигационной информации при первоначальном рендеринге или которые могут извлечь выгоду из немедленной доступности навигационной информации, могут использовать этот элемент как способ определить, какой контент на страницу, которую нужно сначала пропустить и / или предоставить по запросу.

Основываясь на очень строгой интерпретации их определения и того, что я обнаружил при проверке, кажется, что <nav> должен содержать только элементы списка. Однако не следует ли рассматривать поиск как форму навигации по серии страниц?

Хотя я понимаю, что его основное использование предназначено для пользовательских агентов, по-прежнему кажется излишним иметь <nav> перед тегом <ul>, если первый действует только как контейнер для второго. Было бы разумнее, если бы <nav> мог содержать другие элементы, связанные с навигацией, не ограничиваясь списком ссылок.

Например:

<nav role="navigation">
  <form action="http://google.com/search" method="get">
    <fieldset role="search">
       <input type="hidden" name="q" value="site:mysite.com" />
       <input class="search" type="text" name="q" results="0" placeholder="Search"/>
    </fieldset>
  </form>

  <ul class="top-navigation">
     <li><a href="/">Home</a></li>
     <li><a href="/about.html">About Me</a></li>
     <li><a href="/archive.html">Archives</a></li>
  </ul>
</nav>

Помимо проверки, это неприемлемое использование <nav>? Каковы будут последствия для человека, менее озабоченного проверкой, чем обеспечение того, чтобы программы чтения с экрана и другие инструменты обеспечения доступности могли правильно отображать страницу?


person saneshark    schedule 05.03.2012    source источник


Ответы (1)


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

Если ваш поиск является основным методом навигации на вашем сайте, то непременно поместите его в nav, хотя из приведенного выше примера список выглядит как основная навигация, а не ваш поиск.

Я немного писал об использовании тега nav на странице для навигации или не в навигацию?, хотя в нем не упоминается поиск, что является интересным наблюдением.

person Ian Devlin    schedule 05.03.2012
comment
Мне немного больше нравится ваша интерпретация того, как я читаю спецификацию w3c. И хотя поиск не является основным методом навигации для моего сайта, на мой взгляд, он по-прежнему является основным блоком навигации. Думаю, что с HTML5 в черновой форме меня больше беспокоит то, как различные пользовательские агенты будут интерпретировать этот блок кода и как его можно оптимизировать для этой цели. По этой причине я также включил некоторые роли ARIA. Надеюсь, что кто-то, обладающий большими знаниями по этому вопросу, присоединится к вам. Тем не менее, спасибо за ваш отзыв, очень приятно видеть, что я не единственный, кто обеспокоен этим элементом. - person saneshark; 05.03.2012
comment
Если это основной блок навигации, поместите его в навигатор. В настоящий момент ни один из пользовательских агентов ничего с этим не делает. Что касается инструментов доступности, я считаю, что поиск лучше помечать как поиск (используя роль ориентира поиска). Кроме того, вы должны пометить только один элемент на странице с ролью ориентира навигации, поэтому вы должны прикрепить его к своему списку и выполнить поиск в поиске. Вы можете узнать больше об этих ролях и некоторых соответствующих элементах HTML5 (прокрутите вниз) по адресу: paciellogroup.com/blog/2010/10/using-wai-aria-landmark-roles - person Ian Devlin; 05.03.2012
comment
Спасибо, Ян. Я просмотрел страницу paciellogroup, и раздел [<nav>] перенаправил меня на сайт Брюса Лоусона. Посмотрев на источник, он использует [<nav>], как и я. Определение [<nav>] с помощью role = navigation, а в его случае элемента формы (в отличие от элемента fieldset) с role = search. Хотя я не считаю ни один из этих сайтов достаточно авторитетным авторитетом по этому вопросу, я буду полагаться на них, пока у меня не будет возможности протестировать свой код на паре инструментов доступности и отчитаться. - person saneshark; 05.03.2012
comment
Итак, я провел небольшое тестирование и рад сообщить, что у W3C нет проблем с проверкой элемента навигации, который содержит как ввод формы поиска, так и список со ссылками. Кроме того, мне кажется, что пока я использую role = navigation для элемента nav, а role = search для элемента формы, а не валидатор fieldset, все в порядке. Казалось бы, это лучшее из обоих миров. Еще раз спасибо, Ян. Я, скорее всего, напишу в блоге сообщение о том, что я узнал, и с радостью дам ссылку на ваш блог. - person saneshark; 05.03.2012