Кнопка, ссылка, подпись: соберите из div и посчитайте потери

Возьмём <div>, дадим ему атрибут class="btn" — имя, по которому элемент находят стили, — и покрасим под кнопку. <style> в примере нужен только для вида: правило .btn действует на все элементы с классом btn, точка перед именем и означает класс. Рядом поставим такой же <div> с двумя атрибутами-«починками», настоящую <button> и две ссылки — без адреса и с адресом. Так в одном примере окажется вся коллекция: подделка, подделка с заплатками и два настоящих элемента.

Первая потеря — фокус. Фокус это отметка «клавиатура сейчас здесь»: буквы уходят в поле с фокусом, Enter нажимает кнопку с фокусом, а Tab переносит отметку к следующему элементу. Человек, который не пользуется мышью, без фокуса до кнопки не дотянется вовсе. Проверка по очереди пробует поставить фокус на каждый найденный элемент, и разбор отвечает по каждому: принял или нет. Адрес "div, button, a" через запятую значит «все div, все button и все a», и ответы идут в порядке разметки: пять элементов — пять ответов. Прогноз: где будет «да», а где «нет»?

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Кнопка из div</title>
  <style>
  .btn { display: inline-block; padding: 2px 8px; border: 1px solid gray; background: lightgray; }
</style>
</head>
<body>

<div class="btn">Купить</div>
<div class="btn" tabindex="0" role="button">Купить</div>
<button>Купить</button>
<a>Без адреса</a>
<a href="/cart">Корзина</a>
</body>
</html>

focusable("div, button, a");

Атрибут role="button" ни фокуса, ни вида не меняет. Он сообщает программе чтения с экрана, что перед ней кнопка: роль — это то, чем элемент представляется машинам. У многих тегов роль есть и без атрибута: <header>, <nav> и <main> получают её сами, и из таких ролей программа чтения собирает карту ориентиров страницы. Отсюда простая мысль: атрибуты-«починки» описывают элемент чужими словами, а настоящий тег говорит их сам.

Ссылка без адреса — отдельный случай: ей посвящён раздел «Ссылка или кнопка» ниже.

У tabindex три вида значений. 0 — встать в очередь Tab по порядку разметки; именно он нужен самоделке. -1 — Tab элемент пропускает, но фокус на него можно перенести скриптом: так поступают, например, с заголовком, к которому переводят человека после перехода, чтобы «назад» вернул его обратно. Положительные числа выстраивают свою очередь впереди всех остальных, и порядок Tab расходится с тем, что видно на экране, — их не пишут никогда.

focusable проверяет, может ли элемент принять фокус вообще, а не стоит ли он в очереди Tab. На div с tabindex="-1" ответ «да», хотя Tab этот div пропустит.

Язык адресов вроде "div, button, a" и сами стили целиком разбирает вторая глава пролога — начиная с селекторов и каскада. В этой статье непривычные адреса объясняются там, где встречаются, и учить их наперёд не нужно.

Фокус у поддельной кнопки теперь есть. Проверим нажатие — и сразу в условиях, близких к боевым: поставим обе кнопки в форму <form>, из которой данные уходят на сервер. Клавиши проверка нажимать не умеет, зато умеет щёлкать: press щёлкает по первому элементу, который нашёл адрес. Настоящую отправку прибор перехватывает, чтобы пример не ушёл со страницы, и отмечает её в разборе. Прогноз: сколько будет отправок — ноль, одна или две?

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Нажатие: щелчок, Enter и Пробел</title>
</head>
<body>
<form>
  <div class="btn" tabindex="0" role="button">Купить</div>
  <button>Купить</button>
</form>
</body>
</html>

press("div");
press("button");

<button> внутри формы, если не сказать иного, форму отправляет. Это полезно для «Оплатить» и вредно для «Показать пароль» или «Очистить корзину»: такая кнопка тоже отправит форму, и пользователь потеряет введённое. Отсюда правило, которое запоминают на первой же ошибке: у любой кнопки в форме должен быть явный type.

