Элемент навигации HTML5 и роль = навигация

Имеют ли все нижеследующие один и тот же семантический смысл? Если нет, объясните свой ответ.


1.

<nav>
    <ul>
        <li><a href="#">link</li>
        <li><a href="#">link</li>
        <li><a href="#">link</li>
        <li><a href="#">link</li>
    </ul>
</nav>


2.

<div role="navigation">
    <ul>
        <li><a href="#">link</li>
        <li><a href="#">link</li>
        <li><a href="#">link</li>
        <li><a href="#">link</li>
    </ul>
</div>


3.

<ul role="navigation"> 
<! -- breaks HTML5 specification 3.2.7.4 Implicit ARIA Semantics
      navigation is not an allowed value of role on ul -->
    <li><a href="#">link</li>
    <li><a href="#">link</li>
    <li><a href="#">link</li>
    <li><a href="#">link</li>
</ul>

html nav semantic-markup
person Web_Designer    schedule 06.01.2013    source источник
comment
Учитывая, что ни один из этих списков не имеет идентификатора типа для чего он предназначен, атрибут aria-label для них очень актуален. aria-labelledby="element_id" можно использовать для указания на такой элемент, как <div id="element_id">Primary navigation</div>, если он существует.   -  person Chris Marisic    schedule 07.08.2014

Ответы (6)


arrow_upward
46
arrow_downward

Как отметил Алохчи, согласно HTML5, пример 3 - запрещено.

Но примеры 1 и 2 не семантически эквивалентны.

nav является секционирующим элементом, div нет. Таким образом, в примере 1 создается раздел без названия (похожий на пустой заголовок), изменяющий весь документ схема.

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

Это различие представлено в определениях navigation роли.

Коллекция навигационных элементов (обычно ссылок) для навигации по документу или связанным документам.

и элемент nav (выделено мной жирным шрифтом):

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

Также обратите внимание: пользовательский агент HTML5, который не поддерживает/не знает WAI-ARIA, не поймет, что пример 2 содержит навигацию (и наоборот).

person unor    schedule 08.01.2013
comment
Я постоянно вижу эту аббревиатуру соотв. и никак не могу понять, что она должна означать. - person TRiG; 14.01.2014
comment
@TRiG: я использую его как сокращение от соответственно, но, возможно, я не использую это слово на 100% правильно (мой предполагаемое значение, вероятно, будет похоже на and or or). (Не знаю, является ли это общеупотребительным английским языком, возможно, это немецкий уклон? См. также Что означает «отв.» в этих предложениях? ) - person unor; 14.01.2014

arrow_upward
22
arrow_downward

Twitter Bootstrap использует <nav role="navigation">

Кажется, что он наиболее эффективно покрывает все потребности.

Не забудьте добавить role="navigation" на каждую панель навигации, чтобы упростить доступность.

Это также рекомендуется w3.org

person bdanin    schedule 17.10.2013
comment
Похоже, что с тех пор, как этот ответ был первоначально написан, все изменилось. Похоже, что Twitter Bootstrap изменил свою рекомендацию на: обязательно используйте элемент «nav» или, если используете более общий элемент, такой как «div», добавьте role=navigation на каждую панель навигации, чтобы явно идентифицировать ее как ориентир. регион для пользователей ассистивных технологий. Также валидатор w3.org выдает предупреждение: Роль навигации не нужна для элемента nav. - person Damian Helme; 17.07.2015
comment
Согласно w3.org/TR/html-aria/: установка роли ARIA и/или атрибута aria-*, соответствующего неявной семантике ARIA, не требуется и НЕ РЕКОМЕНДУЕТСЯ, поскольку эти свойства уже установлены браузером. - person Pēteris Caune; 03.06.2019

arrow_upward
5
arrow_downward

Первые два случая семантически эквивалентны. Третьего нет. <ul> имеет подразумеваемую семантику ARIA по умолчанию list, и может быть действительно установлен только в directory, list, listbox, menu, menubar, presentation, tablist, toolbar или tree, поэтому установка его в navigation недействительна и нарушает семантику list, которую элемент <ul> имеет в первых двух случаях. .

person Alohci    schedule 06.01.2013
comment
+1 Хорошее замечание! Я не заметил, что элемент <ul> не допускает броска navigation (spec). Это исключает вариант № 3. - person Web_Designer; 07.01.2013
comment
И моя самая первая попытка использовать роли арии нарушила спецификацию. Я рад, что продолжал копать. - person Chris Marisic; 07.08.2014

arrow_upward
5
arrow_downward

<nav role="navigation"> проверяет для меня, используя HTML5 dtd в службе проверки W3C.

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

person sam    schedule 27.10.2013

arrow_upward
3
arrow_downward

WAVE Web Accessibility Tool можно использовать для получения информации о подобных вещах.

Хотя я нахожу там документацию и представление результатов при проверке немного запутанным. Я думаю, было бы хорошо с четкими примерами, так как не все знают очень много о доступности в Интернете. (Результат выглядит очень хорошо, но все же примеры были бы полезны.)

person Leo    schedule 02.04.2014

arrow_upward
2
arrow_downward

Хорошо, это хороший вопрос, и вкратце вот что происходит, когда две или более спецификаций, предлагающих схожие проблемы, выпускаются в разное время и поддерживаются разными браузерами/программами чтения с экрана.

Элементу <nav> должна автоматически присваиваться роль navigation, поэтому теоретически вы можете просто использовать свой вариант 1. Однако некоторые программы чтения с экрана еще не знают об этом, поэтому использование 2 было бы лучше. Вариант 3 кажется странным, так как это больше, чем неупорядоченный список, это навигация.

Конечно, это хороший пример — для многих ролей ARIA нет HTML-элемента для сопоставления, поэтому вы можете выбрать вариант 2, потому что вы используете другие вещи из ARIA и хотите быть явным.

Лично я использую 2, потому что GZIP делает размер файла неважным и заставляет его работать в AT, с которым я тестировал (закадровый голос и что-то еще в Windows, я сейчас не могу вспомнить).

person Rich Bradshaw    schedule 06.01.2013
comment
Я могу понять, почему вы предпочитаете 2, а не 3, потому что так удобнее, но 3 делает две работы одновременно. - person Popnoodles; 06.01.2013
comment
Хотя это все немного глупо (не вы, спец), для UA, которые ищут nav, кажется, что он должен быть. Я могу представить себе время (если оно еще не наступило), когда поисковые системы будут использовать nav для игнорирования контента или для определения приоритета ссылок в nav. - person Rich Bradshaw; 06.01.2013
comment
@popnoodles Вариант 3 исключен. navigation не является допустимым значением атрибута role элемента <nav>. См. ответ @Alohci. - person Web_Designer; 07.01.2013
comment
Вариант 3 не имеет атрибута роли в элементе <nav>. - person Popnoodles; 07.01.2013
comment
@Web_Designer, согласно W3, они действительно рекомендуют это. - w3.org/WAI/GL/wiki/Using_HTML5_nav_element - person klewis; 09.12.2015