Первое правило: отсутствие ARIA лучше плохой ARIA
Почему нативный HTML почти всегда оказывается лучшим выбором
«Первое правило: отсутствие ARIA лучше плохой ARIA» — бесплатный урок Web Accessibility Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Web Accessibility Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Web Accessibility Academy содержит 4 уроков всего.
Что на самом деле представляет собой ARIA
ARIA — это набор атрибутов HTML, сообщающий вспомогательным технологиям, чем является элемент и что он делает, когда одной разметки недостаточно.
ARIA не изменяет поведение
Но есть важный нюанс: ARIA изменяет только то, что объявляется. Она сама по себе не добавляет обработку щелчков, фокус или поддержку клавиатуры.
<div role="button">Save</div>
<!-- looks like a button, does nothing -->Первое правило ARIA
Официальное первое правило: если встроенный элемент HTML может выполнить задачу, используйте его, вместо того чтобы воссоздавать его с помощью ARIA.
Встроенный элемент уже полностью настроен
Настоящая кнопка получает фокус, срабатывает по Enter и пробелу и бесплатно объявляет свою роль. Вам не нужно писать всё это самостоятельно.
<button>Save</button>
<!-- focus, keyboard, role: all built in -->Почему неправильная ARIA хуже
Неправильная роль активно вводит пользователей в заблуждение. Плохая ARIA лучше отсутствия ARIA только с точки зрения масштаба вреда: она может скрыть содержимое или описать его неверно.
Ловушка переопределения
ARIA переопределяет нативную семантику. Добавьте role=presentation к заголовку — и программы чтения с экрана перестанут воспринимать его как заголовок.
<h2 role="presentation">Pricing</h2>
<!-- no longer a heading to AT -->Три типа информации, которые предоставляет ARIA
ARIA предоставляет ровно три типа информации: роль (что это такое), состояния и свойства. Это весь набор инструментов.
ARIA не влияет на CSS
Если задать элементу aria-hidden, он будет скрыт от программ чтения с экрана, но останется полностью видимым на экране. Эти два уровня независимы.
<span aria-hidden="true">decorative star</span>
<!-- seen, not heard -->Когда стоит использовать ARIA
Используйте ARIA, когда подходящего нативного элемента нет, например для tablist или собственного ползунка. Затем применяйте её точно по назначению и проводите тестирование.
Используйте ARIA вместе с JavaScript
Если необходимо создать собственный виджет, ARIA и JavaScript должны использоваться вместе. ARIA сообщает, что это за элемент, а JS обеспечивает логику фокуса и клавиатуры.
Меньше — значит больше
На лучшей доступной странице часто используется совсем немного ARIA. Сначала применяйте семантический HTML, а ARIA — только для восполнения оставшихся пробелов.
Быстрая проверка
Вам нужен элемент управления «Сохранить», по которому можно щёлкнуть. Какой вариант наиболее доступен?
Итоги: разумное использование ARIA
Вы узнали, что ARIA описывает, но никогда не задаёт поведение. Предпочитайте нативный HTML, добавляйте ARIA только для восполнения реальных пробелов и каждый раз проводите тестирование. 🎯
Часто задаваемые вопросы
Урок «Первое правило: отсутствие ARIA лучше плохой ARIA» бесплатный?
Да — полный текст урока «Первое правило: отсутствие ARIA лучше плохой ARIA» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Web Accessibility Academy, подпишись на CoddyKit PRO. Курс Web Accessibility Academy содержит 4 уроков всего.
Чему я научусь в уроке «Первое правило: отсутствие ARIA лучше плохой ARIA»?
Почему нативный HTML почти всегда оказывается лучшим выбором Ты практикуешь Web Accessibility Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Web Accessibility Academy?
Предыдущий опыт не требуется. Web Accessibility Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Первое правило: отсутствие ARIA лучше плохой ARIA»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Web Accessibility Academy?
Да. Каждый урок Web Accessibility Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Первое правило: отсутствие ARIA лучше плохой ARIA
- Роли определяют, чем является объект
- Состояния и свойства: expanded, checked, disabled
- Чтение дерева доступности для отладки ARIA