5 шагов к более инклюзивному дизайну сайта

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

Google лучше всего описывает доступность, когда говорит, что «каждый должен иметь доступ к Интернету и наслаждаться им». В нем также говорится «мы стремимся сделать это реальностью», что должно достаточно рассказать вам о важности доступности с точки зрения SEO. Ранее в этом году мы описали доступность как одну из самых важных тенденций дизайна на 2020 год, ссылаясь на новые правила, которым все веб-сайты должны соответствовать к 23 сентября 2020 года.

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

# 1: следуйте тексту и руководству по дизайну для пользователей с дислексией

источник

По данным Ирландской ассоциации дислексии (DAI), до 10% пользователей сети могут иметь дислексию. Отдельные исследования показали, что этот показатель может быть значительно выше среди аудитории за пределами Европы (средний мировой показатель может достигать 15-20%).

Дислексия может влиять на то, как мозг интерпретирует визуальную и звуковую информацию, но она не связана напрямую с функциональностью глаз и ушей так же, как нарушения зрения и слуха.

Дизайн для пользователей с дислексией делает сильный акцент на том, чтобы сделать текст максимально читабельным. Список лучших практик можно найти на веб-сайте Британской ассоциации дислексии; все они являются хорошими общими принципами проектирования:

• Убедитесь, что текст достаточно большой
• Использует сильный контраст
• Используйте отзывчивые единицы размера шрифта, чтобы пользователи могли увеличивать текст
• Используйте шрифты без засечек
• Используйте жирный шрифт для выделения текста (его легче различить, чем курсив или подчеркнутый текст)
• Держите предложения и абзацы относительно короткими
• Держите язык относительно простым
• Используйте много пустого пространства
• Используйте шрифт, размер и стили письма, чтобы сделать текст различимым
• Используйте пули

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

# 2: Увеличить контраст для дальтоников и слабовидящих пользователей

По данным Color Blind Awareness, 4,5% британского населения страдают дальтонизмом, и этот показатель увеличивается до 8% для мужского населения. В большинстве случаев люди с дальтонизмом могут ясно видеть вещи, но не могут видеть определенные цвета так же, как другие люди.

«Большинство людей, страдающих дальтонизмом, могут видеть вещи так же ясно, как и другие люди, но не могут полностью« видеть »красный, зеленый или синий свет. Существуют различные виды дальтонизма, и в очень редких случаях люди не могут не вижу цвета вообще. " – осознание дальтонизма

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

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

Рекомендуется для вас Веб-трансляция, 26 марта: Детерминированная атрибуция для триумфа: почему классические атрибутивные подходы терпят неудачу
Зарегистрируйтесь сейчас

источник

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

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

Подробное руководство по требованиям доступности для людей со слабым зрением доступно на W3C.

№ 3: Оптимизируйте свой код для программ чтения с экрана

Слепые и слабовидящие пользователи часто полагаются на программы чтения с экрана для просмотра веб-страниц и работы с контентом. Эти устройства преобразуют текст в синтезированную речь и предоставляют контекст для элементов страницы.

Вот несколько шагов, которые вы можете предпринять для оптимизации программ чтения с экрана:

1. Альтернативный текст: Пожалуйста, предоставьте описательный альтернативный текст для каждого изображения на вашем сайте.
2. Используйте атрибуты ARIA: Опишите «роль» элементов страницы, используя атрибуты ARIA.
3. HTML язык: Определите язык своей страницы, используя атрибут lang HTML на каждой странице.
4. Используйте семантические элементы: Семантические элементы в HTML предоставляют основную контекстную информацию для программ чтения с экрана (и поисковых систем).
5. Вы ссылка: Держите текст в ссылках относительно коротким, но достаточно большим, чтобы указывать и нажимать.
6. структура: Следуйте рекомендациям по макету страницы (множество тегов h2 и h3), так как это наиболее подходящий формат для программ чтения с экрана и их пользователей.

Если вы хотите понять, каково это – доверять программе чтения с экрана, взгляните на эту замечательную статью из журнала Smashing Криса Эштона.

№ 4: уменьшить количество кликов для людей с нарушениями моторики

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

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

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

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

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

# 5: Предоставьте подписи и стенограммы для видео

Поскольку Интернет, как правило, является визуальной формой СМИ, люди с нарушениями слуха не всегда получают то внимание, которого заслуживают. Тем не менее, важно понимать, что Интернет становится все более аудиовизуальным, так как 92% маркетологов говорят, что видео является важной частью их стратегии в 2020 году.

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

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

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