Основы интернет доступности: дизайн для людей с проблемами зрения

Russian (Pусский) translation by Ivan Gryaziev (you can also view the original English article)

4,5% мирового населения страдают цветовой слепотой, 4% от низкого зрения и еще 0,6% совершенно лишены зрения, визуальные трудности при пользование web более распространены чем вам могло показаться. В этом руководстве мы рассмотрим как разработка дизайна для людей с проблемами зрения поможет сделать интернет лучше для всех.

Доступность для всех

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

«Доступность обеспечивает доступ к информации людей с ограниченными возможностями, на том же уровне что и все остальные, с темиже преимуществами»

Как описывалось в этой статье, существует широкий спектр различных расстройств, в пяти группах:

Слуховые
Когнитивные (восприятие информации)
Неврологические
Физические
Речевые
Зрительные

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

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

Цветовая слепота

Цветовая слепота включает различные трудности в восприятии или различии цветов, а также чувствительность к яркости цвета. Она затрагивает примерно 4,5% всего мирового населения.

Слабое зрение

Слабое зрение включает частичное ухудшение зрения на один или оба глаза, низкую остроту зрения (нечеткое зрение), туннель видения, потерю центрального поля и затуманенное зрение. От этих отклонений страдает 246 миллионов человек, что составляет 4% мирового населения.

Слепота

Слепота - это существенная потеря зрения на оба глаза. От этого страдает примерно 39 миллионов человек, или 0,6% людей по всем миру.

Люди по-разному воспринимают веб

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

Просмотр главной страницы Tumblr с нарушениями зрения

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

the Tumblr Homepage — Главная страница Tumblr

В зависимости от типа и степени нарушения зрения, сайт может восприниматься поразомну (примеры смоделированы при помощи расширения NoCoffee в Chrome):

Peripheral blocked vision eg glaucoma — 1. Периферическая блокада зрения (например глаукома)

Large spots of blocked vision diabetic retinopathy — 2. Большие пятна блокируюшие зрение (диабетическая ретинопатия)

Loss of acuity blurred vision — 3. Потеря остроты зрения (затуманенное зрение)

Tritanopia color blindness — 5. Дальтони́зм цветовая слепота

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

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

Различия в восприятии влияют на юзабилити

Из-за этих различий в восприятии ключевые элементы данного веб-сайта могут оказаться недоступными (и поэтому менее полезным) в зависимости от степени нарушения зрения пользователя.

Недоступные возможности

Например к потеря остроты зрения (нечеткое зрение) может сделать панель поиска на Tumblr практически неотличимой от фона. Тоже можно сказать о кнопке входа:

Сравните панель поиска на изображении слева с правым изображением, заметно что панель поиска слилась с фоном и едва видна.

Цвета теряют значение

Оставим пока пример с Tumblr, и рассмотрим человек с красный/зеленым дальтонизмом (протанопией). На странице результатов поиска Google цвет используемый для результатов поиска на текущей странице становится менее заметным пользователю с цветовой слепотой, тем самым делая его менее значимым:

Google Protonopia example — Пример: дальтонизм и Google

Контраст красного и желтого, менее заметен пользователю с дальтонизмом и кажется легким зеленоватым цветом против темно-зеленого.

Отображение контента

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