Ссылки ведут в места, кнопки выполняют действия
Одно правило, которое помогает решить почти любой случай
«Ссылки ведут в места, кнопки выполняют действия» — бесплатный урок Web Accessibility Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Web Accessibility Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Web Accessibility Academy содержит 4 уроков всего.
Единственное правило
Вот правило, которое решает почти любой случай: ссылка ведёт куда-то, а кнопка выполняет действие прямо здесь. 🧭
Что такое ссылка
Ссылка выполняет навигацию. При нажатии она изменяет страницу или URL, например открывает другую статью или новый раздел.
<a href="/pricing">See pricing</a>Что такое кнопка
Кнопка выполняет действие на текущей странице: отправляет форму, открывает меню или переключает настройку, не покидая страницу.
<button type="button">Add to cart</button>Почему это важно
Программы чтения с экрана вслух объявляют роль элемента. Пользователи слышат слово «ссылка» или «кнопка», поэтому правильный элемент заранее формирует правильное ожидание.
Разные клавиши — разные задачи
Это не просто вопрос внешнего вида. Кнопка срабатывает по пробелу или Enter, а ссылка активируется только по Enter. Клавиши соответствуют роли элемента.
Быстрая проверка
Задайте один вопрос: этот элемент управления изменяет моё местоположение или содержимое экрана? Навигация означает ссылку, а действие — кнопку.
Открытие в новой вкладке
Если элемент управления имеет смысл открыть в новой вкладке или добавить в закладки, это навигация, поэтому используйте настоящую ссылку с href.
Внешний вид не определяет роль
Стилизация не меняет смысл. Кнопка может выглядеть как ссылка, а ссылка — как кнопка, но именно элемент определяет роль.
Распространённая ошибка
Разработчики берут стилизованный div или span и добавляют обработчик нажатия. Внешне всё выглядит нормально, но у элемента нет роли и поддержки клавиатуры.
<div class="btn" onclick="save()">Save</div>Отправка формы
Чтобы отправить форму, используйте кнопку с типом submit. Это действие, а не навигация, поэтому ссылка здесь была бы неправильным выбором.
<button type="submit">Sign up</button>Переход на другую страницу
Чтобы отправить пользователя на страницу контактов, используйте ссылку. Это обычная навигация, и кнопка ввела бы всех в заблуждение.
<a href="/contact">Contact us</a>Быстрая проверка
Вы добавляете элемент управления, который открывает меню, не покидая страницу. Какой элемент подходит?
Итоги
Ссылки ведут куда-то, кнопки что-то делают. Соотнесите элемент с намерением — и получите правильную роль, правильные клавиши и довольных пользователей. 🎉
Часто задаваемые вопросы
Урок «Ссылки ведут в места, кнопки выполняют действия» бесплатный?
Да — полный текст урока «Ссылки ведут в места, кнопки выполняют действия» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Web Accessibility Academy, подпишись на CoddyKit PRO. Курс Web Accessibility Academy содержит 4 уроков всего.
Чему я научусь в уроке «Ссылки ведут в места, кнопки выполняют действия»?
Одно правило, которое помогает решить почти любой случай Ты практикуешь Web Accessibility Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Web Accessibility Academy?
Предыдущий опыт не требуется. Web Accessibility Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Ссылки ведут в места, кнопки выполняют действия»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Web Accessibility Academy?
Да. Каждый урок Web Accessibility Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Ссылки ведут в места, кнопки выполняют действия
- Понятный текст ссылки вне контекста
- Кнопки, сообщающие о своём действии
- Антипаттерн якоря без href