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

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

Атрибут autocomplete управляет автозаполнением форм в браузере. Он позволяет указывать, должны ли поля формы предлагать сохранённые данные (например, логины, адреса, номера карт), тем самым ускоряя ввод для пользователей.

➡️ Пример:

<form autocomplete="on">
  <label>
    Имя:
    <input type="text" name="name" autocomplete="name">
  </label>
  <label>
    Email:
    <input type="email" name="email" autocomplete="email">
  </label>
</form>

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

• autocomplete="on" — включает автозаполнение (по умолчанию).
• autocomplete="off" — отключает его для конкретного поля или всей формы.
• Можно указать тип данных (email, name, street-address и т. д.) для более точной подстановки.
• Улучшает UX, особенно при повторном заполнении форм.

Грамотное использование autocomplete делает формы более быстрыми и удобными для пользователей.

CodeBase | Frontend | #Основы

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

Атрибут required используется в формах HTML для обозначения обязательных полей. Он предотвращает отправку формы, если поле не заполнено, и помогает валидировать данные без JavaScript.

➡️ Пример:

<form>
  <label>
    Email:
    <input type="email" required>
  </label>
  <button type="submit">Отправить</button>
</form>

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

• required указывает браузеру, что поле не должно быть пустым.
• Работает без JavaScript, улучшая поведение форм "из коробки".
• Показывает встроенные ошибки валидации, улучшая UX.
• Часто используется вместе с другими атрибутами: type, pattern, minlength.

Атрибут required — это простой и надёжный способ сделать формы интерактивнее и безопаснее.

CodeBase | Frontend | #Основы

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

Атрибут disabled делает элемент формы неактивным. Такой элемент не реагирует на действия пользователя и не отправляется вместе с формой.

➡️ Пример:

<form>
  <label>
    Email:
    <input type="email" disabled>
  </label>
  <button type="submit">Отправить</button>
</form>

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

• disabled блокирует ввод и клики по элементу
• Поле с disabled не попадёт в данные формы при отправке
• Полезно для временного отключения полей, кнопок и выпадающих списков
• Можно использовать с JavaScript, чтобы включать/выключать поля динамически.

Атрибут disabled помогает контролировать поведение формы и предотвращать действия пользователя в ненужный момент.

CodeBase | Frontend | #Основы