Нативный или пользовательский элемент: когда выбрать настоящий
Почему настоящая кнопка всегда лучше стилизованного span
«Нативный или пользовательский элемент: когда выбрать настоящий» — бесплатный урок Web Accessibility Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Web Accessibility Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Web Accessibility Academy содержит 4 уроков всего.
Главный выбор
Перед любым элементом управления стоит один выбор: использовать встроенный элемент HTML или создавать пользовательский вручную. Встроенный почти всегда лучше.
Настоящая кнопка просто работает
Встроенная button получает фокус, нажимается мышью, клавиатурой и касанием, а также правильно объявляется. Вы пишете один тег, а платформа делает всё остальное.
<button>Buy now</button>Стилизованный span так не умеет
Придайте span вид кнопки — и у него всё равно не будет роли, фокуса или поддержки клавиатуры. Он лишь вводит глаз в заблуждение.
<span class="button">Buy now</span>Цена пользовательского решения
Чтобы пользовательский элемент управления работал, необходимо добавить роль, tabindex и обработчики клавиш Enter и Space. Это много кода ради имитации одного тега.
<span role="button" tabindex="0">Buy now</span>И кое-что Вы забудете
Даже в тщательно сделанных пользовательских элементах управления не учитываются особые случаи: индикаторы фокуса, отключённые состояния, сенсорное взаимодействие. Нативный элемент уже обрабатывает их все.
Нативные элементы — это больше, чем кнопки
Это относится ко всей платформе. Настоящие select, флажок или details обеспечивают поведение и доступность, с которыми имитация на основе div никогда полностью не сравнится.
<input type="checkbox"> Remember meФормы любят нативные элементы
Нативные элементы управления формы отправляются вместе с form, самостоятельно проверяют данные и автоматически связываются с подписью. Воссоздавать всё это вручную редко стоит.
Когда пользовательский элемент оправдан
Используйте пользовательский элемент только тогда, когда для нужного шаблона нет нативного элемента, например для интерфейса с вкладками или дерева. Затем тщательно следуйте проверенному шаблону разработки.
Свободно стилизуйте нативные элементы
Боитесь, что настоящая кнопка выглядит слишком просто? Вы можете активно стилизовать нативные элементы с помощью CSS. Сохраните семантику, а внешний вид измените как угодно.
Меньше кода, больше надёжности
Выбирая настоящий элемент, Вы пишете меньше JavaScript, допускаете меньше ошибок и бесплатно получаете элемент управления, который сохраняет работоспособность при обновлениях браузеров и вспомогательных технологий.
Правило по умолчанию
Сделайте это правилом по умолчанию: сначала используйте нативные элементы, а пользовательские — только в крайнем случае. Веб-платформа даёт огромные возможности для доступности, поэтому позвольте ей выполнять эту работу.
Быстрая проверка
Давайте решим, использовать нативный или пользовательский элемент.
Итоги
Сначала выбирайте нативные элементы: настоящая кнопка или поле ввода бесплатно обеспечивают фокус, поддержку клавиш и семантику. Используйте пользовательский элемент только при отсутствии подходящего нативного и свободно стилизуйте нативные элементы. 🎉
Изучай HTML с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 30
- Уроки
- 120
Часто задаваемые вопросы
Урок «Нативный или пользовательский элемент: когда выбрать настоящий» бесплатный?
Да — полный текст урока «Нативный или пользовательский элемент: когда выбрать настоящий» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Web Accessibility Academy, подпишись на CoddyKit PRO. Курс Web Accessibility Academy содержит 4 уроков всего.
Чему я научусь в уроке «Нативный или пользовательский элемент: когда выбрать настоящий»?
Почему настоящая кнопка всегда лучше стилизованного span Ты практикуешь Web Accessibility Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Web Accessibility Academy?
Предыдущий опыт не требуется. Web Accessibility Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Нативный или пользовательский элемент: когда выбрать настоящий»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Web Accessibility Academy?
Да. Каждый урок Web Accessibility Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- У тегов есть смысл: почему суп из div не работает
- Текстовые элементы: абзацы, списки и выделение
- Дерево доступности: что слышат программы чтения с экрана
- Нативный или пользовательский элемент: когда выбрать настоящий