aria-level

Кога се използва

На role="heading" за деклариране на дълбочината на заглавието — ARIA еквивалентът на избора между <h1> и <h6>. Родните елементи за заглавия трябва да са предпочитаният вариант; към role="heading" + aria-level трябва да се прибегва само когато е необходимо ниво по-голямо от 6, или когато рамката не позволява директно използване на елемент за заглавие.

Валидно е и за role="treeitem" (дълбочина в дървото, започваща от 1 за елементите от най-горно ниво) и за role="listitem" вътре в вложен role="list", когато влагането не е изразено чрез DOM структурата.

Как се държи

Стойността е положително цяло число. При заглавия стойностите 1–6 съответстват на <h1>–<h6>; стойности над 6 са валидни в ARIA, но само малко екранни четци ги изразяват, поради което не бива да се разчита, че ниво 7 ще бъде обявено като такова.

При елементи в дърво нивото е дълбочината: коренът на дървото е ниво 1, преките му деца са ниво 2 и т.н. Номерът на нивото позволява на потребителя на екранен четец да разбере позицията си в йерархията, без да вижда отстъпа.

Атрибутът не променя визуалното оформление. Ако „заглавие от ARIA ниво 4” трябва да изглежда като h4, стилизирането е грижа на разработчика.

Чести грешки

• Използване на role="heading" плюс aria-level="3" вместо просто <h3>. Родният елемент осигурява ролята, нивото, навигацията с клавиатура по подразбиране и интеграцията с контура на документа безплатно.
• Задаване на aria-level на елемент без role="heading", role="treeitem" или role="listitem". Атрибутът няма ефект например върху <button> или <div> без роля.
• Прескачане на ниво — ниво 2, следвано от ниво 4, обърква контура на документа и нарушава SC 1.3.1 при одити.
• Елементи в дърво с грешно ниво: всяко дете на елемент от ниво 2 трябва да е ниво 3. Грешки с единица тук нарушават обявяванията „преминахте на по-горно ниво” / „преминахте на по-долно ниво”.
• Нецелочислени или нулеви стойности. Валидни са само положителни цели числа; aria-level="0" се игнорира.
• Забравяне за актуализиране на aria-level при преместване на елементи в дърво с възможност за плъзгане.

Пример

<!-- Заглавие по-дълбоко от h6 (рядко; необходимо при сложни контури) -->
<div role="heading" aria-level="7">Sub-sub-sub-section</div>

<!-- Елементите в дървото изразяват дълбочина чрез aria-level -->
<ul role="tree">
  <li role="treeitem" aria-level="1" aria-expanded="true">
    Documents
    <ul>
      <li role="treeitem" aria-level="2">Invoices</li>
      <li role="treeitem" aria-level="2">Contracts</li>
    </ul>
  </li>
</ul>