roll атрибуту эмне үчүн кошулду?

ARIA (Accessible Rich Internet Applications) үчүн role атрибуту элементтин колдонуучу интерфейсинин түрүн ачык аныктоо үчүн колдонулат. Бул жардамчы технологияларга, мисалы, скринридерлерге, элементтин максатын түшүнүүгө жана бул маалыматты мүмкүнчүлүгү чектелген колдонуучуларга өткөрүп берүүгө жардам берет. Ал HTML семантикасын толуктайт, өзгөчө семантикасы жок элементтер үчүн же стандарттык семантика жетишсиз болгондо.

Мисалдар:

• div элементине button ролу берилсе, ал скринридер тарабынан баскыч катары кабыл алынат, ал тургай ал стандарттык иш-аракеттер жана HTML баскыч семантикасы менен иштебесе да.

<div role="button" tabindex="0" aria-pressed="false">
  Мен бас
</div>

• nav элементине navigation ролу (эми nav өзү навигация семантикасына ээ болсо да) кошумча аны жакшыраак түшүнүүгө жардам берет.

<nav role="navigation">
  <ul>
    <li><a href="/">Башкы бет</a></li>
  </ul>
</nav>

• Кээ бир татаал виджеттер, семантикасы жок элементтердин негизинде түзүлгөн, өз ролдорун туура көрсөтүү үчүн алат:

<div role="tablist">
  <button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1">Таб 1</button>
  <button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2">Таб 2</button>
</div>
<div id="panel-1" role="tabpanel" aria-labelledby="tab-1">
  Таб мазмуну.
</div>
<div id="panel-2" role="tabpanel" aria-labelledby="tab-2" hidden>
  Таб 2 мазмуну.
</div>

role атрибуту элементтерди алардын функциясы жана максаты боюнча классификациялоого мүмкүндүк берет, ошондуктан жардамчы технологияларды колдонуп жаткан колдонуучулар үчүн так жана пайдалуу өз ара аракеттенүүнү камсыздайт. Аны башка ARIA атрибуттары менен колдонуу маанилүү (мисалы, aria-label, aria-expanded, aria-hidden), алар элементтердин абалы жана мүнөздөмөлөрүн өткөрүп беришет.

Эске алуу керек:

• Туугандуу HTML семантикасына жана HTML5-ке артыкчылык берилет. Эгер ылайыктуу HTML элемент бар болсо, аны role жана башка ARIA атрибуттары аркылуу жасалган имитациянын ордуна колдонуңуз. Мисалы, <button> колдонуу <div role="button"> ордуна.
• Элементтин ролун өзгөртүү анын ички иш-аракетин өзгөртпөйт. Мисалы, role="button" div үчүн аны фокуско алынып жана Space же Enter басуу менен активдештирилүү кылбайт, эгер кошумча JavaScript колдонулбаса.