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

Атрибут aria-hidden используется для управления доступностью элементов на веб-странице. Он скрывает элемент от экранных читалок, но не влияет на его видимость для пользователей.

➡️ Пример:

<!-- Иконка, не нужная для экранных читалок -->
<span aria-hidden="true">🔔</span>

<!-- Видимый, но скрытый от читалок текст -->
<p aria-hidden="true">Этот текст будет проигнорирован</p>

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

• aria-hidden="true" предотвращает озвучивание декоративных элементов.
• Используется для скрытия дублирующегося контента, например, иконок, дублирующих текст.
• Улучшает доступность и делает сайты более удобными для пользователей с ограниченными возможностями.

Атрибут aria-hidden помогает создавать семантически корректные интерфейсы, соответствующие стандартам Web Accessibility (WCAG).

CodeBase | Frontend | #Основы

⚙️ Что такое атрибут 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 | #Основы