Версия сайта для слабовидящих

Версию сайта для слабовидящих можно создать разными способами - от использования плагинов до внедрения скриптов.

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

Адаптация сайта
для слабовидящих по закону

Создавая версию сайта для слабовидящих, разработчик действует согласно ГОСТ Р 52 872 – 2012 «Требования доступности интернет-ресурсов для инвалидов по зрению». Она должна быть такой, чтобы люди с нарушениями зрения могли без проблем использовать сайт, и владелец ресурса не должен был бы платить штраф.

Государство контролирует соблюдение данных требований лишь по отношению к сайтам:

  • учреждений культуры и искусства;
  • социальных учреждений;
  • учебных заведений;
  • органов государственной и муниципальной власти;
  • организаций здравоохранения;

Нужна разработка проекта? Начните свой проект уже сегодня.

Давайте обсудим его. Продумаем. И сделаем!

Обсудить проект
 

Требования для создания версии для слабовидящих

  • Масштабируемость. 1. Шрифт нужно увеличить до 200%, не создавая горизонтальной полосы прокрутки. Такого эффекта можно добиться с помощью масштабируемой верстки.
  • Встроенная функция увеличения шрифта. Адаптация сайтов для людей с плохим зрением предполагает наличие на панели управления встроенного инструмента для увеличения размера шрифта (без необходимости менять его в браузере).
  • Отключение изображения. Существуют различные заболеваний глаз, при одних человек способен распознать, что изображено на картинках, при других — нет. В версии сайта для пользователей с ограниченными возможностями зрения должна быть возможность включать и выключать изображения.
  • Цвет не является способом передачи информации. В процессе адаптации сайта для слабовидящих можно использовать не только черно-белый, но и цветной интерфейс. Важно учитывать, что цвет не должен использоваться для передачи информации (например, «заполняйте зеленые поля» - человек, который не может различать цвета, просто не сможет этого сделать).
  • Медиаконтент заменяется текстом. Чтобы обеспечить более эффективную индексацию страниц и улучшение SEO, атрибут Alt для изображений должен быть заполнен с использованием ключевых фраз. Но при создании версии сайта для слабовидящих необходимо помнить о первоначальном назначении атрибута Alt, который является альтернативным текстом для изображения. Если прописать Alt не с использованием ключей, а в зависимости от объекта на картинке, это поможет пользователю с плохим зрением лучше понять содержание страницы.
  • Контрастность фона и контента. Минимальное значение контраста между текстом и фоном или важными элементами дизайна должно быть 7:1 (для увеличенного текста - 4,5:1). Существует множество сервисов для проверки этого соотношения. Например, Webaim Contrast Checker: просто введите шестнадцатеричные номера обоих цветов в формате #FFFFFF, и программа покажет коэффициент.
  • Логотип. Требования к контрасту, масштабированию и альтернативному тексту не относятся к логотипу компании. Если у вас есть монохромное изображение логотипа, вы можете смело его использовать. Если нет, просто оставьте все как есть.
  • Цветовая схема. Дайте пользователю возможность выбрать один из пяти вариантов цвета верхнего слоя и фона:
    черный на белом
    белый на черном
    коричневый на бежевом
    темно-синий на голубом
    зеленый на темно-коричневом
    Выбор этих цветов обусловлен особенностями цветовосприятия при разных нарушениях зрения: некоторые цвета люди могут различать легко, а другие могут вообще не видеть.
  • Лендинг. Согласно ГОСТу, длина страницы не должна превышать 2-3 экрана. То есть полноценный лендинг не может быть совместим с версией для слабовидящих.
  • Отсутствие посторонних включений. Текст должен быть линейным, без отвлекающих элементов. Людям с плохим зрением и так сложно воспринимать электронный контент, а из-за отвлекающих элементов, рекламных блоков и ненужной перелинковки им становится еще сложнее. Вставки с дополнительной информацией об акциях, блоки “также читайте” в середине статьи, автоматически открывающиеся окна - все это сильно мешает пользователям с плохим зрением.
  • Отсутствие ограничений по времени. На сайте не должно быть временных ограничений на действия (например, перенаправление на другую страницу через N секунд). Пользователи с нарушениями зрения нуждаются во времени, чтобы прочитать содержимое
  • Аккуратная верстка текста. Важно структурировать текст на абзацы, заголовки и подзаголовки, а также использовать теги . Помните, что люди с плохим зрением часто используют программы, которые читают текст вслух. Такие программы сначала читают заголовки.
  • Нет pdf-файлов. Весь контент должен быть размещен на страницах сайта. Это значит, что адаптация для слабовидящих не подразумевает использование PDF-файлов для загрузки. Если они необходимы, убедитесь, что они могут быть легко увеличены.
  • Применение таблиц. Таблицы на вашем сайте должны быть простыми. Несколько уровней вложения в заголовке не нужны.
  • Требования относительно кеглей шрифта, отступов, интервалов, интерлиньяжа. Согласно ГОСТу критерии к разметке текстового контента выглядят следующим образом:
    ширина каждой строки текста не превышает 80 символов;
    выравнивание текста по ширине не используется;
    интервалы между строками внутри абзацев минимум в 1,5 раза больше размера шрифта;
    промежутки между абзацами минимум в 1,5 раза больше межстрочных интервалов и минимум в 2 раза больше размера шрифта;
    расстояние между буквами должно быть минимум 0,12 размера шрифта;
    расстояния между словами не должны быть меньше 0,16 размера шрифта.
  • Капча. Чтобы ваш сайт был доступен для слепых пользователей, не используйте CAPTCHA. Если это абсолютно необходимо, используйте CAPTCHA с аудиоверсией.

