Сделать текст читаемым
Поднимите контраст основного текста, откажитесь от слишком мелкого шрифта и проверьте, что страница не ломается при увеличении.
Инструкции
Практические инструкции
Большая часть работы над доступностью не требует программиста. Нужно знать, что именно мешает людям, и уметь проверить это на своей странице. Здесь собраны инструкции для задач, с которыми сталкивается почти любой небольшой сайт, — от бледного текста до формы, которую невозможно заполнить без мыши.
Каждая подпись у поля и каждое описание картинки — небольшая правка, которая для кого-то открывает весь сайт.
Как устроен раздел: инструкции написаны общими словами и не привязаны к конкретным конструкторам или системам управления сайтом. Названия настроек везде разные, поэтому сверяйтесь с документацией своего инструмента, а смысл шагов остаётся прежним.
Инструкции
Задачи, с которых удобно начинать, если сайт уже работает и переделывать его целиком не хочется.
Описать изображения
Дайте каждой содержательной картинке короткое описание, а декоративным оставьте пустой альтернативный текст, чтобы диктор их пропускал.
Расставить заголовки
Один главный заголовок на странице, разделы — уровнем ниже, подразделы — ещё ниже. Заголовок выбирают по смыслу, а не ради крупных букв.
Вернуть видимый фокус
Если при переходе клавишей табуляции не видно, где вы находитесь, верните рамку выделения или сделайте её заметнее.
Добавить субтитры к видео
Начните с роликов, где говорят о главном. Субтитры помогают не только тем, кто не слышит, но и тем, кто смотрит без звука.
Каталог публикаций для русскоязычных читателей
В этом разделе со временем появятся самостоятельные статьи Wpget, написанные для русскоязычной версии справочника.
Пока каталог пуст. Новые материалы будут добавляться сюда по мере готовности.
Что мы планируем разобрать
- Как объяснить коллегам, зачем описывать картинки, если сайт «и так красивый»
- Почему таблицу с расписанием лучше сверстать таблицей, а не набором блоков
- Как написать текст страницы простым языком и не потерять важные подробности
- Что проверить на сайте после смены оформления, чтобы ничего не сломалось
Редакционные правила
- Материалы каталога пишутся отдельно для каждой языковой версии и не являются переводами.
- В некоторых материалах есть ссылки на сторонние сайты, в том числе игровые сервисы; мы не отвечаем за их содержание, цены и условия.
- Мы не делаем сайты на заказ и не публикуем рекламу студий, хостингов и сервисов, рейтинги, цены и отзывы.
Как написать понятную форму обратной связи
Оставьте только нужные поля
Спросите себя, без чего вы действительно не сможете ответить. Каждое лишнее поле — ещё одна возможность ошибиться и ещё одна причина бросить заполнение.
Подпишите каждое поле
У каждого поля должна быть видимая подпись, связанная с ним в разметке. Серая подсказка внутри поля подписью не считается: она исчезает при вводе, и человек забывает, что от него хотели.
Отметьте обязательные поля словами
Напишите «обязательно» рядом с подписью или объясните условное обозначение перед формой. Один только цвет или значок без пояснения понятен не всем.
Условный пример: «Электронная почта (обязательно)» понятнее, чем красная звёздочка, смысл которой нигде не объяснён.
Объясните формат заранее
Если поле ждёт данные в определённом виде, скажите об этом в подписи или под ней, до ввода. Лучше всего — принимать разные варианты записи и не заставлять человека угадывать.
Сделайте ошибки понятными
Сообщение об ошибке должно говорить, что не так и как это исправить, и стоять рядом с полем. Одна красная рамка без текста ничего не объясняет тем, кто не различает цвет или не видит экран.
Проверьте форму с клавиатуры
Пройдите все поля клавишей табуляции, заполните их и отправьте форму, не трогая мышь. Порядок перехода должен совпадать с порядком на экране, а фокус — быть видимым всё время.
Подтвердите отправку
После отправки покажите ясное сообщение, что письмо получено и что будет дальше. Не убирайте его через пару секунд: человеку может понадобиться время, чтобы его прочитать.
Читайте также
- Инструменты
Чем проверить сайт самому: увеличение в браузере, клавиатура, режим высокой контрастности, встроенный экранный диктор, проверка цветов и валидатор разметки.
- Сравнения
Уровни соответствия A, AA и AAA; альтернативный текст, подпись и расшифровка; субтитры, расшифровка и сурдоперевод — в сравнительных таблицах.
- Если не работает
Что делать, если не видно фокуса, текст не помещается при увеличении, кнопка без надписи, ошибки формы непонятны или видео идёт без субтитров.
- Риски
Ловушки доступности: непроходимая капча, исчезающие сообщения, мигание, короткие таймауты, сканы вместо текста и «оверлеи», обещающие исправить всё сразу.
- Словарь
Словарь терминов: доступность, WCAG, ГОСТ Р 52872-2019, контраст, альтернативный текст, фокус, экранный диктор, субтитры и простой язык.
Источники
- W3C — рекомендации WCAG 2.2
- ГОСТ Р 52872-2019
- Редакционные материалы справочника Wpget
Сведения изложены общими словами на дату подготовки. Рекомендации, браузеры и привычки читателей постепенно меняются, поэтому в спорных случаях сверяйтесь с первоисточниками: текстом рекомендаций WCAG и действующим ГОСТ Р 52872-2019.