Принципы доступности: все, что вам нужно знать

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

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

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

Пока действуют законы, помогающие людям с ограниченными возможностями, простой и эффективный дизайн выгоден всем пользователям. В конце концов, кому не нравится понятный контент? Бренды и предприятия все чаще интегрируют ит в свои стратегии дизайна, а не рассматривают их как второстепенную мысль, что приносит значительную пользу всем.

Есть несколько ключевых принципов, которых компании и бренды должны придерживаться, чтобы соответствовать стандартам доступности и создавать инклюзивные цифровые пространства. Здесь мы рассмотрим ключевые принципы доступности, чтобы разрушить дискриминационные барьеры и дать брендам возможность творить инклюзивно.

От POUR до WCAG мы готовы предоставить вам знания и практические навыки, необходимые для повышения доступности и универсального дизайна. Давайте углубимся.

Каковы четыре принципа доступности?
По сути, доступный дизайн – это просто хороший дизайн: эффективные, удобочитаемые визуальные элементы и интерфейсы. Ключ к хорошему дизайну? Контент, учитывающий ограничения конкретных членов аудитории – именно в этом и заключаются принципы POUR.

Принципы POUR были разработаны для обеспечения доступности веб-контента, но они могут быть применены практически к любой проблеме доступности. Это четыре руководящих принципа, на которых было построено WCAG (рекомендации по обеспечению доступности веб-контента). Что означает аббревиатура POUR? Давайте разберемся:

Доступно для восприятия
Контент вашего веб-сайта должен быть виден всем пользователям и легко читаем. Вы должны убедиться, что ваша информация и компоненты пользовательского интерфейса представлены таким образом, чтобы их было легко понять. Независимо от того, обладают ли ваши пользователи зрительными, слуховыми или тактильными ощущениями, ваши пользователи должны быть способны понимать информацию, а также работу пользовательского интерфейса

Доступ к вашим цифровым платформам упростится за счет устранения любых барьеров и предложения альтернативных методов доступа для пользователей с ограниченными органами чувств или утратой одного или нескольких из них. Это включает в себя:

Предоставление текстовых альтернатив (альтернативный текст) для любого нетекстового контента с использованием таких элементов, как подписи, крупный шрифт, шрифт Брайля, язык жестов и символы. Для пользователей со слабым зрением.
Предоставление расшифровок аудиофайлов
Субтитры и другие альтернативы для мультимедиа
Добавление текста в HTML, а не в CSS
Упрощение просмотра и прогрева контента пользователями за счет целенаправленного использования элементов управления цветом, контрастностью, размером текста и звуком.
Работоспособен
Компоненты интерфейса и навигации вашего веб-сайта должны быть удобны для всех, включая тех, кто не использует стандартную клавиатуру и мышь. Это включает в себя:

Не создавать контент таким образом, чтобы это могло вызвать судороги.
Обеспечение доступности адаптивных макетов и структур с клавиатуры.
Предоставление нескольких способов взаимодействия с вашим веб-сайтом.
Обеспечение предсказуемого отображения и функционирования вашего контента.
Предоставление пользователям достаточного времени для использования и чтения контента. Контроль пользователя над временными рамками / хронометражем.
Упрощение навигации по вашим интерфейсам и легкий поиск контента.
Понятно
Веб-контент должен быть простым для понимания, навигации и доступа независимо от способностей пользователя. Понятный веб-сайт обладает следующими функциями:

Соответствующий язык и уровень чтения
Предоставление определений для любых необычных слов, фраз, идиом и сокращений
Дополнительное представление информации, такой как:
Резюме перед длинными статьями
Подробные описания визуальной информации в графических схемах
Расшифровки видео или аудиофайлов
Обеспечение правильной разметки заголовков, списков, таблиц, полей ввода и структур контента
Согласованные стили шрифтов (семейства, цвета, размеры) на всех страницах
Простая структура навигации
Надежный
Ваш веб-сайт или приложение должны быть совместимы и легко интерпретироваться широким спектром пользовательских агентов, включая вспомогательные технологии, такие как программы чтения с экрана. Чтобы ваш веб-сайт был надежным, вы должны:

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

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

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

Существует три столпа:

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

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

Предоставление четких объяснений назначения ссылок, кнопок и пунктов меню.
The visual indicators of interactive elements (links, buttons) should be clear and consistent. Using trial-and-error should not be required for users
Make field labels and related elements as visible as possible.
Having large touch targets, a space between interactive elements, and a mouse path that is forgiving will make hovering and clicking more forgiving.
Элементы навигации на каждой странице должны располагаться в одном и том же месте и порядке на каждой странице, и активная страница или раздел должны быть идентифицированы.
Если пользователи не могут найти то, что они ищут, в главном меню, должны быть доступны поиск по сайту, ссылки на контент, карта сайта или аналогичная альтернативная навигация.
2. Видение
Примите во внимание, как можно просматривать ваш веб-сайт и управлять им. Отойти от экрана / ноутбука, хотя бы на несколько шагов, или снять очки – полезный способ понять, можете ли вы распознать каждый элемент на своей веб-странице. Взгляните на свои элементы и определите, всегда ли они различимы и узнаваемы.

Дизайн должен быть адаптирован к различным размерам экрана:
Маленький экран не должен быть переполнен элементами или слишком мал для чтения.
Элементы на больших экранах не должны становиться размытыми из-за чрезмерного увеличения.
Дизайн не должен требовать определенной ориентации (вертикальной или горизонтальной).
Дизайн должен быть адаптирован к низкой и высокой плотности пикселей:
Для экранов с низким PPI могут потребоваться более крупные шрифты или упрощенная графика.
Для экранов с высоким PPI необходимо использовать векторные изображения или логотипы с высоким разрешением.
Пользователи должны иметь возможность сосредоточиться на основном контенте, не отвлекаясь.
Сгруппированные элементы должны быть разделены достаточным пространством.
Сворачивание или приостановка анимации должны быть простыми.
Как правило, легче читать шрифты без засечек с высотой строк (впереди) ближе к 1,5 и длиной строк менее 80 символов.
3. Цвета
Доступный дизайн в значительной степени зависит от цвета. Для некоторых пользователей перенасыщенные цвета, сильные контрасты или даже только желтый цвет могут вызывать беспокойство.

