Доступность сайта: четыре проверки, которые видит и робот
Доступность звучит как тема для больших организаций, но на практике это несколько конкретных вещей, которые ломаются на любом сайте. И почти все они одновременно улучшают то, как страницу читают программы — включая поисковые.
Контраст текста
Самая частая находка. Серый текст на светлом фоне выглядит аккуратно в макете и становится нечитаемым на телефоне при дневном свете. Порог проверяется арифметически: у обычного текста контраст к фону должен быть не ниже 4.5 к 1.
Подписи полей и доступные имена
Поле формы без подписи, кнопка-иконка без названия, ссылка «подробнее» без контекста — всё это места, где программа чтения с экрана не может сказать пользователю, что перед ним. Та же информация нужна и роботу, который разбирает страницу, — и агенту, читающему сайт вместо человека.
Язык документа и видимый фокус
Атрибут lang сообщает, на каком языке страница, — от этого зависит, как её произнесёт синтезатор речи. Видимый фокус показывает, где вы находитесь при навигации с клавиатуры: если рамку убрали ради красоты, пользоваться сайтом без мыши становится невозможно.
Как проверить за пять минут
Пройдите по странице клавишей Tab от начала до конца: видно ли, где вы находитесь, и попадаете ли во все элементы управления. Проверьте контраст пипеткой в инструментах разработчика — отношение показывается прямо в панели стилей. Отключите картинки и посмотрите, остаётся ли страница понятной: там, где вместо изображения пусто, alt не заполнен.
Что доступностью не является
Отдельная «версия для слабовидящих» с кнопкой увеличения шрифта и чёрно-жёлтой темой доступность не заменяет: это вторая, обычно заброшенная копия сайта. Работает другое — нормальный контраст, подписи и клавиатурная навигация в основной версии. Ими пользуются все, а не только те, кто нашёл специальную кнопку.
С чего начать, если сайт уже готов
Переделывать всё сразу не нужно и обычно некому. Порядок по отдаче такой. Первое — контраст основного текста и подписей: правка в одну строку стилей, а касается каждой страницы. Второе — подписи полей и названия кнопок-иконок: без них форму невозможно заполнить голосом или с экранным диктором, а форма — это то, ради чего сайт существует. Третье — видимый фокус: верните обводку, если её убрали ради вида. Четвёртое — атрибут языка у документа. Эти четыре пункта закрывают заметную часть типовых замечаний и не требуют переделки вёрстки; остальное разумно вести по мере того, как страницы и так меняются.
Четыре правки, которые закрывают большинство замечаний
Ниже те же четыре места, но уже разметкой. Подпись связывается с полем через атрибуты for и id, а не близостью на экране. Кнопке-иконке имя даёт aria-label, а сама иконка от чтения скрывается. Видимый фокус не убирается, а оформляется — тогда он не спорит с видом страницы и остаётся на месте.
<!-- подпись связана с полем, а не просто лежит рядом -->
<label for="phone">Телефон</label>
<input id="phone" type="tel" name="phone">
<!-- кнопка-иконка: имя есть у кнопки, иконка скрыта от чтения -->
<button aria-label="Закрыть"><svg aria-hidden="true"></svg></button>
<!-- язык документа -->
<html lang="ru">
/* фокус оформляем, а не убираем */
:focus-visible { outline: 2px solid #663af3; outline-offset: 2px; }Материал носит информационный характер и не является юридической консультацией. Актуальность требований проверяйте на момент чтения.