Проект: своя проверка разметки на селекторах

Селектор, как вы помните по селекторам и судье каскада, — адрес элементов. Адрес можно написать не только для «всех абзацев», но и для «всех картинок без alt». Правило с таким селектором сработает ровно на ошибках — и это уже половина проверки: осталось узнать, на каких именно элементах оно сработало.

Для этого правило ставит элементу метку — пользовательское свойство --issue, знакомое по статье о переменных и вложенности, — и кладёт в значение текст находки в кавычках. Сам браузер такое свойство ни к чему не применяет, поэтому вид страницы проверка не меняет: метка остаётся в разметке, как пометка карандашом на полях. Собирает метки функция audit(): она обходит элементы страницы примера и перечисляет помеченные — тег и текст находки, в порядке разметки, а в конце говорит, сколько их всего. Ответ, как и в других статьях главы, лежит в разборе под примером.

Адрес ошибки помогает записать :not(). В скобках стоит селектор, а весь псевдокласс выбирает элементы, которые ему не подходят: img:not([alt]) — картинки, у которых нет атрибута alt. Он уже встречался, когда вы собирали кнопку, ссылку и подпись из подручных тегов: press("label:not([for])") щёлкал там по подписи без for.

Ниже три картинки: с осмысленным alt, с пустым и без атрибута. Адрес data:, — пустой файл, записанный прямо в src, как в статье про картинки: сеть примеру не нужна. Прогноз: сколько картинок найдёт count с тем же селектором, что у правила, какую находку даст audit и сколько их будет.

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Правило-находка и метка --issue</title>
  <style>
  img:not([alt]) { --issue: "картинка без alt"; }
</style>
</head>
<body>

<img src="data:," alt="Логотип кофейни">
<img src="data:," alt="">
<img src="data:,">
</body>
</html>

count("img:not([alt])");
audit();

У метки есть свойство, с которым пришлось считаться: пользовательское свойство наследуется, как цвет. Ниже меню, в нём ссылка без адреса, а внутри ссылки <strong>. Правило задевает только саму ссылку. Прогноз: какое значение --issue окажется у <strong> и сколько находок насчитает проверка?

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Правило-находка и метка --issue</title>
  <style>
  a:not([href]) { --issue: "ссылка без адреса"; }
</style>
</head>
<body>

<nav>
  <a href="/menu">Меню</a>
  <a><strong>Скидки</strong></a>
</nav>
</body>
</html>

measure("a strong", "--issue");
audit();

Метка ничего не рисует. На своей странице находки удобнее видеть глазами: рядом с --issue в правило дописывают outline: 3px solid red, и ошибки обводятся прямо на экране.

Следующая ошибка — кнопка без имени. Имя кнопки — её текст, его и произносит программа чтения. У кнопки-крестика текста нет, и имя ей дают атрибутом aria-label, знакомым по ориентирам страницы. Кнопка без текста и без aria-label прозвучит просто как «кнопка», и что она делает, не узнать: закрыть окно, удалить запись или отправить форму.

Элемент без содержимого выбирает :empty. Склейка без пробела требует всего сразу от одного элемента, поэтому button:empty:not([aria-label]) читается как «кнопка, пустая и без aria-label». Осталось понять, что для браузера значит «пустая». Ниже три кнопки: совсем пустая, с одним пробелом и с HTML-комментарием внутри. Предскажите, сколько из них найдёт :empty.

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>:empty и :has(): кнопка без имени и подпись без поля</title>
</head>
<body>
<button></button>
<button> </button>
<button><!-- иконка --></button>
</body>
</html>

count("button:empty");

Перенос строки между открывающим и закрывающим тегом — тоже текст. Кнопку, у которой закрывающий тег стоит на следующей строке, :empty уже не выберет. Черновик стандарта предлагает пробелы и переносы не считать, но так пока не делает ни один браузер.

