separator

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

За тематично прекъсване между секции на текст използвайте <hr>. Нативният елемент се обявява от екранните четци като разделител.

role="separator" върху елемент, различен от <hr>, е подходящо в рамките на съставни уиджети:

• Между групи от менюелементи в role="menu" или role="menubar".
• Между групи от контроли в role="toolbar".
• Като дръжка за преоразмеряване в оформление с разделен панел (фокусируемият вариант с „текуща стойност” — вж. по-долу).

Съществуват два варианта на разделителя:

• Статичен — не е фокусируем, не е интерактивен. Чисто визуален/семантичен разделител. Стойността по подразбиране.
• Фокусируем — tabindex="0", използван като дръжка за плъзгане (напр. между два панела). Поддържа aria-valuenow, aria-valuemin, aria-valuemax за обявяване на позицията и реагира на клавиши-стрелки за преместване.

Задайте aria-orientation="vertical" за вертикални разделители в хоризонтални ленти с инструменти; хоризонталната ориентация е стойността по подразбиране.

Чести грешки

• role="separator" с tabindex="0", но без обработчик на клавиатурни събития. Потребителите попадат на елемент, който не могат да управляват.
• Фокусируем разделител без aria-valuenow. Екранните четци не могат да обявят позицията на разделението.
• Използване на <hr> за чисто декоративни линии. Ако линията е само CSS граница, пропуснете <hr> и стилизирайте с border-top.
• Множество разделители в меню без логическа причина за групиране — излишен шум.
• Вертикален разделител в хоризонтална лента с инструменти без aria-orientation="vertical".

Пример

<!-- Static separator inside a menu -->
<ul role="menu" aria-label="File">
  <li role="menuitem" tabindex="0">New</li>
  <li role="menuitem" tabindex="-1">Open</li>
  <li role="separator"></li>
  <li role="menuitem" tabindex="-1">Save</li>
</ul>

<!-- Focusable separator (resize handle) -->
<div
  role="separator"
  tabindex="0"
  aria-orientation="vertical"
  aria-valuenow="40"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-label="Resize panels"
></div>