Что делает доступный дизайн доступным: 9 лучших практик
Люди разработали руководства по удобству использования и доступности дизайна, такие как WCAG. Они помогают дизайнерам не упускать из виду пользователей с аудио-, зрительными и когнитивными нарушениями при создании своих программ. Сегодня поговорим про дизайн, доступный во всех смыслах.
Несмотря на все руководства, дизайнерам все еще нужно много раздумывать при проектировании для обеспечения доступности.
Например, доступный сайт имеет хороший код, загружается быстрее и удобнее в использовании. Это поднимает его выше в поиске и позволяет охватить более широкую аудиторию.
Так как же разработать продукт или веб-приложение, которые удовлетворят потребности людей с различными ограниченными возможностями? Вот несколько практик.
1. Пишите полезные alt-теги
Людям с нарушениями зрения чтение с изображений может показаться огромной проблемой. Да и понимание того, что изображено на картинке, может быть проблематичным, когда сайт или изображение не загружаются должным образом. Здесь большую роль играют alt-теги.
Alt-теги описывают изображения пользователям и облегчают понимание вашего изображения программами чтения с экрана. Когда фото не загружается, пользователи видят ваш alt-тег, а поисковые системы благодаря ему правильно индексируют изображение.
Лучшая практика при создании alt-тегов — сделать описание изображения как можно более ясным. Вот пример того, как должны выглядеть ваши альтернативные теги, когда изображение не загружается.
2. Используйте четкие заголовки, подписи и разметку в своем контенте
При структурировании контента обеспечьте последовательный поток — либо сверху вниз, либо слева направо. Четкие заголовки могут в этом помочь.
Например, при написании поста в блоге используйте H1 для заголовка, H2 для подзаголовков, а затем H3 и H4 в указанном порядке. Четкие заголовки поддерживают удобную навигацию по странице и облегчают ее интерпретацию программами чтения с экрана.
Помимо заголовков, убедитесь, что пользователи могут легко понять навигацию, ссылки и разделы. Ваш контент должен быть хорошо организован, чтобы посетители могли легко идентифицировать и найти вашу страницу.
При разработке форм помогите своей аудитории понять, что нужно делать или писать. Добавьте описания и подсказки — в этом случае доступный дизайн будет очень полезен и для вас самих, так как меньше вероятность, что пользователь уйдет, не поняв, что писать.
Однако не полагайтесь на плейсхолдеры. Как видно из приведенного выше примера, большинство текстов-заполнителей имеют низкоконтрастные цвета, что позволяет пользователям легко их пропустить.
Пометки и инструкции повышают удобство использования и доступность. Они предоставляют достаточно информации, чтобы помочь пользователям выполнять задачи без особых сложностей.
3. Включите изменение размера текста
Для людей с нарушениями зрения возможность изменять размер текста — огромное счастье. В большинстве браузеров и устройств это сделать можно. Убедитесь, что и ваш сайт поддерживает эту функцию, чтобы облегчить жизнь пользователя.
Один из способов включить изменение размера текста — не указывать размер текста в пикселях или абсолютных единицах. Вместо этого используйте относительный размер, чтобы пользователи могли изменять размер текста в зависимости от экрана и устройства. Использование относительного размера, а не пикселей, делает ваш дизайн и сайт более отзывчивым и простым в использовании.
4. Убедитесь, что ваш сайт поддерживает шорткаты
Большинство из нас перемещаются по сайту с помощью мыши. Но для людей, использующих программы чтения с экрана, доступность клавиатуры жизненно важна. Эта вспомогательная технология, которую они используют, основана на навигации только с помощью клавиатуры.
Как дизайнер убедитесь, что ко всем функциям, страницам, ссылкам и другому содержимому вашего сайта можно получить доступ с помощью клавиатуры и мыши.
Клавиша Tab является наиболее распространенной для навигации. Но вы можете включить клавиши со стрелками, чтобы пользователи могли легко перемещаться по каждому интерактивному элементу. Лучшей практикой будет обеспечение правильного потока элементов во всех направлениях.
5. Следите за цветовым контрастом
Его должно быть достаточно. Не каждый человек, который заходит на ваш сайт, может видеть или различать все цвета. У людей с нарушениями зрения могут возникнуть трудности с восприятием текста на заднем и переднем плане, если цветовой контраст низкий.
Таким образом, дизайнеры должны обеспечить достаточный цветовой контраст между фоном и передним планом.
W3C рекомендует цветовое соотношение не менее 4,5:1 между текстом и фоновым текстом или изображениями. Эти цветовые контрасты включают подчеркивание ссылок, изменение типа цвета, веса и размера. Вы можете использовать разные приложение контрастности, чтобы проверить, доступный ли ваш дизайн по части цвета.
6. Поддерживайте новые идеи доступности
Каждый день на рынок поступают новые инструменты и вспомогательные технологии. Они предназначены для тех, кто плохо слышит, видит и читает. Например, программы для чтения с экрана, программы для распознавания голоса, программы для преобразования текста в речь и приложения для увеличения контента на экране.
Компании и дизайнеры должны покупать и интегрировать эти продукты в свои системы, учиться их использовать и привлекать к этому других людей. Кроме того, пробуйте исследовать, создавать прототипы и проводить тесты со своей аудиторией, а не добавлять функции для галочки. Это поможет вам узнать, как люди с ограниченными возможностями потребляют контент, и начать создавать более доступный продукта.
7. Проводите аудит доступности ваших продуктов
Выберите кого-то из команды контроля качества для постоянного проведения аудита. С ним проверяйте, соответствует ли ваш продукт необходимым рекомендациям и стандартам, таким как WCAG 2.0, и работает ли он со вспомогательными технологиями.
Аудит доступности хорошо помогает оптимизировать функциональность сайта для людей с ограниченными возможностями.
8. Используйте другие визуальные подсказки, кроме цветов, при передаче сложной информации
В большинстве случаев цвета — лучший способ передать важное сообщение, вызвать реакцию или дифференцировать элементы. Однако пользователи с плохим зрением могут испытывать с этим трудности.
Избегайте использования исключительно цветов при передаче сложной информации. Вы можете задействовать паттерны, метки, иконки, сообщения и визуальные подсказки вроде подчеркиваний.
Вместо того, чтобы использовать только цвета, подумайте о формах, подписях или символах для графиков и диаграмм, чтобы информацию было еще легче дифференцировать.
9. Эффективно используйте индикаторы фокусировки
Любой может использовать индикаторы фокуса для навигации по вашему сайту, а не только те, кто использует программы чтения с экрана или люди с ограниченной подвижностью. Индикаторы фокуса помогают пользователям понять ваш сайт и направляют их туда, куда им нужно, показывая, на каком элементе фокусируется клавиатура.
При разработке веб-приложения убедитесь, что индикаторы фокуса указывают на такие элементы, как ссылки, виджеты, формы, кнопки и меню.
Индикатор фокуса должен хорошо выделять элемент среди остального контента, чтобы пользователям было легко ориентироваться. Вот пример изображения с индикатором фокуса, оформленным иначе, чем остальные элементы.
Доступный дизайн хорош для бизнеса, а не только для пользователей
Не утихают споры о доступности и инклюзивности дизайна, а также о том, что их неприменение в ваших продуктах является дискриминацией. Но в результате доступность уже закрепилась как очень важный параметр.
Да, это возлагает на дизайнеров огромную ответственность за то, чтобы их продукты и технологии могли использоваться всеми людьми. С помощью описанных выше шагов вы сможете сделать свой продукт доступным для всех пользователей и увеличить прибыль.
