Как сделать сайт рыбоводного хозяйства доступнее для покупателей
Если характеристики малька есть только на фотографии прайс-листа, нужную навеску нельзя найти поиском по странице, а программа чтения с экрана не сможет прочитать данные. Вид рыбы, размер партии, условия поставки и контакт для запроса укажите обычным текстом. Фотография может дополнить описание, но не заменить его.
Доступный сайт удобен людям с ограничениями зрения, слуха, моторики или внимания. Та же ясность помогает закупщику, который открывает страницу с телефона, технологу, сверяющему параметры корма, и покупателю со слабым интернетом. Для сайта рыбоводного хозяйства важны понятная структура, читаемые данные и возможность без лишних препятствий отправить заявку.
Начните с задачи посетителя, а не с оформления
Перед публикацией определите, зачем человек приходит на страницу: узнать наличие товарной рыбы, сравнить посадочный материал, скачать спецификацию оборудования или отправить запрос. Затем попробуйте найти нужную информацию сами — без догадок о значении иконок и чтения длинного рекламного текста.
На странице продажи форели разделите сведения на блоки: что предлагается, в каком виде и объёме, что нужно уточнить при заказе и как связаться с хозяйством. Цена зависит от партии и логистики? Напишите об этом прямо. Если вместо характеристик оставить только «подробности по запросу», покупателю придётся обращаться к вам, ещё не понимая, подходит ли ему предложение.
Проверьте простой маршрут: посетитель читает заголовок, находит параметры, замечает ограничения предложения и выбирает способ связи. Если важные условия есть только в файле, видео или устном ответе по телефону, кратко изложите их на странице.
Заголовки и абзацы: сделайте содержание обозримым
Заголовки нужны не только для зрительного разделения текста. Пользователь программы чтения с экрана может переходить по ним как по оглавлению. Поэтому заголовок должен сообщать, о чём раздел, а не просто украшать страницу.
Соблюдайте порядок уровней
Название страницы обычно размечено в шаблоне сайта как заголовок первого уровня. Основные разделы статьи оформляйте как h2, вложенные темы — как h3. Размер и начертание шрифта задаются стилями; ради них не нужно менять уровень заголовка. Подраздел «Подготовка тары» внутри раздела «Условия перевозки» выглядит логично, а переход от h2 сразу к h4 ради оформления ломает структуру.
Вместо «Важная информация» напишите «Какие данные нужны для расчёта доставки малька»: такой заголовок помогает быстро найти ответ. В длинном материале отводите раздел под один вопрос, а самостоятельные условия собирайте в список.
Пишите так, чтобы абзац работал отдельно
Короткие абзацы помогают не смешивать цену, сроки и исключения. При первом упоминании расшифруйте сокращение: «установка замкнутого водоснабжения (УЗВ)». Единицы измерения ставьте рядом с числом, диапазон поясняйте: «масса одной рыбы — от 300 до 500 г» понятнее, чем «300–500».
Если условия для садкового хозяйства и УЗВ различаются, скажите об этом словами. Одного цвета плашки или расположения в соседних колонках недостаточно: на узком экране блоки могут оказаться друг под другом.
Изображения: передавайте смысл, а не пересказывайте каждый пиксель
Альтернативный текст, или alt-текст, нужен прежде всего изображению, которое сообщает что-то важное. Его прочитает программа экранного доступа; он также поможет, если картинка не загрузилась. Описание зависит от роли изображения на странице.
- Предметное фото. Для снимка оборудования подойдёт «Барабанный фильтр с открытой панелью обслуживания» — если фильтр и панель действительно видны.
- Схема. Кратко передайте её смысл: «Поток воды от бассейна через фильтр к биозагрузке». Основные связи и параметры сложной схемы изложите также текстом рядом.
- График. Главный вывод и названия величин укажите в подписи или соседнем абзаце. Если для понимания нужны все значения точек, одного alt-текста мало.
- Декоративный элемент. Если он не несёт информации, озвучивать его не нужно. Настройку пустого alt-атрибута согласуйте с разработчиком или редактором сайта.
Не начинайте каждый alt-текст со слов «изображение» или «фото»: средство чтения с экрана обычно уже сообщает тип элемента. Не заполняйте описание поисковыми словами и не приписывайте снимку того, чего на нём нельзя увидеть. Бассейн с рыбой на фотографии не доказывает качество воды или здоровье всей партии.
Текст поверх снимка бывает трудно прочитать из-за неровного фона. Телефон, дату отгрузки и минимальную партию лучше вынести из баннера в текстовый блок. Если на схеме красные и зелёные линии обозначают разные процессы, добавьте подписи, разные типы линий или другие обозначения.
Ссылки, кнопки и документы: называйте результат действия
Название ссылки должно быть понятно само по себе. «Скачать спецификацию кормового автомата, PDF» полезнее, чем «скачать файл». У документа укажите формат, а у большого файла — размер: это важно при загрузке через мобильный интернет. Кнопка «Отправить запрос» яснее кнопки «ОК».
Ссылка ведёт на другую страницу или к документу. Кнопка отправляет форму, раскрывает блок либо выполняет другое действие на текущей странице. Даже если элементы выглядят одинаково, их названия и поведение должны быть предсказуемыми. Несколько ссылок «Подробнее» рядом не помогут разобраться, какая из них ведёт к нужной услуге.
Не оставляйте ключевые условия только в файле. Отсканированный PDF бывает недоступен для поиска, копирования и экранного чтения. Основные характеристики разместите на HTML-странице, а подробную спецификацию — в документе. При подготовке файла используйте настоящие заголовки, текст и таблицы вместо страниц-картинок. После экспорта проверьте порядок чтения: визуально аккуратный документ вспомогательные средства не всегда читают последовательно.
Таблицы: сохраняйте связь между параметром и значением
Таблица подходит для сравнения кормов или вариантов фасовки. Подпишите столбцы «Размер гранулы, мм», «Масса мешка, кг», «Назначение», чтобы числа не оставались без контекста. Заголовки ячеек нужно обозначить и в разметке — это уже задача редактора сайта или разработчика, а не только дизайнера.
Не раскладывайте обычный текст в две колонки с помощью таблицы. На телефоне она может потребовать горизонтальной прокрутки, а порядок чтения станет неудобным. Таблицу с множеством объединённых ячеек иногда проще разделить на две или снабдить пояснением. Для ориентировочных параметров укажите условия, к которым они относятся: данные конкретной партии нельзя выдавать за универсальную норму выращивания.
Перед публикацией откройте таблицу на узком экране. Проверьте, можно ли соотнести каждое значение с заголовком столбца и заметно ли, что последний столбец доступен при боковой прокрутке.
Видео и аудио: дайте альтернативный способ получить сведения
Видео сортировки рыбы помогает показать операцию, но изображение и звук доступны не всем. Если в ролике есть речь, подготовьте точные субтитры: автоматическое распознавание часто ошибается в названиях узлов, числах и терминах. К интервью или аудиозаписи добавьте расшифровку.
Важный шаг может происходить без слов — например, сотрудник закрывает задвижку перед обслуживанием линии. Тогда субтитров к речи недостаточно: опишите действие под видео или добавьте звуковое пояснение. Условия хранения продукции, часы работы и порядок обращения тоже не должны существовать только в ролике.
Автовоспроизведение со звуком мешает читать страницу и может перебивать программу экранного доступа. Пусть посетитель сам запускает и останавливает видео. Для движения, отвлекающего от текста, предусмотрите паузу или возможность отключить эффект.
Формы заявки: помогите заполнить и исправить
Через форму хозяйство получает запросы на партии рыбы, посадочный материал и сотрудничество. Каждому полю нужна видимая подпись. Пример внутри поля её не заменяет: при вводе подсказка исчезает, и проверить данные становится сложнее.
На первом этапе просите только необходимое. Для предварительного запроса обычно достаточно контакта, интересующей продукции и свободного описания потребности. Если требуется объём, укажите единицу измерения. Если важен формат телефона, покажите пример рядом с полем и принимайте распространённые варианты записи.
Ошибка должна подсказывать, что исправить: «Укажите адрес электронной почты» полезнее, чем «Ошибка в форме». После неудачной отправки сохраняйте уже введённое. Обязательные поля помечайте не только цветом, но и текстом либо общепонятным символом с пояснением. После успешной отправки покажите подтверждение; срок ответа указывайте, если он известен и соблюдается на практике.
Пройдите форму без мыши. Клавиша Tab должна последовательно переводить пользователя по полям, кнопке отправки и другим элементам управления, а положение фокуса должно быть видно. Всплывающее окно, которое мешает закончить заявку и не закрывается с клавиатуры, сводит на нет работу над текстом страницы.
Читаемость и контраст: не полагайтесь на «красиво выглядит»
Мелкий светло-серый текст на белом фоне может выглядеть аккуратно на мониторе, но плохо читаться с телефона при дневном свете. Контраст проверяйте инструментом по фактическим цветам текста и фона, а не на глаз. Для обычного текста ориентир по WCAG — не менее 4,5:1; для крупного текста требования другие. Проверяйте также подписи, ошибки формы и ссылки.
Не обозначайте состояние одним цветом. Фраза «позиции, выделенные зелёным, доступны» не поможет тому, кто не различает цвета или распечатал страницу в чёрно-белом виде. Добавьте статусы «В наличии» и «Под заказ». Ссылки внутри абзаца лучше отличать не только оттенком — например, подчёркивать.
Увеличьте масштаб браузера до 200% и проверьте, не обрезались ли заголовки, кнопки и поля. Не запрещайте масштабирование на телефоне. Отдельно посмотрите на перенос длинных номеров, адресов электронной почты и названий моделей на узком экране.
Проверка перед публикацией: короткий рабочий порядок
Включите доступность в обычную редакторскую проверку страницы о продукции или услуге. То, что нельзя исправить в тексте, передайте ответственному за шаблон сайта.
- Прочитайте заголовки подряд. Ясно ли, где искать условия, характеристики и способ обращения?
- Отключите изображения или мысленно уберите их. Остались ли текстом цены, параметры и важные предупреждения?
- Проверьте названия ссылок и кнопок. Понятно ли без соседнего абзаца, куда они ведут и что делают?
- Увеличьте масштаб и откройте страницу на телефоне. Видны ли столбцы таблицы, подписи и сообщения формы?
- Пройдите элементы клавишей Tab. Заметен ли фокус и можно ли отправить форму без мыши?
- Проверьте субтитры видео, особенно числа и термины. Если есть файл, убедитесь, что основные условия изложены также на странице.
Автоматический анализатор найдёт часть ошибок разметки и контраста, но не оценит, передаёт ли alt-текст нужный смысл и понятны ли покупателю условия. Попросите коллегу, который не готовил материал, найти конкретный параметр и отправить тестовую заявку без устных подсказок.
Начните с часто используемой страницы — например, с запроса посадочного материала. Проверьте, указаны ли текстом вид рыбы, диапазон навески и требования к заявке. Затем пройдите форму с клавиатуры и исправьте первое место, где непонятно, что делать дальше.