Барьеры в вебе

Кто я?

• Фронтенд-разработчица.
• Пишу, перевожу статьи и рассказываю про доступность.
• Редактор раздела о доступности в Доке — справочнике для разработчиков.

Виды барьеров в вебе

• Код.
• Дизайн — UX (User Experience), UI (User Interface).
• Юзабилити.
• Тексты — основные и микротексты.
• Другой контент сайтов — видео, анимация, картинки, графики.

Какие барьеры обсудим (1/2)

• Плохая поддержка клавиатуры.
• Маленькая область клика.
• Элементы управления без текста.
• Элементы управления без уникального текста.
• Поля без подписей — лейблов.
• Анимация и видео.
• Низкая контрастность.
• Слишком высокая контрастность.

Какие барьеры обсудим (2/2)

• Яркие цвета.
• Передача смысла только цветом.
• Невозможность увеличить интерфейс.
• Запутанная структура страницы.
• Сложная навигация.
• Отсутствующее или плохое описание картинок.
• Тексты с аббревиатурами.

Для кого это барьер

• Люди с особенностями моторики, которые пользуются клавиатурой.
• Пользователи скринридеров.
• Продвинутые пользователи, которые используют клавиатуру для навигации.

Где плохо поддерживается

• Сайт Zara — незаметный и пропадающий из поля зрения фокус.
• Сайт Prada — фокус отменён, зачем-то есть skip link.
• Музей IKEA — еле заметный фокус.

Как избежать барьер

• Не отменять стили фокуса!
• Прорабатывать стили фокуса, делать его заметным.
• Если элемент скрыт визуально, на него не надо давать попадать пользователям.

Не надо так 😞

            input:focus,
            a:focus,
            button:focus {
                outline: none;
            }
        

Дизайнер сказал «Некрасиво»

            a:focus-visibe {
                outline: 2px solid green;
                outline-offset: 4px;
            }
        

Для кого это барьер

• Люди с особенностями моторики, особенно мелкой моторики — с тремором, артритом и другие.
• Люди с большими пальцами.
• Пользователи мобильных устройств.

Как избежать барьер

• Рекомендуемый размер элементов управления — 44 × 44 пикселя и больше.
• Если инлайновый элемент — размер фразы или целого блока текста.
• Добавить другой элемент большего размера с такой же функцией.

Для кого это барьер

• Люди с особенностями моторики.
• Люди с когнитивными особенностями.
• Любые пользователи голосового управления.

Игра «Что значит иконка» 🤔

Как избежать барьер

• Просто подписывайте элементы управления.
• Используйте понятные иконки.
• Скрытые имена элементов должна быть краткими, чёткими и предсказуемыми.

Что насчёт атрибута title?

Недостатки title

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

А как насчёт тултипов?

Для кого это барьер

• Пользователи скринридеров.
• Пользователи голосового управления.

Как избежать барьер

• Избегать повторяющихся названий у кнопок, ссылок и других интерактивных элементов.
• Названия должны точно описывать, что делает элемент.

Для кого это барьер

• Пользователи скринридеров.
• Слабовидящие пользователи.
• Пользователи с когнитивными особенностями.
• Люди с проблемами с краткосрочной памятью.

Как избежать барьер

• Добавляйте лейблы к полям с помощью тега <label>.
• Если не можете добавить видимые лейблы, хотя бы используйте aria-label для видимых только вспомогательным технологиям подписей.
• Следите за уровнем контрастности у плейсхолдеров, если нет подсказок к полям и видимых лейблов.

Для кого это барьер

• Люди со светочувствительной эпилепсией.
• Люди с вестибулярными особенностями — мигренями или те, кого легко укачивает.

Какая анимация опасная

• С красными вспышками — самая опасная.
• С яркими вспышками — менее опасная.

Как избежать барьер

• Рекомендуемая частота вспышек — не больше 3 раз в секунду.
• Проверяйте видео с помощью специальных програм. Например, Photosensitive Epilepsy Analysis Tool (PEAT).
• Дайте пользователям остановить видео.
• Предупреждайте пользователей об опасной анимации.

Какая анимация укачивает

• Плавная прокрутка.
• Паралакс-эффекты.
• Любая другая анимация с движущимися в разных направлениях элементами.

Примеры такой анимации

• Micro-Revolutions, New Yorker.
• Bussed Out, Guardian.
• Killing the Colorado: Explore the Robot River, ProPublica.
• Главная Vimeo, к примеру, слайдер внизу страницы.
• Poor Millennials feature, The Huffington Post. Осторожно ⚠️

Как избежать барьер

• Использовать для анимации CSS-медиафичу prefers-reduced-motion.
• Дайте пользователям управлять анимацией.
• Добавляйте в начало страницы ссылку на версию текста без анимации.

prefers-reduced-motion

            @media (prefers-reduced-motion: no-preference) {
                html {
                    scroll-behavior: smooth;
                }
            }
        

Для кого это барьер

• Люди с особенностями зрения — слабовидящие, пользователи с катарактой и другие.
• Люди, которые открывают сайт при ярком солнце или освещении в помещении.

Как избежать барьер

• Следите за уровнем контрастности.
• Минимальное соотношение — 4.5:1 для основного текста и картинок с текстом, 3:1 для крупного текста.
• Максимальное соотношение — минимум 7:1 для основного текста и картинок с текстом, 4.5:1 для крупного текста.

Полезные инструменты

• WebAIM Contrast Checker.
• Инструменты разработчика в браузерах.
• Практически все интрументы для тестирования — axe, Lighthouse.
• Плагины для Figma — A11y – Color Contrast Checker, Adee Comprehensive Accessibility Tool.

Для кого это барьер

