Chrome Dev Summit 2018 is happening now and streaming live on YouTube. Watch now.

Доступность

Этот набор документов – текстовая версия части материала, представленного в Курсе Udacity по доступности. Это не расшифровка видеокурса, а, скорее, более лаконичное изложение принципов и приемов обеспечения доступности на основе оригинальных материалов курса.

TL;DR

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

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

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

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

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

Это, конечно, не совсем так, так что давайте проясним это, прежде чем займёмся чем-то еще. Что мы подразумеваем под доступностью, и чему мы здесь будем учиться?

Что такое доступность?

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

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

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

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

a form with poor accessibility

У этой формы несколько проблем с доступностью.

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

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

a form with improved accessibility

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

Рекомендации по доступности контента

В этом руководстве мы будем ссылаться на Рекомендации по доступности контента (РПДК) 2.0, набор инструкций и практик собранных экспертами по доступности, чтобы решить что значит "доступность" методическим путем.

РПДК организована вокруг четырёх принципов, часто обозначаемых акронимом ВУПН:

  • Воспринимаемый: Могут ли пользователи воспринимать контент? Необходимо помнить, что только потому, что что-то воспринимается только одним чувством, таким как зрение, не значит что все пользователи могут воспринимать это.

  • Управляемый: Могут ли пользователи использовать компоненты пользовательского интерфейса и перемещаться по содержимому? Например, что-то что требует взаимодействия при наведения не может управляться кем-то, кто не может использовать мышь или сенсорный экран.

  • Понятный: Могут ли пользователи понять содержимое? Могут ли пользователи понять интерфейс и достаточно ли он последователен, чтобы избежать путаницы?

  • Надежный: Может ли контент использоваться различными агентами пользователей (браузерами)? Он работает с ассистивной технологией?

Хотя РПДК обеспечивает всесторонний обзор того, что значит доступный контент, это так же может быть немного подавляюще. Чтобы помочь смягчить это, WebAIM (Web Accessibility in Mind) группа переработала руководства РПДК в простой перечень, специально предназначенный для веб-контента.

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

С этим инструментом в руках, вы можете наметить направление вашей работы по доступности и быть уверенным, что если ваш проект соответствует описанным критериям, ваши пользователи будут иметь положительный опыт доступа к вашему контенту.

Понимание разнообразия пользователей

При изучении доступности может помочь понимание разнообразия пользователей в мире и видов специальных возможностей, которые их затрагивают. Для объяснения дальнейшего, ниже представлено интервью с Victor Tsaran - полностью слепым Technical Program Manager в Google.

Victor Tsaran
Victor Tsaran

Над чем вы работаете в Google?

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

Какие нарушения бывают у пользователей?

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

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

Давайте пройдемся по ним по очереди. Можете привести пару примеров зрительных нарушений?

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

A braille reader
Устройство чтения Брайля

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

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

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

High-contrast mode
Режим высокой контрастности

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

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

О, и нельзя не упомянуть людей с нарушениями восприятия цвета – около 9% мужчин имеют некую форму нарушения цветового восприятия! Плюс около 1% женщин. Они могут испытывать проблемы с различением красного от зеленого или желтого от синего. Подумайте об этом в следующий раз, при проектировании валидации формы.

А как насчет нарушений моторики?

Да, нарушения моторики или нарушения ловкости. Эта группа варьируется от тех, кто предпочел бы не использовать мышь, так как у них, возможно, какой-то вид RSI или что-то вроде и такое использование болезненно, до кого-то, кто может быть физически парализован и ограничен в движении определённых частей тела.

A person using an eye tracking device
Устройство отслеживания глаз

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

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

Отлично, давайте поговорим о нарушениях слуха.

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

A television with captions at the bottom
Субтитры

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

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

Хорошо, можете рассказать немного о когнитивных нарушениях?

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

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

Итак, как бы вы резюмировали, как вы думаете о доступности?

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


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

Давайте взглянем на несколько примеров нарушений доступа из реальной жизни и посмотрим как они попадают в эти категории и типы. Обратите внимание что некоторые нарушения могут попадать больше чем в одну категорию или тип.

Ситуативные Временные Постоянные
Зрительные сотрясение мозга слепота
Двигательные ребенок на руках сломанная рука, RSI* RSI*
Слуховые шумный офис
Когнитивные сотрясение мозга

Repetitive Strain Injury: напрмер, кистевой туннельный синдром, теннисный локоть, курковый палец

Следующие шаги

Мы изучили уже довольно много! Вы прочитали

  • о том, что такое доступность и почему она важна для всех
  • о РПДК и WebAIM перечне доступности
  • о различных типах нарушений, которые вы должны учитывать

В оставшейся части руководства мы окунемся в практические аспекты создания доступных веб-сайтов. Мы организуем эту работу вокруг трех основных предметных областей:

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

  • Семантика: Мы позаботимся о том, чтобы наш интерфейс надежно работал с различными вспомогательными технологиями.

  • Стилизация: Мы рассмотрим дизайн и некоторые приемы, позволяющие сделать визуальные элементы интерфейса максимально гибкими и удобными.

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

Translated by