Стандарти · ARIA

Роля Ориентир

region

Общ ориентир за съдържание, което не отговаря на banner, main, navigation, complementary или contentinfo, но е достатъчно важно, за да се навигира до него. Елементът <section> се превръща в ориентир region само когато има достъпно наименование.

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

За смислен раздел на страницата, който не съответства на друг ориентир и до който потребителите на екранни четци трябва да могат да прескочат директно: лента с „Препоръчани продукти”, текущата стъпка в многоетапна форма, транскрипт на чат в рамките на по-голямо приложение.

<section> е изложен като ориентир region САМО когато има достъпно наименование (aria-label или aria-labelledby). Елемент <section> без наименование е просто обща група — без изложен ориентир. Това е по замисъл: твърде много ориентири правят менюто с ориентири безполезно.

role="region" върху <div> работи по същия начин — наименованието е задължително.

Кога да се използва спрямо group

Използвайте role="region" (или <section aria-label>)Използвайте role="group"
Основен раздел на страницата, заслужаващ навигация с ориентирКлъстер от свързани контроли без статус на ориентир
По един или два на страницаМоже да има много на страница
Винаги има достъпно наименованиеНаименованието е незадължително

При съмнение: задайте си въпроса „бих ли искал потребителят на екранен четец да може да прескочи директно тук?” Ако да — region. Ако не — group.

Чести грешки

  • <section> без aria-label или aria-labelledby. Не е ориентир; обвивката не прави нищо за достъпността.
  • Маркиране на всеки <section> като region. Залива менюто с ориентири и обезценява стойността на всеки ориентир.
  • aria-label="Section" — безсмислено. Наименованието трябва да описва какво прави този раздел отличителен.
  • Употреба на role="region" за странична лента — тя е complementary. Изберете най-специфичния ориентир.
  • role="region" върху обвиващия <div> И върху вътрешен <section> — дублирани ориентири за едно и също съдържание.

Пример

<section aria-labelledby="recent">
  <h2 id="recent">Recently published</h2>
  <ul>
    <li><a href="/articles/aria-roles">ARIA roles overview</a></li>
    <li><a href="/articles/wcag-22">WCAG 2.2 changes</a></li>
  </ul>
</section>