Разное

Css ссылки как кнопки: Ссылка как кнопка | htmlbook.ru

27.07.2023

Содержание

Как сделать кнопку ссылкой

Оформлять ссылку как стандартную кнопку нежелательно: ссылка по определению указывает на ресурс, а нажатие кнопки обычно инициирует действие. Но если задача возникла, имеет смысл хотя бы решать её правильно.

Правильно

Синтаксически корректное («валидное») и кроссбраузерное решение — заключить кнопку в простейшую форму. В атрибут action формы следует поместить URL-адрес, на который должна вести «кнопка-ссылка». Для работы формы в устаревших браузерах (IE8 и ниже) следует добавить кнопке атрибут type="submit":

<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/

Blink и WebKit

В браузерах на основе движков Chromium/Blink (Chrome, Opera 15+, Яндекс.Браузер, Vivaldi) и WebKit (Safari) есть ошибка (баг) (1, 2): вопросительный знак, отделяющий строку запроса от основной части адреса, добавляется к адресу даже при отсутствии полей в форме. Поэтому, например, форма:

<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>

Это означает, что при нажатии на ссылку не должны выполняться никакие действия на стороне сервера, такие как: сохранение, изменение или удаление данных. Исключение составляет сбор статистики.

Кнопки не должны быть ссылками

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

submit в формах.

Вот примеры корректного использования кнопок:

<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 и определяет порядок перехода при нажатии кнопки

tab или ее эквивалента на специальном устройстве.

В любом случае семантическая 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 для обеспечения (и обеспечения соблюдения) того, что мы используем

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *