Элемент HTML5 nav vs. role = "navigation"

У всех перечисленных ниже есть одно и то же семантическое значение? Если нет, объясните свой ответ.


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>

Ответы

Ответ 1

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

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

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

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

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

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

и nav element (выделено мною):

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

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

Ответ 2

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

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

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

Он также рекомендовал w3.org

Ответ 3

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

Ответ 4

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

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

Ответ 5

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

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

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

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

Ответ 6

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

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