Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Accessibility
Webdesign

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

by
Length:MediumLanguages:

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% всего мирового населения.

From httpcolorvisiontestingcom

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

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

Low vision on googlecom

Слепота

Слепота - это существенная потеря зрения на оба глаза.  От этого страдает примерно 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. Потеря остроты зрения (затуманенное зрение)
Ghosting issues
4. Размытое зрение
Tritanopia color blindness
5. Дальтони́зм цветовая слепота

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

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

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

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

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

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

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

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

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

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

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

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

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

  • 🔍 Увеличения размера текста
  • 🎞 Субтитров или заголовков на видео deos
    📝 Альтернативного текста описания изображенияimages
      ExtensionAccessibility Developer Tools: Добавьте инструменты проверки доступности в боковую панель на вкладке элементы в ваших инструментах разработчика Chrome.Tools.Высокая контрастность: работайте в Интернете при помощи высококонтрастных цветовых фильтров разработанных для упрощения читабельности текста. text.ChromeVox: скорость, универсальность и безопасность Chrome для слабовидящих пользователей. sers.
      Example of an accessibility browser plugin being used to change the contrast of a web page
        и разнообразие инструментов для изменения отображения контента, можно заключить что мы не можем наверняка сказать как будет отображаться или восприниматься пользователям наш сайт.eople.Поскольку контент может отображаться по разному, то нам нужно более серьезно относиться его структурированию, даже на уровне кода. Становится важным сохранить четкую иерархия информации, так как люди могут использовать различные средства для представления этой информации. Давайте теперь рассмотрим несколько рекомендаций, чтобы убедиться, что наш контент всегда доступен, независимо от того, как он отображается:layed: W3C3C
        An example of a website layout model using correct semantic tagsальтернативный текст изображения, но не смогут фактически увидеть изображение. Если этот текст отсутствует или недостаточно хорошо написан, они не смогут правильно воспринимать информацию.ended.Вот пример с сайта Университета Лестера, где показан правильный альтернативный текст, который боле информативен для пользователя: user:
        Example of accurate alternative text usage on an imageAbility.NET сформулировал пять золотых правил использования alt-тегов (альтернативных текстов) для повышения доступности сайта:sible:
          <img> должен иметь атрибут alt = ""ribute
          form input with red outline
          inputs with icons and messages Bootstrap v4v4
          How color blind users perceive green brown and red
          Without texture with texture color blind friendly labels on Trellopaletton.com: :
          monochromatic palette created with palettoncomBIGSOUND Buzz веб-сайт, используюший преимущественно монохромную цветовую схему:cheme:
          Monochrome on BIGSOUND Buzz
          Monochrome on BIGSOUND Buzz
          BIGSOUND Buzz for color blind
          contrast sensitivity chartaccessebility.psu.edu:u:
          example of contrast ratios from from accessebilitypsuedu лишенных зрения, мы улучшаем читабельность для зрячих пользователей. Так как мы отделяем структуру сайта от его контента для того чтобы он мог правильно интерпретироваться различными программами улучшения доступности и простыми пользователями.  И если изменения в отображение сайта произойдут по любой другой причине, структура веб-сайта по-прежнему будет доступна. ible. Кроме того, использование цвета только для того чтобы подчеркнуть то что уже выделено, это еще один большой шаг на пути к созданию высоко доступного веб-сайта с хорошей юзабилити. Отличное правило создавать дизайн, на ранних стадиях, только в оттенках серого, а уже потом добавлять цвета. end.
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.