⚙️ Что такое атрибут role в HTML и зачем он используется?

Атрибут role используется для улучшения доступности веб-страниц. Он сообщает вспомогательным технологиям (например, экранным читалкам), какую функцию выполняет элемент.

➡️ Пример:

<!-- Обозначение навигационного меню -->
<nav role="navigation">
  <ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">О нас</a></li>
  </ul>
</nav>

<!-- Определение элемента как диалогового окна -->
<div role="dialog" aria-labelledby="dialog-title">
  <h2 id="dialog-title">Подтвердите действие</h2>
  <button>ОК</button>
</div>

🗣️ Почему полезно:

• role="navigation" помогает читалкам распознавать меню.
• role="dialog" делает <div> доступным как модальное окно.

CodeBase | Frontend | #Основы

⚙️ Что такое атрибут tabindex в HTML и зачем он используется?

Атрибут tabindex управляет порядком перехода по элементам с клавиатуры (с помощью Tab). Это важно для удобства навигации и доступности веб-страниц.

➡️ Пример:

<button tabindex="2">Кнопка 2</button>
<button tabindex="1">Кнопка 1</button>
<button tabindex="3">Кнопка 3</button>

🗣️ Почему полезно:

• tabindex="0" делает элемент доступным для Tab по умолчанию.
• tabindex="-1" исключает элемент из последовательности табуляции, но сохраняет фокусируемость через JavaScript.
• tabindex="1" (и выше) изменяет порядок фокуса, но злоупотреблять этим не стоит — лучше использовать естественный порядок DOM.

Правильное использование tabindex улучшает доступность и удобство навигации для всех пользователей

CodeBase | Frontend | #Основы