Сколько стоит разработка версии для слабовидящих?

Стоимость определяется количеством экранов, сложностью дизайна и функционалом. Точная цена разработки версии для слабовидящих определяется после заполнения брифа. Наш менеджер может предварительно оценить стоимость по телефону или на личной встрече.

Как удобнее с вами связаться?

Заполняя форму, вы даете согласие на обработку персональных данных

 
 

Начните свой проект

С чего начнем?

Заполняя форму, вы даете согласие на обработку персональных данных

Обсудить проект

С чего начнем?

Заполняя форму, вы даете согласие на обработку персональных данных

Подобрать тариф по продвижению сайта

Заполняя форму, вы даете согласие на обработку персональных данных

Сколько стоит поддержка сайта?

Заполняя форму, вы даете согласие на обработку персональных данных

Сколько стоит проект?

Заполняя форму, вы даете согласие на обработку персональных данных

Сколько стоит реклама?

Заполняя форму, вы даете согласие на обработку персональных данных

Сколько стоит сайт?

Заполняя форму, вы даете согласие на обработку персональных данных

Сколько стоит SEO-продвижение?

Заполняя форму, вы даете согласие на обработку персональных данных

Заказать анализ конкурентов

Заполняя форму, вы даете согласие на обработку персональных данных

Заказать бесплатный экспресс-аудит сайта

Почему нужен аудит, что хотите улучшить?

Заполняя форму, вы даете согласие на обработку персональных данных

Заказать расширенный аудит сайта

Что нужно анализировать?

Что хотите улучшить на сайте?

Заполняя форму, вы даете согласие на обработку персональных данных

Консультация
по индивидуальному проекту

Заполняя форму, вы даете согласие на обработку персональных данных

Заказать маркетинговое исследование

Заполняя форму, вы даете согласие на обработку персональных данных

Подобрать тариф по поддержке сайта

Нужно делать:

Требуется редизайн и техническая доработка

Заполняя форму, вы даете согласие на обработку персональных данных

Заявка на диагностику сайта

Заполняя форму, вы даете согласие на обработку персональных данных