Как сделать кнопку ссылкой
Оформлять ссылку как стандартную кнопку нежелательно: ссылка по определению указывает на ресурс, а нажатие кнопки обычно инициирует действие. Но если задача возникла, имеет смысл хотя бы решать её правильно.
Правильно
Синтаксически корректное («валидное») и кроссбраузерное решение — заключить кнопку в простейшую форму. В атрибут action
формы следует поместить URL-адрес, на который должна вести «кнопка-ссылка». Для работы формы в устаревших браузерах (IE8 и ниже) следует добавить кнопке атрибут type=
:
<form action="/example/">
<button type="submit">Кнопка-ссылка</button>
</form>
«Кнопка-ссылка» в примере ведёт на страницу с адресом /example/
.
Если требуется открывать ссылку в новом окне или фрейме, можно, как и у обычных ссылок, использовать атрибут target
элемента FORM
:
<form action="/example/" target="_blank">
Демо
Строка запроса
Строка запроса — часть URL-адреса после первого вопросительного знака, содержащая GET-параметры в виде пар name=value
(имя=значение
), разделённых символом &
.
Если адрес, на который должна указывать ссылка, содержит строку запроса, следует для каждого GET-параметра добавить в форму скрытое поле с соответствующими атрибутами name
и value
:
<form action="/example/">
<input type="hidden" name="foo" value="bar" />
<input type="hidden" name="lorem" value="ipsum" />
<button type="submit">Кнопка-ссылка</button>
</form>
Данная форма ведёт на страницу /example/?foo=bar&lorem=ipsum
.
Chromium/
В браузерах на основе движков Chromium/
<form action="/example/">
<button type="submit">Кнопка-ссылка</button>
</form>
приведёт на адрес /example/?
вместо ожидаемого /example/
.
Кент Тамура (Kent Tamura) из команды разработчиков Chromium говорит, что это соответствует текущим спецификациям HTML и URL.
Обойти это можно с помощью автоматического серверного перенаправления (редиректа) с адреса, оканчивающегося вопросительным знаком, на такой же адрес без воспросительного знака.
Ограничения по сравнению с реальной ссылкой
- У пользователя нет возможности узнать, куда ведёт ссылка-кнопка, до щелчка по ней.
- Пользователь не может по своему желанию открыть ссылку-кнопку в новой вкладке или в новом окне.
Неправильно
Кнопка внутри ссылки
Нередко элемент BUTTON
просто помещают внутрь ссылки:
<a href="/example/"><button>Кнопка-ссылка</button></a>
Это работает во всех современных браузерах, но согласно HTML5 это синтаксически некорректно («невалидно»): ссылка не должна содержать интерактивные элементы. Кроме того, такая ссылка не работает в Internet Explorer (IE) ниже 9-й версии.
Демо
Кнопка с JS-обработчиком щелчка
Порой используется кнопка с JavaScript-обработчиком события щелчка:
<button>Кнопка-ссылка</button>
Но такая кнопка не работает при выключенном JavaScript, её невозможно открыть в новой вкладке или новом окне, и возможны проблемы с индексацией поисковиками, не исполняющими JavaScript-код.
Демо
Нестандартные расширения CSS
Описанные ниже возможности нестандартные, и использовать их не рекомендуется.
Firefox и Chromium
Firefox версий 81 и ниже и браузеры на основе движка Chromium (Chrome, Opera 15+, Vivaldi, Яндекс.Браузер) прошлых версий поддерживали нестандартные префиксированные варианты свойства appearance
, значение button
которых позволяло оформить как кнопку произвольный элемент, в том числе ссылку:
A.example {
-moz-appearance: button; /* Firefox */
-webkit-appearance: button; /* Chromium */
}
Демо
Мелодичная инструментальная музыка
Internet Explorer, Edge и спецификация
В браузерах Microsoft — Internet Explorer (IE) и Edge — возможность недоступна. В спецификации CSS Basic User Interface Module Level 4 значение button
свойства appearance
не предусмотрено.
Ссылка — это ссылка, кнопка — это кнопка
Мы используем a
без href
, создаем для ссылок пользовательские функции onClick
или используем кнопки для перехода на другие страницы.
В этой небольшой статье мы постараемся дать разъяснения, как использовать ссылки и кнопки для веб-ресурсов, чтобы повысить их доступность и улучшить качество SEO.
Ссылки не должны быть кнопками
Ссылки используются для переходов куда-либо.
Например, если пользователь хочет перейти на новую страницу сайта, Вы должны использовать ссылку. Браузер не будет корректно отображать ссылку без атрибута href
. Поисковые системы сканируют только те ссылки a
, которые имеют атрибут href
Использование тега a
без href
или использование в качестве ссылки другого тега, оказывает отрицательное влияние на SEO и доступность.
Вот примеры ссылок, которые Google будет сканировать:
<a href="www.google.com">Хорошая ссылка 1</a> <a href="/newpage/file">Хорошая ссылка 2</a>
А вот примеры ссылок, которые Google сканировать не будет:
<a>Плохая ссылка 1</a> <a go="goto('www.google.com')">Плохая сылка 2</a>
Это означает, что при нажатии на ссылку не должны выполняться никакие действия на стороне сервера, такие как: сохранение, изменение или удаление данных. Исключение составляет сбор статистики.
Кнопки не должны быть ссылками
Кнопки используются для изменения состояний. Они не должны использоваться для перехода на другие сайты, за исключением кнопки
в формах.
Вот примеры корректного использования кнопок:
<button >Сохранить</button> <button href="/newpage/file">Перейти</button>
А вот примеры неверного использования кнопок:
<button>Перейти</button> <button href="www. google.com">Перейти</button>
Кнопки могут использоваться для модификации динамического содержимого сайта.
ARIA
The Web Accessibility Initiative’s Accessible Rich Internet Applications Suite (WIA-ARIA или ARIA) — набор инструментов, позовляющих сделать веб-контент более доступным.
Благодаря ARIA для всех тегов появился атрибут aria-role
, преобразующий их семантическую роль для улучшения воспроиятия с помощью специальных возможностей (assistive technologies).
<div tabindex="0" role="button"> Это div, который работает как button </div> <a tabindex="0" role="button"> Это ссылка, которая работает как button </a>
tabindex="0"
— может иметь в качестве своего значения любое положительное целое число от 0 до 32767 и определяет порядок перехода при нажатии кнопки
или ее эквивалента на специальном устройстве.
В любом случае семантическая HTML разметка должна преобладать над ARIA.
Спасибо за внимание.
Кнопка против Ссылки | Введение в специальные возможности
Основная идея Интернета — когда Тим Бернерс Ли изобрел HTML в 1989 году — заключалась в соединении документов. Мы используем гиперссылки для перехода от одного документа к другому. Мы уже говорили о важности хорошо написанной ссылки, а также о правильном контрасте. Теперь давайте посмотрим на общий вид.
Оглядевшись в Интернете, вы заметите, что на большинстве современных страниц ссылки и кнопки перепутаны. Вопрос в том, почему? Фреймворки CSS дают вам возможность оформлять ссылки как кнопки.
В знаменитом Bootstrap есть селектор класса CSS, который называется btn. Вы можете применить этот селектор к кнопке и к ссылке. Это сделает оба похожими, хотя это разные элементы управления. Вы можете видеть, что в каждом фреймворке вы можете применить что-то вроде .button
или .btn
и ваша ссылка будет замаскирована под кнопку. Может быть, это и не так уж плохо, но ссылка и кнопка — совершенно разные вещи. Они ведут себя по-разному. Так почему они должны выглядеть одинаково?
Простой набор правил
Ссылка является фокусируемой и может быть вызвана клавишей ввода. Ссылка перенаправит вас на новую страницу или в раздел на той же странице. В ротаторе VoiceOver он также будет собран в окне «Ссылки».
Кнопка также может быть сфокусирована и может быть вызвана клавишей пробела. Кнопка запускает действие, такое как открытие или закрытие чего-либо. Или отправить форму. В большинстве случаев для этого используется JavaScript. В ротаторе VoiceOver он будет собран в окне «Элементы управления формой». Одно это о чем-то говорит.
В чем проблема?
Ожидания. Это не обязательно о слепых людях. Напротив. Давайте подумаем о людях, посещающих вашу страницу и использующих клавиатуру для навигации по вашему контенту. Они видят «кнопку» и ожидают, что что-то произойдет. Они ждут, когда произойдет какое-то действие — например, отправка формы, открытие слоя, закрытие слоя или открытие меню. Внезапно они перенаправляются на новую страницу. Хорошо, они, вероятно, не откроют страницу, потому что они используют клавишу пробела. Но ничего не происходит. Не расстраивайте своих пользователей.
И, пожалуйста, объясните мне, с какой стати кто-то должен делать что-то вроде этого: Текст
Есть отличная ссылка. Мы все их любим. Они являются «соком» Интернета. Но кто-то поместил на него .button
только для того, чтобы добавить .is-text
сверху, поэтому ссылка изменится с подчеркнутого текста на кнопку и снова будет выглядеть как подчеркнутая ссылка. Что происходит?!
Заключение
Не путайте пользователей. Ссылка должна выглядеть как ссылка, а не как какой-либо другой элемент, в данном случае как кнопка. Ссылки и кнопки могут «ощущаться» одинаковыми для обычных пользователей. Они будут использовать свою мышь, чтобы навести курсор на ссылку или кнопку и щелкнуть по ним своей мышью. А вот при использовании клавиатуры и маскировке ссылки под кнопку дело обречено закончиться плачевно (ну, не получится так, как планировалось, это точно.
Я понял. Вы хотите что-то продать. Вам нужно что-то, что кричит: «Нажми на меня!» Это нормально при нажатии на кнопку. Я ожидаю немедленных действий. Я не хочу, чтобы меня перенаправляли на новую страницу. Может быть, даже маркетинговая страница с большим количеством копий на ней. Это противоположно фразе «Купи меня сейчас!»
Как дизайнер, вы должны попытаться придумать другой способ привлечь внимание пользователя. Как разработчик, вы всегда должны думать о назначении элемента, а затем использовать правильный HTML для достижения этой цели.
Пример видео
В этом видео показана разница между кнопкой, ссылкой и другой ссылкой, оформленной так, чтобы она выглядела как кнопка. Мы рассмотрим три примера в ChromeVox, VoiceOver и Экранном дикторе.
CSS может помочь улучшить ваш HTML⁉ — эпизод 2: кнопки и ссылки.
Часть 2 по использованию CSS для улучшения нашего HTML!
Во второй части этой серии мы рассмотрим, как мы можем использовать CSS для обеспечения (и обеспечения соблюдения) того, что мы используем
и
элементов правильно… вы будете удивлены, как много разработчиков ошибаются!
Если вы пропустили первую часть, вам может понадобиться быстро прочитать ее, чтобы вы поняли ключевые понятия, поскольку я не буду подробно повторять их здесь:
Все поняли? Большой!
Прежде чем мы начнем вторую часть, стоит упомянуть (повторить), что эта концепция основана на двух таблицах стилей.
Один для производства (и разработки) и один для разработки только (тот, который содержит сообщения об ошибках).
В скриптах я указал, какие стили вы будете использовать в своей таблице стилей для производства , а какие — в таблице стилей для разработки !
Хорошо, с этим напоминанием, давайте начнем!
Кнопка есть кнопка!
Я знаю, что продолжаю повторять это, и это звучит как заезженная пластинка, но кнопка есть кнопка!
Видишь, я говорил тебе, что продолжаю повторять это!
Но что, если бы мы могли привести наших разработчиков к этому логическому заключению с помощью CSS?
Во-первых, мы можем сделать так, чтобы наш . btn
class работал только с
.
кнопка.кнопка{}Войти в полноэкранный режимВыйти из полноэкранного режима
Попробуйте использовать класс .btn
на чем-то еще, и это просто не сработает!
но мы можем сделать лучше!
Что, если мы также можем немного предупредить нашу команду, чтобы они знали, что они использовали неправильный элемент?
.btn:not(button){/* неправильное выделение ошибки элемента */}Войти в полноэкранный режимВыйти из полноэкранного режима
Значимые предупреждения и сообщения об ошибках
Теперь, хотя добавление контуров к неправильным вещам — это здорово, это не очень информативно.
К счастью, это тоже можно исправить!
Используя :после
, мы можем вставить сообщение об ошибке
Таким образом, мы получаем селектор для добавления контура и другой селектор для добавления предупреждения, который тот же самый, но с использованием :после псевдоселектора
.
Используя свойство content
, мы можем добавить пользовательское сообщение об ошибке!
.btn:not(button) /* контуры */ .btn:not(button):after /* сообщение об ошибке */Войти в полноэкранный режимВыйти из полноэкранного режима
Пример для кнопок
В этом примере у нас есть настоящая кнопка и поддельная кнопка, созданная с помощью Обратите внимание, как работает настоящая кнопка, а фальшивая кнопка не имеет стиля и сообщения об ошибке! Я бы сказал, что для большинства сайтов мы можем пойти еще дальше и полностью избавиться от класса Это помогает с согласованностью, выглядит аккуратнее и обеспечивает соблюдение нашей политики На данный момент нам даже не нужна проверка ошибок, так как мы можем получить стиль только для Мы можем сделать это, используя элемент в качестве селектора И это верное замечание, и в настоящее время вы правы! Однако мы можем переработать наш селектор из первой части, чтобы получить Это означает, что мы должны снова ввести наши проверки ошибок, но на этот раз, чтобы убедиться, что мы используем только класс Это поднимает интересный вопрос, хотим ли мы, чтобы ошибка показывала, есть ли у нас класс Если мы сделаем , тогда нашему селектору ошибок просто нужно небольшое изменение Это добавит наши сообщения об ошибках в Поскольку класс Опять же, сила CSS делает это относительно простым, мы можем добавить несколько элементов в наш селектор Это говорит:- Собрав все вместе, мы получим следующее: Выглядит здорово, но мы можем пойти даже дальше! Теперь, когда мы разрешили добавлять класс Ужасный Используя ту же систему использования Примечание: Мы можем сделать это намного лучше, создав отдельное сообщение в зависимости от того, является ли проблема отсутствием Как указал @ashleyjsheridan, вполне допустимо иметь якорь без Таким образом, когда я помечал якоря с отсутствующими или пустыми атрибутами Вместо этого их следует понизить до "предупреждений" только для того, чтобы выявить ошибки. Кроме того, это означает, что если вы используете В целом, это не имеет значения, поскольку таблица стилей разработки не повлияет на производство, может быть просто немного раздражающей, если вы выполняете такие действия, как динамическое добавление Дополнительно указывают: Также стоит рассмотреть 3 типа кнопок: кнопка, отправить и сбросить. Это отличный момент, поэтому, чтобы добавить те, которые вы бы обновили селектор до цели: Сделайте еще один шаг вперед!
.btn
на наших кнопках!
для кнопок!
! кнопка{}
! кнопка{
набивка: 0,75 бэр;
цвет фона: #333;
цвет: #fff;
поле: 2re 0;
граница: 0;
радиус границы: 0,3 бэр;
ширина: 100%;
}
Войти в полноэкранный режимВыйти из полноэкранного режима Это здорово, но мы часто оформляем якоря как кнопки!
.бтн
класс только на анкерах (<а>
)! кнопка,
a.btn{/* наши стили для кнопок! */}
Войти в полноэкранный режимВыйти из полноэкранного режима
на якоре! .btn
на
? .btn:not(a){}
.btn: не (а): после {}
Войти в полноэкранный режимВыйти из полноэкранного режима <кнопка
, что может сбивать с толку. .btn
на
не принесет никакого вреда (поскольку у нас все равно нет действительного селектора для него), я думаю, что в этом случае лучше не показывать сообщения об ошибках. :не
! .btn: не (кнопка) {}
.btn: не (кнопка): после {}
Войти в полноэкранный режимВыйти из полноэкранного режима .btn
:not()
) и
), кнопка
Пример с якорями
Но нам нужны только действительные якоря
. btn
к якорям, мы открыли еще одну проблему! или
(и пока мы на нем пустой
href
или отсутствующий href
тоже!) javascript: void()
, таким образом мы можем захватить все JavaScript href
независимо от того, какую функцию они вызывают! Пример допустимых якорей!
: после
мы также можем добавлять сообщения к нашим якорям! href
, bad 9="javascript:" i]:after{content: "обнаружен анти-шаблон с использованием javascript в href"} Войти в полноэкранный режимВыйти из полноэкранного режима Дополнительные вещи, чтобы упомянуть
href
. href
как ошибки, это было ошибкой с моей стороны.
по какой-либо причине, это будет только предупреждение (хотя это довольно устаревший способ сделать что-то, поскольку вы можете просто дать элементу идентификатор
и ссылку на него). href
к существующему якорю. кнопка,
а.