Теперь клавиатура, и здесь проверку придётся заменить руками: нажатие, отправленное из кода, изображает событие, но действия браузера не вызывает. Запустите пример и щёлкните по первой «Купить» — фокус встанет на неё, tabindex работает и для мыши. Нажмите Enter, потом Пробел: не произойдёт ничего, у <div> нет своего действия. Если от Пробела страница уехала вниз, не пугайтесь — Пробел, которому нечего нажимать, листает страницу, а следующий Tab вернёт её к примеру. Теперь Tab: фокус переедет на <button>. Enter отправит форму, и Пробел отправит её же — разбор под примером отметит обе отправки.

На Mac Tab может пропускать кнопки и ссылки. В Safari по ним ходит Option+Tab, а если так же ведёт себя другой браузер, включите навигацию с клавиатуры в системных настройках macOS.

Вот и вторая половина потерь. Чтобы поддельная кнопка нажималась с клавиатуры, её пришлось бы учить скриптом: ловить Enter и Пробел, повторять щелчок, помнить про выключенное состояние, про отправку формы и про то, что Пробел на кнопке не должен листать страницу. Настоящая кнопка приносит весь этот список сама, и забыть что-то из него у неё не получится.

Кнопке, которая действует на странице, но форму отправлять не должна, пишут type="button". Как форма отправляется, какие у кнопки бывают type и как перехватить отправку из скрипта, покажет часть II — статья про отправку формы.

Вторая частая самоделка — ссылка вместо кнопки или кнопка вместо ссылки. Правило короткое: ссылка это переход, кнопка это действие. У ссылки есть адрес, и с ним работают привычные жесты, которых у кнопки нет вовсе: открыть в новой вкладке, скопировать адрес, вернуться кнопкой «назад», добавить в закладки. У кнопки адреса нет, она что-то делает здесь: кладёт товар в корзину, раскрывает меню, отправляет форму.

Раз ссылка держится на адресе, посмотрим на <a> без href. Проверка прочитает не стиль, а свойство самого элемента: tabIndex, с большой I, — это место в очереди Tab, как его хранит браузер, — и спросит, принимает ли элемент фокус. Прогноз для двух строк: какое там число и примет ли такая ссылка фокус?

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Ссылка или кнопка</title>
</head>
<body><a>Без адреса</a></body>
</html>

measure("a", "tabIndex");
focusable("a");

Без адреса <a> — заготовка ссылки, и это не всегда ошибка: так, например, размечают пункт меню текущей страницы, переходить с которого некуда. Число 0 в очереди при этом обманчиво: оно есть у любой ссылки, а вот фокус браузер отдаёт только той, у которой адрес есть.

Клавиши проверяются тем же ручным способом. Вернитесь к первому примеру статьи, запустите его, щёлкните по второй «Купить» — той, что с tabindex, — и дважды нажмите Tab: фокус пройдёт через <button> и встанет на «Корзина», перешагнув ссылку без адреса. Enter отправит вас по адресу /cart: прибор перехватит переход, чтобы пример не ушёл со страницы, и отметит его в разборе. Пробел на той же ссылке не сделает ничего — ссылку он не нажимает, и это второе её отличие от кнопки после адреса.

Кнопка, которая ведёт на другую страницу, и ссылка с href="#", которая раскрывает меню, — одна ошибка с двух сторон. Проверочный вопрос: изменится ли адрес в строке браузера? Да — ссылка, нет — кнопка.

Кнопку «Купить» выключают, пока в заказе ничего не выбрано, — атрибутом disabled. Поставим его обеим кнопкам, настоящей и поддельной, и снова положим их в форму. Прогноз: какие из двух выключенных элементов примут фокус и отправит ли щелчок по выключенной кнопке форму?

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>disabled: выключить кнопку и целую группу</title>
</head>
<body>
<form>
  <div class="btn" tabindex="0" role="button" disabled>Купить</div>
  <button disabled>Купить</button>
</form>
</body>
</html>