Ещё одна ошибка — подпись, которая ни к чему не привязана. Подпись связывают с полем двумя способами: атрибутом for или полем внутри <label>. Отсутствие первого проверяет :not([for]). Для второго нужен псевдокласс, который смотрит внутрь: :has() выбирает элемент, внутри которого есть что-то подходящее под селектор в скобках. label:has(input) — подпись с полем внутри на любой глубине, а со знаком ребёнка label:has(> input) — только с полем среди прямых детей. label:not(:has(input, select, textarea)) — подпись, внутри которой нет ни поля ввода, ни выпадающего списка <select>, ни многострочного поля <textarea>: запятая в скобках, как и в любом селекторе, собирает список.

:empty — Baseline widely с 29.01.2018, :not() — с 21.07.2023, :has() — с 19.06.2026: пишите все три.

Соберём проверку из четырёх правил. В разметке шапка со ссылкой, подпись и поле, две пустые кнопки и две картинки. Прогноз: сколько находок даст проверка и какие по порядку. Не торопитесь с подписью: поле стоит сразу за ней — но связана ли она с ним?

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>:empty и :has(): кнопка без имени и подпись без поля</title>
  <style>
  img:not([alt]) { --issue: "картинка без alt"; }
  button:empty:not([aria-label]) { --issue: "кнопка без имени"; }
  a:not([href]) { --issue: "ссылка без адреса"; }
  label:not([for]):not(:has(input, select, textarea)) { --issue: "подпись ни к чему"; }
</style>
</head>
<body>

<header><a>Кофейня</a></header>
<label>Почта</label> <input id="mail">
<button aria-label="Закрыть"></button>
<button></button>
<img src="data:," alt="">
<img src="data:,">
</body>
</html>

audit();

Бывает, что у элемента две ошибки сразу: у картинки нет ни alt, ни размеров. Тогда два правила спорят за одно свойство --issue, и судья каскада оставляет одно значение — при равной специфичности из правила, которое ниже. Метка одна, и находка одна. Исправили первую ошибку — проверка покажет вторую. Это не дефект подхода, а его ограничение, и у настоящих проверок оно устроено иначе: там правило и находка — разные сущности, поэтому на одном элементе их бывает сколько угодно.

:has() пригодился не только для проверок. Он закрыл старую дыру в селекторах: они ходят от элемента вниз, к потомкам, и вперёд, к соседям, а назад, к родителю, не ходят. .agree input найдёт флажок внутри подписи, а подпись по состоянию её флажка до :has() не находил ни один селектор — и ради этого писали скрипт, который добавляет класс родителю.

Поэтому раньше рамку вокруг подписи с отмеченным флажком ставил скрипт: ловил щелчок по флажку, добавлял подписи класс, а когда галочку снимали, класс убирал. С :has() хватает одного правила. :checked вы знаете по статье о переходах: input:checked — отмеченный флажок. Значит, .agree:has(input:checked) — подпись, внутри которой флажок отмечен. Второе правило меняет только цвет рамки, border-color, и сразу всей рамки. Прогноз: каким будет её цвет на странице примера до щелчка по флажку и после.

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>:has() вместо скрипта</title>
  <style>
  .agree { border: 2px solid rgb(200, 200, 200); }
  .agree:has(input:checked) { border-color: rgb(0, 128, 0); }
</style>
</head>
<body>

<label class="agree"><input type="checkbox"> Согласен</label>
</body>
</html>

measure(".agree", "border-top-color");
press(".agree input");
measure(".agree", "border-top-color");

У скрипта, который ставит класс, всегда есть вторая половина — снять его, и её легко забыть. У правила на :has() второй половины нет.

Ваша проверка — уменьшенная модель настоящих. Те устроены так же, обход элементов и правила, только написаны на JavaScript, и правил в них намного больше: в библиотеке axe-core версии 4.13.0 их около сотни. На ней работают расширение axe DevTools для браузера и раздел доступности в Lighthouse. Четыре ваших правила против сотни — не повод считать свою проверку бесполезной: свои правила знают контекст проекта, которого не знает ни одна общая библиотека.

