Создание кнопки-ссылки в HTML: решение доступности

Быстрый ответ

Превращаем ссылку (<a>) в кнопку, с применением немного CSS:

<a href="https://www.example.com" class="button-style">Ссылка-кнопка</a>

Оформим нашу ссылку как кнопку, используя CSS:

.button-style {
  display: inline-block;
  padding: 10px 15px;
  background: #f2f2f2;
  border: 1px solid #000; /* В ожидании набирающего популярность темного режима, рамка черного цвета */
  color: #333;
  text-decoration: none;
  text-align: center;
}

.button-style:hover, .button-style:focus {
  background: #e2e2f2; /* Эффект при наведении — дополнительное оформление */
}

Таким образом, мы создаем не просто "ссылку, выглядящую как кнопка", а полноценную кнопку со стилем.

Секреты создания кнопок-ссылок

Форма в формате кнопки

При работе с отправкой форм, возможно использовать форму с кнопкой, которая "отправляет" данные, перенаправляя на URL-адрес, как настоящий профи:

<form action="https://www.example.com" method="get">
   <button type="submit">На главную!</button>
</form>

Подробнее об этом расскажет наш спикер на видео

С применением Bootstrap

Для облегчения задачи можно воспользоваться мощью Bootstrap, применив CSS-классы btn btn-primary:

<a href="https://www.example.com" class="btn btn-primary">Я представитель Bootstrap</a>

Убедитесь, что используете подходящую версию Bootstrap. Для более детальной настройки обращайтесь к документации Bootstrap – это настоящее шедевр посвящённое CSS.

JavaScript: гигант среди кнопок-ссылок

Создание кнопки переадресации на указанный URL с помощью JavaScript. Никакие дополнительные требования не предъявляются:

<button onclick="window.location.href='https://www.example.com';">На вертолёт!</button>

Будьте внимательны при выполлении неоднозначных действий, когда кнопка находится внутри формы.

Визуализация

Так выглядит визуальное представление с использованием символов дверной кнопки (🔔) и дома (🏠):

<button> = Дверной звонок (🔔)

<a href="..."> = Дом (🏠)

<-- Клик на кнопке (👆)

<button onclick="location.href='https://www.example.com';">Волшебная дверь, открывайся!</button>

При нажатии на кнопку в виде звонка (🔔), вы попадаете в дом (🏠). Кнопка действует как вход, делая это очень похожим на действие ссылки!

Больше, чем просто глаз радует

Стилизация кнопки с использованием CSS

С помощью CSS, стандартная ссылка преобразуется в привлекательный кликабельный элемент:

a.as-button {
  display: inline-block;
  text-align: center;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 4px;
  background-color: #007bff; /* Такой оттенок — отличное украшение интерфейса */
  color: #ffffff;
  border: 1px solid transparent;
}

a.as-button:hover {
  background-color: #0056b3; /* Поражающий эффект при наведении */
}

Кнопка, которая знает своё предназначение

Кнопка событием onclick становится изысканной заменой, обеспечивающей интуитивно понятные действия:

Доступность и кнопки

При использовании атрибутов ARIA нужно быть уверенным, что кнопки в форме ссылок указывают на свое назначение.

Полезные материалы

1. <button>: элемент кнопки – HTML: HTML (HyperText Markup Language) | MDN
2. Как мне создать HTML-ссылку, которая будет действовать как кнопка? – Stack Overflow
3. Чек-лист – Проект A11Y
4. Accessibility Insights – button-name
5. Практика применения CSS – WebAIM