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

Лена Райан

Поговорим про:

• популярные заблуждения;
• законы;
• опыт слабовидящего человека;
• что такое хорошо и что такое плохо.

Основные заблуждения

Нет таких клиентов? Точно?

tabindex — зло

Легко внедрить после релиза

Долго и дорого?

• 10-15 дней на изучение
• Время задачи + 5-7%
• Все счастливы

Почему только слабовидящие?

ДоступностьВДС

Что такое ВДС?

Предполагаемая польза

• Настройка отображения под себя
• Беспрепятственный доступ к информации
• Расширение аудитории сайта

Почему внедряют версии для слабовидящих?

ГОСТ Р 52872-2012

Интернет-ресурсы. Требования доступности для инвалидов по зрению

Введён 01.01.2014

Приказ Минкомсвязи России №483

Об установлении Порядка обеспечения условий доступности для инвалидов по зрению официальных сайтов федеральных органов государственной власти, органов государственной власти субъектов Российской Федерации и органов местного самоуправления в сети «Интернет»

От 30.11.2015

Подытог

• Помощь слабовидящим в получении информации
• Для нескольких категорий людей с нарушениями зрения
• Требуется по закону

ГОСТ Р 52872-2012 ГОСТ Р 52872-2019

ГОСТ Р 52872-2019

Интернет-ресурсы и другая информация, представленная в электронно-цифровой форме. Приложения для стационарных и мобильных устройств, иные пользовательские интерфейсы. Требования доступности для людей с инвалидностью и других лиц с ограничениями жизнедеятельности

Введён 01.04.2020. Разработан на основе WCAG 2.0.

Органы государственной власти в технических заданиях на проектирование и разработку интерфейсов своих официальных сайтов предусматривают наличие альтернативных текстовых версий таких сайтов (далее – версия для инвалидов по зрению), переход к которым осуществляется с главной страницы официального сайта в случае, если сам официальный сайт исходно не соответствует требованиям пункта 4 настоящего Порядка

Требования формальным языком

• нетекстовая информация и нетекстовые материалы, представленные на официальных сайтах органов государственной власти, должны присутствовать также и в версии для инвалидов по зрению в виде краткого описания такой нетекстовой информации, за исключением нетекстовой информации и нетекстовых материалов, используемых только с целью украшения и визуального оформления официальных сайтов органов государственной власти;
• графические файлы формата PDF, содержащие документы в графическом виде, представленные в разделах официальных сайтов органов государственной власти, должны присутствовать также и в версиях для инвалидов по зрению в текстовом формате;
• наличие возможности изменения размеров текстовой информации до 200%, шрифта, интервала между буквами (кернинг), а также цветовой схемы;
• информация, относящаяся к работам (услугам) для инвалидов по зрению, должна быть представлена на уровне доступности специализированных интернет-ресурсов для инвалидов по зрению.

Перевод на человеческий язык

• Подписанные контентные изображения
• Доступные PDF-вложения или их текстовые версии
• Увеличение размера шрифта до 200%
• Изменение расстояния между буквами
• Изменение цветовой схемы

Отдельная версия не понадобится!

• Подписанные контентные изображения 🠦 Осмысленное заполнение атрибута alt
• Увеличение размера шрифта до 200% 🠦 Проработанный адаптив
• Изменение расстояния между буквами 🠦 Читабельный шрифт
• Изменение цветовой схемы 🠦 Доступные, контрастные цвета + темизация

И зачем тогда отдельная версия?

На что обратить внимание

• Какими инструментами пользуются слабовидящие?
• Каким образом просматривают сайты?
• Нужна ли слабовидящим отдельная версия?

Какие инструменты нужны
слабовидящему

• Скрин-зум
• Большой монитор
• Экранная лупа
• Тёмная тема / Высококонтрастный режим
• Скринридер / Голосовой синтезатор

Масштабирование
и большие мониторы

Экранная лупа

Тёмная тема /
режим высокой контрастности

Скрин-зум
+ голосовые синтезаторы

Как слабовидящие просматривают сайты?

Нейропатия Лебера

Что такое "плохо"

Сайт РЖД

Сайт РЖД и ВДС

Спортшкола

Спортшкола и ВДС

Сайт Мончегорской теплосети

Мончегорская теплосеть и ВДС

Нет оформления= Нет информации

Вместо инклюзивности— дискриминация

Bershka

Почему ВДС — это плохая идея?

• Неуниверсальное решение
• Вместо инклюзивности — дискриминация
• За слабовидящего уже принято решение
• Дополнительные затраты
• По закону хватит доступного основного сайта
• Нужны далеко не всем

И зачем тогда отдельная версия?

Что такое "хорошо"

Aviasales

GOV.UK

            <li>
                <button
                  aria-controls="super-navigation-menu"
                  aria-expanded="false"
                  aria-label="Show Government activity menu"
                  data-text-for-hide="Hide Government activity menu"
                  data-text-for-show="Show Government activity menu"
                  type="button">
                  Government activity
                </button>
            </li>
        

accessibilityunity.com

            <form method="POST" target="feedback">
              <label>
                  <span>Электронная почта</span>
                  <input type="email" name="email">
                  <span aria-live="assertive">Укажите почту</span>
              </label>
              <label>
                  <span>Что интересует</span>
                  <textarea name="message" placeholder="Вопрос..."></textarea>
              </label>
              <button type="submit">Отправить</button>
              <span>Спасибо! Ответим в почте)</span>
            </form>
        

А как у них?

Российские компании

Как проверить сайт

Имитаторы нарушений зрения

Контрастный текст

Навигация с клавиатуры

• outline!
• Или стили
• Забываем про положительный tabindex

Валидаторы и чек-листы

• Валидатор W3C
• WAVE, AXE
• A11y-инструменты в панели разработчика
• Чек-листы, шпаргалки по скринридерам, ссылки на примеры реализации — статья на gov.design

Нужно больше знаний?

• WCAG 2.1
• Подборка на Веб-стандартах
• Статьи про доступность на Smashing Magazine
• Доклады, обучающие видео, курсы

Выводы

• Думаем о пользователе
• Минимум усилий 🠦 Заметная польза

Делая сайты доступными, вы делаете вклад в своё будущее