Как адаптировать свой сайт для людей с плохим зрением

Мы не становимся моложе. Буквально. По данным Управления национальной статистики, в период с 1985 по 2010 год число людей в Великобритании в возрасте 65 лет и старше увеличилось на 20% до 10,3 миллиона. Процент детей младше 16 лет снизился.

По оценкам организации Fight for Sight, треть людей старше 65 лет имеют «проблемы со зрением», а RNIB оценивает число людей, которые начинают терять зрение в Великобритании, в 100 человек каждый день.

180-дневное обещание WebSight

PC Pro объединила усилия с Королевским национальным институтом слепых (RNIB), чтобы побудить компании привести свои веб-сайты и приложения к минимальным стандартам. Нажмите здесь, чтобы узнать все подробности и принять залог.

Мне самому недавно поставили диагноз «влажная дегенерация желтого пятна», что сделало меня лишь одним из полумиллиона жителей Великобритании с заболеванием, ухудшающим зрение, от которого нет лекарства. Объедините стареющее, но разбирающееся в информационных технологиях население со статистической вероятностью нарушений зрения, и последствия того, как кодируются веб-сайты и приложения, начнут становиться очевидными. Нарушение зрения не обязательно означает полную слепоту, а ограниченное зрение представляет собой другой набор проблем при использовании ИТ, чем тот, который возникает у полностью слепого человека. Тем не менее, слишком часто, пока к приложению можно получить доступ с помощью программы чтения с экрана, разработчик будет считать, что это хорошо выполненная работа «доступа для всех».

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

Глядя моими глазами

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

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

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

Цвет и контраст

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

Проблема в том, что у каждого своя оптимальная комбинация контрастности (для меня это подходит желтый текст на синем фоне), поэтому ключевым моментом здесь является возможность настройки пользователем. Тем не менее, есть практические советы, которым вы можете следовать, чтобы облегчить жизнь пользователям с плохим зрением: увеличьте контраст между текстом и фоном; рассмотрите возможность добавления поддержки как минимум двух настроек высокой контрастности (светлый на темном и темный на светлом); и всегда используйте однотонный, а не узорчатый фон при наложении текста.

Рекомендации по обеспечению доступности Консорциума Всемирной паутины (W3C) также напоминают веб-разработчикам, что их страницы не должны полагаться только на цвет для передачи функционального значения в дизайне своих веб-сайтов. И вот почему: пользователь с плохим зрением часто будет использовать комбинацию пользовательских цветов с увеличением, и, глядя только на небольшую часть экрана, теряются контекстные подсказки дизайна для навигации. Это усугубляется на веб-сайтах, где изменения цвета используются для различия между основным контентом и областями навигации.

Конфигурируемость

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

Соответствие DDA

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

Помимо юридических требований или морального удовлетворения от правильных поступков, следует учитывать коммерческую реальность: отталкивая пользователей с плохим зрением, вы теряете бизнес, будь то просмотр страниц или проданных лицензий на программное обеспечение. Когда десять лет назад Tesco запустила удобную для доступа версию своего торгового сайта, она за год обеспечила новый бизнес на сумму 13 миллионов фунтов стерлингов. С тех пор параметры доступности были добавлены на основной веб-сайт, например, с опцией для слабовидящих, которая упрощает макет и отключает JavaScript.

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

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

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

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

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

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

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

Последовательность

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

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

Контроль

Если бы существовало одно слово, которое характеризует хорошую практику развития слабовидящих, то это был бы контроль; пользовательский контроль, то есть. Самым важным аспектом пользовательского интерфейса с точки зрения пользователя с плохим зрением является возможность контролировать определенные его аспекты, а не навязывать им все в рамках жесткого и статического процесса проектирования. Хорошим примером является использование инструментов увеличения. Например, я регулярно использую инструмент экранной лупы в Windows 7, чтобы быстро увеличивать изображения и определенные текстовые элементы на экране. Однако, если разработчик решил использовать изображение текста, все, что делает увеличение, — это увеличивает пикселизацию и делает его еще более нечитаемым.

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

Разработка приложений

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

В Рекомендациях по пользовательскому интерфейсу Apple iOS есть подробные инструкции, которые объясняют, как создавать интуитивно понятные интерфейсы для пользователей с ограниченными возможностями, а API-интерфейсы Apple Accessibility определяют, как приложения iOS могут сделать свой пользовательский интерфейс доступным для внешних вспомогательных приложений. Поддержка этих API позволяет приложениям быть совместимыми с функцией чтения с экрана VoiceOver, которая взаимодействует с объектами в приложении, обеспечивая альтернативное управление жестами или голосом. Пользователи с плохим зрением также могут воспользоваться опциями режима отображения «белое на черном». Наконец, Xcode позволяет без проблем добавлять метки доступности и информацию к стандартным элементам управления: используйте «инспектор» Interface Builder для ввода описаний элементов управления пользовательского интерфейса, которые поддерживаются VoiceOver.

Android не отстает от Apple и в плане слабого зрения, поскольку уровень доступности обеспечивает преобразование текста в речь. Программа чтения с экрана TalkBack предустановлена ​​на многих устройствах Android, поэтому убедитесь, что ваше приложение ее поддерживает.