👨‍💻Сегодня немного практических примеров👩‍💻

1️⃣Дизайнер нарисовал поп-ап с каким-то контентом и классическим крестиком в углу, чтобы его можно было закрыть. См. первый пример — в листинге реализация кнопки с крестиком, которая не нарушает принципы доступности.

2️⃣В одном из прошлых постов я показывал пример формы с нативными элементами. Теперь представим ситуацию, когда мы точно знаем, что по тем или иным причинам мы не можем использовать нативные элементы, поэтому все контролы мы будем кастомить. При помощи aria-атрибутов мы можем это реализовать, не ухудшая их доступность. Однако следует помнить, что теперь абсолютно всё поведение элементов вам нужно будет реализовывать при помощи javascript.

3️⃣Такая структура, как табы, не имеет нативного семантического представления. Кроме того было бы логично представить табы как набор секций со своей структурой контента внутри, переключаемых кнопками. При помощи role-атрибутов мы можем добавить им семантики и повысить доступность.

#rdclr_frontend