list

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

Използвайте <ul> за неподредени списъци, <ol> за подредени списъци и <dl> за описателни списъци. Всеки от тях се представя автоматично като списък с правилен брой елементи.

Единствената практическа причина изрично да зададете role="list" на <ul> е поведението на Safari за „премахване на ролята на списъка”: когато към <ul> е приложено list-style: none, WebKit премахва ролята на списъка от дървото на достъпността, приемайки, че е само за стилови цели. Изричното задаване на role="list" заменя тази евристика.

Не бъркайте role="list" с role="listbox". Списъкът е статично съдържание; listbox е интерактивен уиджет за избор. Смесването им кара екранните четци да очакват семантика на избор, която не е налична.

Чести грешки

• role="list" върху контейнери <div>, които съдържат <div> „елементи” без role="listitem". Ролята на списъка изисква наличие на наследници listitem; без тях броят е грешен.
• Използване на role="list" за навигационно меню вместо <nav> с <ul>. Ориентирът за навигация е по-полезен.
• Добавяне на role="list" към <ul> без list-style: none. Излишно е — нативната роля вече е налична.
• Използване на role="list", когато е имало предвид role="listbox".
• Влагане на елементи <li> в родителски елемент, различен от списък (<div>) — елементите на списъка стават сираци.

Пример

<!-- Предпочитан начин -->
<ul>
  <li>Screen reader</li>
  <li>Switch control</li>
  <li>Voice control</li>
</ul>

<!-- Заместване на евристиката на Safari за премахване на ролята на списъка -->
<ul role="list" style="list-style: none;">
  <li role="listitem">Screen reader</li>
  <li role="listitem">Switch control</li>
</ul>