Пишем ДОСТУПНЫЙ компонент табов. Атрибуты WAI-ARIA • Frontend Accessibility 2024

• ARIA помогает разработчикам создавать сложные компоненты пользовательского интерфейса.  

• Семантика HTML влияет на доступность веб-приложений.  

• ARIA предоставляет дополнительную информацию для скринридеров.  

• ARIA расшифровывается как Web Accessibility Initiative.  

• Это спецификация, созданная консорциумом W3C.  

• Атрибуты ARIA делятся на роли, свойства и состояния.  

• Роли ARIA дублируют семантическую ценность структурных элементов.  

• Примеры ролей: list, nav, form.  

• Некоторые роли описывают специфические компоненты интерфейса.  

• Свойства ARIA придают элементам дополнительные значения.  

• Примеры: required, hidden.  

• Эти атрибуты статичны и не меняются на протяжении жизненного цикла приложения.  

• Состояния ARIA указывают на текущее состояние элемента.  

• Примеры: invalid, selected.  

• Эти атрибуты могут изменяться с помощью JavaScript.  

• Отсутствие ARIA атрибутов лучше, чем некорректные.  

• Не меняйте семантику существующих HTML элементов без необходимости.  

• Дополняйте функционалом элементы с нестандартными ролями.  

• Пример: реализация компонента классических таббов.  

• Разметка и атрибуты для обеспечения доступности.  

• Пример разметки и атрибутов для кнопок переключения контента.  

• Стили: кнопка переключения таба при наличии класса active перекрашивается и становится не кликабельной.  

• JavaScript: оптимизация работы скрипта и скрытие неактивных панелей.  

• Обсуждение метода updateUI для обновления атрибутов кнопок и вкладок.  

• Добавление класса active к активной вкладке и удаление его для остальных.  

• Обновление атрибута aria-selected и tap-index для кнопок.  

• Добавление атрибута tabIndex к элементам tabs-content для фокусировки.  

• Учет интересов пользователей с нестандартными настройками контрастности.  

• Использование медиа-запроса для определения повышенной контрастности.  

• Задание толщины границ для активных кнопок.  

• Использование свойства outline-offset для смещения обводки.  

• Оптимальное значение outline-offset для обводки вокруг элемента.  

• Ограничение переключения кнопок с клавиатуры.  

• Обеспечение возможности перехода на последнюю и первую вкладку.  

• Реализация через обработку событий keydown и полей content и meta.  

• Компонент tabs-bar удовлетворяет принципам цифровой доступности.  

• Рекомендации по реализации нестандартных компонентов.  

• Обзор паттернов и чек-лист цифровой доступности на следующем занятии.