Lighthouse встроен в инструменты разработчика Chrome и Edge. Прибор его не запустит — это ручной шаг. Откройте любую страницу в Chrome, нажмите F12 (в macOS — Cmd+Option+I) и найдите панель Lighthouse; если её не видно среди вкладок, она спрятана за значком ». Оставьте отмеченной категорию Accessibility, остальные снимите и нажмите Analyze page load. Отчёт покажет оценку от 0 до 100 и проваленные проверки, у каждой — элементы, на которых она сработала.

Сравним мнения. Разметку из примера с четырьмя правилами мы положили внутрь <main> обычной страницы и прогнали на ней axe-core 4.13.0 в Chrome. Свои находки axe называет именами правил:

Картинку и кнопку нашли оба. Подпись — тоже оба, но с разных концов: вы искали подпись без поля, axe — поле без подписи. Для программы чтения важно второе: безымянным осталось именно поле. Ссылку без адреса axe пропустил, и это не всегда ошибка: так размечают, например, пункт меню текущей страницы. А сверх того axe нашёл ошибку всей страницы, page-has-heading-one: на ней нет заголовка <h1>. Проверки расходятся не потому, что одна из них ошибается. У каждой свой список того, что считать ошибкой, и свою вы подстраиваете под правила своего проекта.

Высокая оценка Lighthouse не значит, что страницей удобно пользоваться. Осмысленный ли alt, понятна ли подпись, удобен ли порядок Tab — решает человек, а правило только подсказывает, куда посмотреть.

Селектор видит теги, атрибуты и состояния вроде «отмечен» или «выключен». Три вещи ему недоступны, и на каждой проверка на CSS промахивается.

Первая — текст. Кнопка-иконка, внутри которой только картинка с пустым alt, безымянна, но :empty её не выберет: внутри есть тег. Попробуем другой адрес — кнопка без aria-label, внутри которой картинка с пустым alt. У второй кнопки рядом с иконкой стоит слово «Закрыть». Предскажите находки.

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Чего CSS не увидит</title>
  <style>
  button:not([aria-label]):has(img[alt=""]) { --issue: "кнопка без имени"; }
</style>
</head>
<body>

<button><img src="data:," alt=""></button>
<button><img src="data:," alt=""> Закрыть</button>
</body>
</html>

audit();

Вторая — связи между элементами. for хранит id поля, но сравнить значение атрибута одного элемента с id другого селектор не умеет. Ниже подпись с опечаткой в for. Предскажите, что скажет проверка и где окажется фокус после щелчка по подписи.

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Чего CSS не увидит</title>
  <style>
  label:not([for]):not(:has(input, select, textarea)) { --issue: "подпись ни к чему"; }
</style>
</head>
<body>

<label for="mial">Почта</label> <input id="mail">
</body>
</html>

audit();
press("label");
focused();

Исправьте mial на mail и запустите снова: находок так и останется ноль, а фокус встанет в input#mail. Сломанную подпись от рабочей проверка не отличила. Так же молча она пропустит aria-labelledby со ссылкой на id, которого на странице нет. axe такие связи сверяет: подпись с опечаткой он отметил находкой label у поля, а кнопке с aria-labelledby="nope" на странице без элемента #nope — button-name.

Третья — поведение. В каком порядке Tab обходит элементы, куда уходит фокус, что происходит после нажатия — всё это случается, когда страницей пользуются, а правило CSS ничего не нажимает и ничего не ждёт. Даже axe из порядка Tab видит только признак: положительный tabindex он отмечает правилом tabindex, а удобен ли сам порядок, проверяют руками, проходя страницу клавишей Tab.

Молчание проверки не значит, что ошибок нет. Оно значит, что нет тех ошибок, которые эта проверка умеет искать.

Щелчок и фокус в примере с опечаткой проверил не CSS, а функции press и focused. Они, как и audit, measure и page, написаны на JavaScript. На нём же написаны axe-core и Lighthouse: программа читает страницу, сравнивает атрибуты разных элементов, нажимает и смотрит, что изменилось. Там, где кончается CSS, начинается JavaScript, — и с него же начинается часть I: в первой её статье разобрано, что JavaScript умеет на странице.