focusable("div, button");
press("button");

Для <div> атрибут disabled — незнакомое слово: браузер хранит его в разметке и ничего с ним не делает. Кнопка остаётся нажимаемой, и «выключенность» существует только в голове того, кто рисовал серый фон.

Когда выключить нужно не одну кнопку, а группу полей, их кладут в <fieldset> — группу с подписью <legend> — и ставят disabled на неё. Проверка ответит числом: сколько элементов нашёл адрес. Двоеточие в адресе :disabled означает не тег, а состояние — «все выключенные элементы». Прогноз: сколько их окажется на странице?

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>disabled: выключить кнопку и целую группу</title>
</head>
<body>
<div class="btn" disabled>Купить</div>
<button disabled>Купить</button>
<fieldset disabled>
  <legend>Оплата</legend>
  <button>Оплатить</button>
  <input name="card">
</fieldset>
</body>
</html>

count(":disabled");

Одним атрибутом на группе замораживают часть формы — например, пока идёт оплата или пока не выбран способ доставки. Без <fieldset> пришлось бы обходить все поля списком и не забыть ни одного, а забытое поле в замороженной форме отправит данные, которых от него не ждали.

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>disabled: выключить кнопку и целую группу</title>
</head>
<body>
<fieldset disabled>
  <legend>Оплата <input type="checkbox" id="agree"></legend>
  <input id="card">
</fieldset>
</body>
</html>

count(":disabled");
focusable("input");

Выключенная кнопка пропадает из очереди Tab, и человек с клавиатурой не узнает, почему нажать нельзя. Причину пишут текстом рядом, а не прячут в серой кнопке.

Теперь счёт потерь поддельной кнопки можно свести в одну таблицу. Всё, что в последней колонке, <button> даёт одним тегом.

Выключенное поле выпадает и из данных формы: его значение не уходит на сервер и не проверяется. Какие поля уходят с формой, разобрано в части II, в статье про сбор данных формы и отправку на сервер, а как браузер сам проверяет поля по атрибутам — в статье про встроенную валидацию.

Последняя самоделка — подпись: слово «Почта» в <span> рядом с полем. Глазу связь видна, браузеру — нет. Связывает подпись с полем <label>, и способов два: атрибут for со значением, равным id поля, или поле прямо внутри <label>. Оба равноправны, вложенный чаще удобнее: не нужно следить за уникальностью id.

Проверим, что даёт связь. Адреса здесь длиннее: квадратные скобки проверяют атрибут, так что label[for] — это label, у которого есть for, label:not([for]) — label без него, а input[type=checkbox] — поля-флажки. Где встанет фокус, видно по рамке на элементе, а отмечен ли флажок — по галочке в квадратике. Прогноз: куда встанет фокус после щелчка по первой подписи и какие флажки окажутся отмечены после щелчков по второй и третьей?

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>label: подпись, которая работает</title>
</head>
<body>
<label for="mail">Почта</label> <input id="mail">
<label>Новости <input type="checkbox" id="news"></label>
<span>Правила</span> <input type="checkbox" id="rules">
</body>
</html>

press("label[for]");
focused();
press("label:not([for])");
press("span");
measure("input[type=checkbox]", "checked");

Человеку с мышью или с телефоном в руке связь даёт большую цель: попасть в квадратик флажка трудно, в слово рядом — легко. Программе чтения она даёт имя поля: поле с <label> объявляется по подписи, а поле рядом со <span> для неё безымянное — она сообщит только, что перед ней поле ввода, и человек не поймёт, что вводить.

Подсказка внутри поля, атрибут placeholder, подпись не заменяет: она исчезает с первой буквой, и человек, отвлёкшийся посреди формы, уже не видит, о чём его здесь спрашивали. А группе вариантов — например, радиокнопкам «Курьером» и «Самовывоз» — нужна ещё и общая подпись: у каждого поля своя есть, а о том, что это за выбор, не говорит ни одна. Её даёт <legend> внутри <fieldset>, знакомого по прошлому разделу.