Доступность Интерфейсов

Памятки ч.1

Основные клавиши для людей с ограничениями:

Tab вперёд
Shift tab назад
Space нажать (для интерактивных объектов)
Enter перейти (для ссылок)

Порядок считывания по коду определяется по положение в html коде.

Памятки по порядку элементов:

Все :hover должны быть так же и :focus.
Не отключать :focus, лучше его видоизменять и делать лучше.
:focus идёт по рядку в html коде.
Острожнее со свойствами меняющими порядок элементов.
Только интерактивные элементы в html коде.

Как попасть в порядок:

tabindex управляет фокусом.
tabindex="0" добавляет в порядок.
tabindex="-1" делает интерактивным.
tabindex больше нуля, он проблемный.

Как выбрать между кнопкой или ссылкой:

Это <button>
Если нет, то <a href="...">

Ссылкой является надобность переходить на другую страницу браузера.

Элементы fieldset и legend:

fieldset - используется в обёртывание полей.

legend - выступает заголовком.

Скрин ридер озвучивает: заголовок + ячейка формы.

Лэйблы:

Содержимое элемента: <a href>Главная</a>
Заголовок группы: <legend>Адрес</legend>
Связанные элементы: <label for="input">Имя</label>
Спрятанный элемент: <span class="visually-hidden">
Добавленный лейбл: <nav aria-label="Содержимое">

Никогда не отключайте outline. Данный элемент важен, для того чтобы пользователь знал какой элемент находится в фокусе.

Самый верный способ прятать всплывающие элементы - это visibility-hidden его видят скрин ридеры, также элементы могу взаимодействовать и наследоваться.