• Люди с расстройствами аутистического спектра.
• Люди со светочувствительностью и астигматизмом.
• Люди со светочувствительной эпилепсией.
• Люди с мигренями.

Как избежать барьер

• Избегать чисто белого текста на чисто чёрном фоне и наоборот.
• Давать людям возможность выбрать цветовую тему.

Для кого это барьер

• Люди с расстройствами аутистического спектра.
• Люди с мигренями.
• Люди с тревожными расстройствами.

Опасные цвета

Как избежать барьер

• Не используйте красный, оранжевый и жёлтый как основные цвета.
• Используйте более приглушённые оттенки этих цветов.
• Тестируйте сайты с этими цветами в качестве брендовых с реальными пользователями.
• Давайте людям возможность выбрать цветовую схему.
• Дружелюбные цвета для людей с расстройствами аутестического спектра — бежевый, розовый, лиловый, зелёный, синий.

Для кого это барьер

• Люди с цветовой слепотой — дальтонизмом.
• Люди которые просто не разбираются в цветах.
• Люди со старыми мониторами и экранами.

Как избежать барьер

• Подписывайте цвета.
• Если используете фирменные названия цетов, то расшифровывайте их.
• Используйте паттерны.

Для кого барьер

• Люди с особенностями зрения — слабовидящие, пользователи со сниженным зрением.
• Пользователи мобильных устройств.

Не надо так 😞

            <meta name="viewport"
                content="width=device-width, initial-scale=1, user-scalable=no"
            >
        

            <meta name="viewport"
                content="width=device-width, initial-scale=1, maximum-scale=1"
            >
        

Как избежать барьер

Не используйте maximum-scale=1 и user-scalable=no.

Для кого это барьер

• Люди с когнитивными особенностями — с дислексией, синдромом дефицита внимания, синдромом аутестического спектра.
• Пользователи скринридеров.

Как избежать барьер

• Используйте семантические HTML-теги для структуры страницы и обозначения её отдельных частей — <h1>–<h6>, <main> и другие.
• Соблюдайте логическую и визуальную иерархию заголовков.
• Добавляйте ориентиры на страницу, но не перестарайтесь.
• Не забывайте про отступы между блоками текста и вокруг него.

Иерархия заголовков

            <h1>Главный заголовок</h1>
                <h2>Второстепенный заголовок</h2>
                    <h3>Заголовок, который связан со второстепенным</h3>
                <h2>Ещё один второстепенный заголовок</h2>
        

Ориентиры (1/2)

• <header> — хедер страницы.
• <footer> — футер страницы.
• <nav> — навигация.
• <main> — основное содержимое.
• <section> — независимая часть основного содержимого.

Ориентиры (2/2)

• <aside> — дополнительное содержимое, которое не теряет смысл отдельно от основного.
• <form> — форма.
• Роль search — область поиска.

Другие полезные теги

• <h1>–<h6> — заголовки шести уровней.
• <a> — ссылка.
• <button> — кнопка.
• <ul> — ненумированный список.
• <ol> — нумерованный список.

Для кого это барьер

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

Как избежать барьер

• Добавляйте в основную навигацию в хедере только важные ссылки.
• Следите за консистентностью навигации. Она должна располагаться в одном месте и выглядеть одинаково.
• Используйте для навигации ориентир <nav>.

Для кого это барьер

• Люди с особенностями зрения, которые пользуются скринридерами.
• Люди когнитивными особенностями, которые не могут понять картинку.

Как избежать барьер

• Описывать важные картинки в alt.
• Стараться рассказать о картинке кратко и по существу.
• Ссылки, шутки, пасхалки, хештеги и прочее надо добавлять в пост или на страницу, а не в alt.
• Не дублировать в alt текст, который уже есть на странице.
• Не использовать в описании слово «картинка», «изображение».

Для кого это барьер

• Люди с когнитивными особенностями и нейроотличиями — синдром аутестического спектра, дислексия, сниженный уровень интеллекта.
• Люди с врождённой глухотой.
• Пользователи, которые не знакомы с темой.

Игра «Пойми без Гугла»

Идея ББК была навеяна УДК.

ББК состоит из нескольких частей — основных таблиц, ОТД, СТД и АПУ.

Авторскими правами на ББК владеют РНБ, РГБ и БАН.

Как избежать барьер

• Расшифровывайте аббревиатуры в тексте при первом упоминании.
• Если аббревиатур много, подумайте о глоссарии — словаре с разъяснением терминов.
• В крайнем случае используйте <abbr> с title или тултипы.

Текст с расшифровками

Идея ББК (Библиотечно-библиографической классификации) была навеяна Универсальной десятичной классификацией или коротко УДК.

ББК состоит из нескольких частей — основных таблиц, ОТД (общих типовых делений), СТД (специальных типовых делений) и АПУ (алфавитно-предметного указателя).

Авторскими правами на ББК владеют РНБ (Российская национальная библиотека ), РГБ (Российская государственная библиотека) и БАН (Библиотека Академии наук).

Тег <abbr> на практике

            <p>Идея
                <abbr title="Библиотечно-библиографической классификации">ББК</abbr>
            </p>
        

Недостатки <abbr>

• Недоступное решение для пользователей мобильных устройств.
• На тег нельзя сделать фокус с клавиатуры, так что её пользователи тоже не увидят расшифровку.
• Подчёркивание не очень хорошо видно.
• Скринридеры не зачитывают тег по умолчанию, надо менять настройки.
• RSS-аггрегаторы и сервисы для отложенного чтения игнорируют определения из title.

Вопросы?

• Твиттер
• Блог про доступную разработку
• Список моих статей, переводов и выступлений
• Рассказать про доступность в Доке U•ᴥ•U

Следующее событие