Оригинал статьи: http://accessibility.voxmedia.com/
Доступность — залог классного опыта взаимодействия для всех категорий пользователей. Этот чек-лист можно использовать на любом этапе проекта, чтобы проверить, насколько доступным получается ваш сайт или приложение.
Дизайнерам
- Убедитесь, что текст достаточно контрастный относительно фона
Согласно WCAG (Руководству по обеспечению доступности веб-контента), соотношение контрастов между текстом и фоном должно быть как минимум 4.5 к 1. Если у вас шрифт размера от 24px или жирный шрифт размера от 19 px, то достаточно соотношения 3 к 1 по контрастности (хотя всегда нужно проверять опытным путем, насколько четко читается текст: иногда размер шрифта в цифрах совершенно не соответствует визуальному восприятию его размера). С особенной осторожностью размещайте текст поверх изображений.
Источник: Salesforce UX
- Не полагайтесь только на цвет, если нужно передать важное сообщение
Некоторые люди не различают цвета. Поэтому, если вы хотите создать удобный и универсальный интерфейс, не используйте цвет как единственный индикатор для передачи информации. Можно добавить кроме цвета иконку, подчеркивание или подпись.
Источник: UCLA
- Для создания контраста, учитывайте не только оттенки цветов, но и их значения (value)
Если взять два оттенка и сравнить их значения (value) без учета цвета (например, в ч/б), они часто выглядят очень похоже. Если вы хотите повысить контрастность, сочетайте не только разные оттенки, но и разные value цветов.
Источник: UCLA
- Важную информацию не стоит передавать посредством одного только цвета, изображения или другой сенсорной характеристики
Изображение, форма, размер, положение в пространстве, ориентация, цвет — все это сенсорные характеристики. В то же время, не всем пользователям доступны все эти характеристики в полной мере. Кто-то не различает цвета, кто-то не знает, какие объекты на ощупь, а кто-то иначе ориентируется в пространстве.
Если для понимания информации необходимы какие-то дополнительные материалы, убедитесь, что они передаются не только посредством одной из сенсорных характеристик, но и как-то еще. Например, вместо того, чтобы писать в тексте: “Сравните правильный и неправильный примеры на рисунке ниже”, можно расписать ключевые отличия текстом, обозначить правильный и неправильный варианты цветом и еще добавить к рисунку подробную подпись.
Источник: W3C
- Проектируйте выделенные состояния так, чтобы пользователю было понятно, где он и куда двигаться дальше
Выделенное состояние объекта должно быть заметным и очевидным. Люди, которые используют для навигации клавиатуру, должны понимать, какой объект сейчас “в фокусе” и куда от него можно перейти.
Источник: W3C
- Помогите пользователю заполнить форму без ошибок, а при необходимости — исправить
Названия полей не должны совсем пропадать из виду, даже если курсор уже стоит внутри поля. Пользователи должны четко понимать, что нужно ввести в каждое поле и в каком формате. В сообщении об ошибке нужно не только пояснить ошибку, но и рассказать, как ее исправить. И да — не обозначайте ошибки только цветом, помните? Добавьте иконку или пояснение текстом.
Источник: W3C
- Напишите нормальные alt-тексты для картинок
Слабовидящие пользователи буквально “читают” интернет: они пользуются специальными браузерами с функцией “проговаривания”, которая буквально озвучивает пользователю все тексты на странице.
Когда такой “говорящий” браузер видит картинку, он ищет прописанный для нее alt-текст и читает его вслух. Если alt-текста нет, браузер просто говорит “картинка” — и пользователю остается только гадать, что на этой картинке.
При составлении alt-текста, постарайтесь описать ключевые элементы картинки и что на ней происходит. Если на рисунке текст, опишите в какой он форме и перепечатайте сам текст: например, “на белой доске маркером написана цитата «Это цитата»”.
Источник: WebAim: The Basics of Good Alt Text
- Если процесс нельзя сделать доступным, продумайте запасной путь к той же информации
Некоторые элементы интерфейса (например, интерактивную карту) сложно сделать доступными. В таких случаях лучше предложить пользователям альтернативный вариант той же функциональности. Или хотя бы описать текстом все детали процесса, которым посетители с ограниченными возможностями не могут воспользоваться.
- Тексты и лейауты должны быть максимально чистыми и согласованными
Будьте последовательны в оформлении, названии и расположении функций. Если компоненты одинаково называются, они должны одинаково выглядеть и работать. Используйте заголовки, чтобы создать иерархию. Пишите чисто и ясно и постарайтесь не использовать жаргон и фразеологизмы.
Источник: Viget
Разработчикам
- Используйте HTML-элементы, соответствующие вашему контенту
HTML-элементы “сообщают” браузеру, что за контент в них содержится и как этот контент нужно отображать и обрабатывать. Дерево доступности — это функция браузера, которая обеспечивает совместимость с устройствами чтения с экрана. При построении дерева доступности, мы отталкиваемся от структуры страницы. Выбор правильного элемента в правильном контексте — это самых простой способ обеспечить доступность всем пользователям.
Источник: WebAIM
- Поддерживайте навигацию через клавиатуру
В браузерах можно легко перемещаться между ссылками, полями и кнопками при помощи клавиши Tab. Однако разработчики иногда неосознанно ломают эту функциональность: например, когда используют CSS для изменения порядка элементов, или когда прячут элементы из tab flow (к примеру, создавая ложные кнопки c Java Script или отключая функцию tab через tabindex=”-1”). Еще бывает наоборот — разработчики прячут какие-то элементы формы, но забывают убрать из tab flow: тогда скрытые элементы формы можно выбрать переключившись на них через tab.
Источник: WebAIM
- Поймите и используйте ориентиры HTML
Возможно, пользователи вспомогательных устройств не хотят изучать ваш контент линейно, а предпочитают посмотреть схему страницы и найти сразу то, что их интересует. Ориентиры помогают обозначить конкретные области (например, “главная”, “форма”, “навигация”) и упрощают поиск нужного раздела.
Источник: A List Apart
- Напишите нормальные alt-тексты для картинок
Слабовидящие пользователи буквально “читают” интернет: они пользуются специальными браузерами с функцией “проговаривания”, которая буквально озвучивает пользователю все тексты на странице.
Когда такой “говорящий” браузер видит картинку, он ищет прописанный для нее alt-текст и читает его вслух. Если alt-текста нет, браузер просто говорит “картинка” — и пользователю остается только гадать, что на этой картинке.
При составлении alt-текста, постарайтесь описать ключевые элементы картинки и что на ней происходит. Если на рисунке текст, опишите в какой он форме и перепечатайте сам текст: например, “на белой доске маркером написана цитата «Это цитата»”.
Источник: WebAim: The Basics of Good Alt Text
- Проектируйте выделенные состояния так, чтобы пользователю было понятно, где он и куда двигаться дальше
Выделенное состояние объекта должно быть заметным и очевидным. Люди, которые используют для навигации клавиатуру, должны понимать, какой объект сейчас “в фокусе” и куда от него можно перейти.
Источник: W3C
- Помогите пользователю заполнить форму без ошибок, а при необходимости — исправить
Названия полей не должны совсем пропадать из виду, даже если курсор уже стоит внутри поля. Пользователи должны четко понимать, что нужно ввести в каждое поле и в каком формате. В сообщении об ошибке нужно не только пояснить ошибку, но и рассказать, как ее исправить. И да — не обозначайте ошибки только цветом, помните? Добавьте иконку или пояснение текстом.
Источник: W3C
- Используйте атрибуты ARIA, где это уместно
ARIA — это набор специальных атрибутов для обеспечения доступности. Это необязательная, но полезная спецификация для определения разметки HTML, при динамическом взаимодействии (обычно JavaScript).
Атрибуты ARIA помогают “объяснить” браузеру и вспомогательным устройствам, как будет меняться динамический контент и в чем его назначение. Динамические сообщения об ошибке можно вывести на читалку с экрана, кнопки можно связать с соответствующим контентом — в общем, многие полезные состояния можно выразить на уровне кода.
Источник: W3C Guide to Using Aria
- Дайте пользователям возможность пропустить навигацию верхнего уровня для доступа к основному контенту
Людям, которые используют клавиатуру для навигации, часто приходится проходить через все навигационное меню, чтобы наконец-то добраться до контента на странице. Чтобы избавить их от этой необходимости, обычно используют специальную кнопку вверху страницы (ее видно только в активном состоянии). По клику на эту кнопку, пользователь сразу переходит к содержимому страницы.
Источник: WebAIM
- Сделайте тексты ссылок полезными
Вспомогательные устройства умеют находить все ссылки на странице и представлять их пользователю в разных формах. Но все это совершенно бесполезно для пользователя, если текст ссылки звучит как “нажми сюда”. Сделайте тексты ссылок полезными, чтобы пользователи сразу понимали, на что они кликают и что произойдет дальше.
Источник: Smashing Magazine
- Не используйте в качестве псевдоэлементов картинки и иконки
Вспомогательные технологии “ищут” контент, который нужно представить пользователю, в HTML. В CSS можно создавать псевдоэлементы, но к ним пока нельзя добавлять alt-текст, так что если вы используете в качестве псевдоэлементов картинки или иконки, пользователи вспомогательных технологий “упустят” этот контент.
Источник: Simply Accessible
- Позаботьтесь, чтобы вспомогательные технологии воспринимали SVG-шки
SVG-графику часто используют для иконок в интерактивных элементах на сайтах. В этих случаях, у каждой SVG-иконки должен быть тайтл или встроенный текст (который обычно скрыт от глаз пользователей, но его видят вспомогательные технологии).
Источник: Sitepoint
- Спрячьте от читалок декоративные элементы
Декоративные элементы — это разделительные линии, значки цитат, неинформативные иконки и другие украшения. Все их можно спрятать от читалок: тогда слабовидящие пользователи будут взаимодействовать только с полезным контентом на странице, не отвлекаясь на декорации, которые они все равно не могут оценить. Чтобы скрыть элемент, добавьте к нему aria-hidden=”true”
Источник: W3C - Если процесс нельзя сделать доступным, продумайте запасной путь к той же информации
Некоторые элементы интерфейса (например, интерактивную карту) сложно сделать доступными. В таких случаях лучше предложить пользователям альтернативный вариант той же функциональности. Или хотя бы описать текстом все детали процесса, которым они не могут воспользоваться. - Ссылки должны визуально выделяться и иметь понятные выделенные (:focus) и активные (:active) состояния
По внешнему виду ссылки должно быть сразу понятно, что она в выделенном или активном состоянии. Это очень полезная штука для пользователей, которые не могут использовать мышь и курсор — или плохо видят.
Источник: WebAIM - В HTML-документе должен быть атрибут языка
Атрибут lang в используется для определения языка, на котором написан текст. Благодаря этому поисковые машины выдают по запросу пользователя релевантные результаты на нужном языке. А еще благодаря этому атрибуту читалка может автоматически переключиться на правильный язык и прочитать текст с нужным акцентом и пунктуацией. Пример атрибута — <html lang="en">
Источник: Paciello Group
Менеджерам проектов
- Вникните в тему доступности веб-контента
Изучите рекомендации по дизайну , разработке и тестированию контента. Почитайте требования и определите стандарты доступности вашего продукта, которые потом можно передать тестировщикам.
- При планировании проекта и спринтов, заложите время на проработку доступности
Доступность — это не просто чек-лист, по которому нужно пройтись в самом конце, если захочется. Проработка доступности должна быть вшита в процесс на каждом этапе проекта, на уровне каждого специалиста. Имейте это в виду при планировании проекта и спринтов.
- Подчеркивайте важность доступности среди прочих достижений команды
Нам нравится, когда наша работа нравится. Обычно хвалят то, что сразу видно: красивый дизайн, чистый код, быстрые переходы, продуманные процессы. В таких случаях, всегда подчеркивайте работу команды по обеспечению доступности контента. Расскажите собеседникам о контрасте, умной навигации с клавиатуры, понятных текстах и иерархии.
- Создавайте доступные продукты и инструменты
Когда вы думаете, какой проект взять следующим или какую функцию запилить, всегда помните о доступности. Создавайте доступные продукты, а не препятствия на пути к доступности. К примеру, если вы разрабатываете приложение для публикации контента и забыли о возможности добавлять alt-текст — считайте, что только что лишили своих пользователей создавать доступный контент.
- Станьте адвокатом доступности
Объясните своей команде и всем заинтересованным лицам, почему доступность — это важно и зачем ее прорабатывать на всех этапах проекта. А ответ прост: доступность делает наши продукты — и нас самих — лучше.
Тестировщикам
- Прогоняйте каждую страницу через расширение WAVE для Chrome.
Это, возможно, не идеальный инструмент, но он дает хорошую основу при выявлении недочетов доступности.
- Пользователи должны иметь возможность ходить по сайту через клавиатуру.
Проверьте, как работает навигация и выпадающие меню с клавиатуры. Должна быть возможность пройти tab-ом через всю страницу и нигде не застрять (а это часто случается на модальных окнах или в наведенных состояниях элементов — кнопках, ссылках и т.п.)
- Должна быть возможность перемещаться по контенту при помощи читалки.
Для этого неплохо работает встроенный эппловский Voice Over. В инструмент встроен тьюториал по использованию.
- Убедитесь, что у контента адекватная архитектура и иерархия.
На странице должны быть заголовки, кликабельные элементы должны быть четко выделены, и по ним должно быть удобно перемещаться. Тексты и формы должны читаться даже при слабом освещении и с небольшого расстояния. Если вы чувствуете, что с читаемостью могут быть проблемы — это уже тревожный звоночек.
- У всех графиков и картинок должен быть alt-текст, чтобы пользователи читалок или посетители с плохим интернетом понимали, что там на картинках.
- Декоративные элементы должны быть скрыты для читалок с экрана.
Редакторам
- Напишите нормальные alt-тексты для картинок
Слабовидящие пользователи буквально “читают” интернет: они пользуются специальными браузерами с функцией “проговаривания”, которая буквально озвучивает пользователю все тексты на странице.
Когда такой “говорящий” браузер видит картинку, он ищет прописанный для нее alt-текст и читает его вслух. Если alt-текста нет, браузер просто говорит “картинка” — и пользователю остается только гадать, что на этой картинке.
При составлении alt-текста, постарайтесь описать ключевые элементы картинки и что на ней происходит. Если на рисунке текст, опишите в какой он форме и перепечатайте сам текст: например, “на белой доске маркером написана цитата «Это цитата»”.
Источник: WebAim: The Basics of Good Alt Text
- Инженерам-редакторам: подумайте, как сделать доступными интерактивные штуки
Например, SVG-графику часто используют для иконок в интерактивных элементах на сайтах. В этих случаях, у каждой SVG-иконки должен быть тайтл или встроенный текст (который обычно скрыт от глаз пользователей, но его видят вспомогательные технологии).
Иногда просто не хватает времени или ресурсов, чтобы сделать определенные компоненты доступными. В таких случаях имеет смысл проработать дополнительные flow, которыми могут пойти пользователи читалок с экрана. Ну или программа минимум — описать все происходящее в интерактивных элементах в формате alt-текста.
- Выражайтесь предельно кратко и четко
Пишите понятные тексты
Избегайте жаргона и фразеологизмов
Добавляйте заголовки, чтобы организовать информацию
Источник: Interactive WCAG 2.0
- Сделайте тексты ссылок полезными
Вспомогательные устройства умеют находить все ссылки на странице и представлять их пользователю в разных формах. Но все это совершенно бесполезно для пользователя, если текст ссылки звучит как “нажми сюда”. Сделайте тексты ссылок полезными, чтобы пользователи сразу понимали, на что они кликают и что произойдет дальше.
Источник: Smashing Magazine
- Важную информацию не стоит передавать посредством одного только цвета, изображения или другой сенсорной характеристики
Изображение, форма, размер, положение в пространстве, ориентация, цвет — все это сенсорные характеристики. В то же время, не всем пользователям доступны все эти характеристики в полной мере. Кто-то не различает цвета, кто-то не знает, какие объекты на ощупь, а кто-то иначе ориентируется в пространстве.
Если для понимания информации необходимы какие-то инструкции, убедитесь, что они даются не только посредством одной из сенсорных характеристик, но и как-то еще. Например, вместо того, чтобы писать в тексте: “Сравните правильный и неправильный примеры на рисунке ниже”, можно расписать ключевые отличия текстом, обозначить правильный и неправильный варианты цветом и еще добавить к рисунку подробную подпись.
Источник: Sensory Characteristics
Инструменты
Эти инструменты помогут усилить доступность ваших проектов:
Расширение WAVE для Chrome поможет проверить доступность всех ваших продуктов
Сервис для проверки веб-доступности вашего продукта
Color Contrast Analyzer — приложение для анализа контрастности цвета
Color Extractor Bookmarklet ищет все цвета в CSS и загружает их в Color Palette Evaluator
Color Safe делает доступные цветовые палитры
Color Oracle позволяет симулировать дальтонизм
Sim Daltonism позволяет симулировать дальтонизм
Инструмент для проверки читаемости текста поверх изображений