Слабый контраст между цветами переднего плана и фона затрудняет зрение пользователям с плохим зрением, тем, кто использует недорогие мониторы, или тем, кто находится под прямыми солнечными лучами. Ваш веб-сайт должен быть доступен с точки зрения цвета – вот что вам нужно сделать:

Контраст между текстом и его фоном должен соответствовать стандартам WCAG: 4,5: 1 для мелкого текста, 3:1 для большого текста.
Контраст между значимыми графическими элементами (значками, индикаторами фокусировки) и их фоном также должен составлять 3:1.
Лучше избегать использования чистого черного (# 000) против чистого белого (#FFF). Для многих пользователей, особенно с дислексией и светочувствительностью, экстремальный контраст на расстоянии одного пикселя снижает разборчивость текста и увеличивает нагрузку на глаза.
При использовании нескольких тематических цветов старайтесь использовать палитры, которые остаются разными для пользователей с дальтонизмом.
Не полагайтесь исключительно на цвет для передачи концепции. Элементам могут потребоваться дополнительные указания, такие как значки, подчеркивания или изменения контраста.
Используйте программу проверки цветовых контрактов Studio Noel, чтобы убедиться, что цвета, которые вы хотите использовать, соответствуют стандартам WACG 2.2. для доступности AA и AAA.
Что такое универсальный дизайн?
Цель Universal design – сделать все – от архитектуры и продуктов до веб-сайтов и контента – доступными и пригодными для использования как можно большему числу людей, независимо от их возраста, способностей или обстоятельств. По сути, речь идет о разработке вещей, которые хорошо работают для всех, независимо от того, кто они, где живут или какие у них могут быть недостатки.

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

Что такое рекомендации по обеспечению доступности веб-контента (WCAG)?
WCAG – это стандарт Всемирной организации по стандартизации, который тестирует и реализует доступный пользовательский опыт для людей с ограниченными возможностями. Вы можете использовать его как веб-фреймворк для настольных компьютеров, мобильного Интернета, нативных приложений и практически любого типа цифрового контента.

Веб-контент можно сделать более доступным для людей с различными нарушениями, следуя рекомендациям WCAG 2.0 и WCAG 2.1. Новейшая версия WCAG 2.1 также включает новые критерии успеха на уровнях A / AA / AAA, которые в первую очередь удовлетворяют потребности пользователей в мобильной доступности, слабовидении и когнитивных функциях.

Сделать ваш веб-сайт доступным и соответствующим требованиям WCAG разумно, даже если это не требуется по закону для всех предприятий. Хотя клиенты с большей вероятностью вернутся на ваш сайт, если вы создадите запоминающийся и позитивный пользовательский интерфейс.

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

Выберите систему управления контентом (CMS), поддерживающую стандарты доступности. Всегда проверяйте доступность готовых шаблонов.
Создавайте персонажей с различными способностями.
Используйте теги заголовков в тексте.
Используйте текст alt на изображениях, улучшающих содержание.
Разработайте стратегию ссылок, предлагайте визуальные подсказки, подчеркивайте ссылки и выделяйте ссылки меню.
Улучшите видимость за счет тщательного выбора цветов и обеспечения их высокой контрастности.
Укажите пользователям эталонные формы (например, нажмите квадратную кнопку).
Учитывайте, как программы чтения с экрана обрабатывают формы. С помощью тегов вы можете помечать поля и давать описания программам чтения с экрана.
В списках должны использоваться правильные HTML-элементы и не следует размещать их в одной строке с текстом.
Динамический контент, такой как слайд-шоу, следует представлять с осторожностью.
Убедитесь, что ваша разметка доступна для чтения всеми браузерами, использующими сайт стандартов W3.
Предоставьте транскрипции для аудиоресурсов и подписи / субтитры к видео.
Контент должен быть легко понятным – более простой язык, эффективная иерархия информации, постепенное раскрытие информации и подсказки помогут вам привлечь больше пользователей.
Протестируйте свой дизайн без использования мыши.
Вы можете протестировать доступность вашего дизайна с помощью таких инструментов, как WAVE и Color Oracle

В чем разница между WCAG 2.0 и DDA?
WWCAG 2.0 (Рекомендации по обеспечению доступности веб-контента 2.0) и DDA (Закон о дискриминации инвалидов) являются важными инструментами, и, хотя они похожи, их ни в коем случае нельзя путать.

Как упоминалось выше, WCAG 2.0 – это международный, признанный во всем мире свод руководящих принципов, обеспечивающий всеобъемлющую основу для повышения доступности веб-контента для людей с ограниченными возможностями. В основном, WCAG 2.0 – это регламент, который часто признается передовой практикой в веб–разработке, а не закон.

С другой стороны, DDA является частью законодательства Великобритании – и юридическим требованием, – которое устраняет дискриминацию людей с ограниченными возможностями в различных контекстах, включая предоставление товаров, услуг и объектов, включая веб-сайты. DDA требует от поставщиков услуг, включая владельцев веб-сайтов, вносить разумные корректировки для обеспечения доступности их услуг для всех людей. Хотя DDA применяется к удобству использования в Интернете, это особый закон Великобритании, и его требования могут отличаться от законов и руководств других стран.