Введение в семантику и вспомогательные технологии
Вы видели, как сделать сайт доступным для пользователей, которые не могут использовать мышь или указывающее устройство — из-за физических недостатков, технологических проблем или личных предпочтений — путем решения проблемы использования только клавиатуры. Хотя это требует некоторой осторожности и обдумывания, это не составит большого труда, если вы спланируете его с самого начала. Как только эта основная работа будет завершена, вы пройдете долгий путь к полностью доступному и более совершенному сайту.
В этом уроке мы продолжим эту работу и заставим вас задуматься о других факторах доступности, например о том, как создавать веб-сайты для поддержки таких пользователей, как Виктор Царан , которые не видят экран.
Во-первых, мы получим некоторую информацию о вспомогательных технологиях — общем термине для таких инструментов, как программы чтения с экрана, которые помогают пользователям с нарушениями, которые могут помешать им получить доступ к информации.
Далее мы рассмотрим некоторые общие концепции взаимодействия с пользователем и будем опираться на них, чтобы глубже погрузиться в опыт пользователей вспомогательных технологий.
Наконец, мы увидим, как эффективно использовать HTML для создания хорошего опыта для этих пользователей, и как он во многом пересекается с тем, как мы рассматривали фокус ранее.
Вспомогательные технологии
Вспомогательные технологии — это общий термин для устройств, программного обеспечения и инструментов, которые помогают любому человеку с ограниченными возможностями выполнить задачу. В самом широком смысле это может быть что-то низкотехнологичное, например, костыль для ходьбы или увеличительное стекло для чтения, или что-то высокотехнологичное, например, роботизированная рука или программа распознавания изображений на смартфоне.
Вспомогательные технологии могут включать в себя что-то столь же общее, как масштабирование браузера, или столь специфическое, как специально разработанный игровой контроллер. Это может быть отдельное физическое устройство, такое как дисплей Брайля, или оно может быть полностью реализовано в программном обеспечении, например, в голосовом управлении. Он может быть встроен в операционную систему, как некоторые программы чтения с экрана, или может быть надстройкой, например расширением Chrome.
Граница между вспомогательными технологиями и технологиями в целом размыта; в конце концов, все технологии предназначены для помощи людям в выполнении той или иной задачи. А технологии часто могут переходить в категорию «вспомогательных» и выходить из нее.
Например, одним из первых коммерческих продуктов синтеза речи был говорящий калькулятор для слепых. Теперь синтез речи доступ��н повсюду: от маршрутов проезда до виртуальных помощников. И наоборот, технология, которая изначально была универсальной, часто находит вспомогательное применение. Например, люди со слабым зрением могут использовать масштабирование камеры своего смартфона, чтобы лучше рассмотреть что-то маленькое в реальном мире.
В контексте веб-разработки мы должны учитывать широкий спектр технологий. Люди могут взаимодействовать с вашим веб-сайтом с помощью программы чтения с экрана или дисплея Брайля, экранной лупы, голосового управления, переключающего устройства или какой-либо другой формы вспомогательной технологии, которая адаптирует интерфейс страницы по ум��лчанию для создания более конкретного интерфейса, который они могут использовать.
Многие из этих вспомогательных технологий полагаются на программно выраженную семантику для создания доступного пользовательского интерфейса, и именно этому посвящена большая часть данного урока. Но прежде чем мы сможем объяснить программно выраженную семантику, нам нужно немного поговорить о возможностях .
Возможности
Когда мы используем искусственный инструмент или устройство, мы обычно обращаем внимание на его форму и дизайн, чтобы получить представление о том, что он делает и как работает. Доступность — это любой объект, который предлагает или предоставляет пользователю возможность выполнить действие. Чем лучше спроектирована доступность, тем более очевидным или интуитивным будет ее использование.
Классический пример – чайник или заварочный чайник. Вы легко поймете, что брать чайник следует за ручку, а не за носик, даже если вы никогда раньше не видели чайник.
Это потому, что доступность аналогична тем, которые вы видели на многих других предметах — лейках, кувшинах для напитков, кофейных кружках и так далее. Вы, вероятно, могли бы взять кастрюлю за носик, но ваш опыт использования подобных возможностей подсказывает вам, что ручка — лучший вариант.
В графических пользовательских интерфейсах возможности представляют собой действия, которые мы можем предпринять, но они могут быть неоднозначными, поскольку нет физического объекта, с которым можно было бы взаимодействовать. Таким образом, возможности графического пользовательского интерфейса специально разработаны так, чтобы быть однозначными: кнопки, флажки и полосы прокрутки предназначены для демонстрации их использования с минимально возможным обучением.
Например, вы можете перефразировать использование некоторых общих элементов формы (аффордансов) следующим образом:
- Радиокнопки — «Я могу выбрать один из этих вариантов».
- Флажок — «Я могу выбрать «да» или «нет» для этого варианта».
- Текстовое поле — «Я могу ввести что-нибудь в эту область».
- Раскрывающийся список — «Я могу открыть этот элемент, чтобы отобразить свои параметры».
Вы можете делать выводы об этих элементах только потому, что можете их видеть . Естественно, тот, кто не видит визуальных подсказок, обеспечиваемых элементом, не может понять его значение или интуитивно уловить ценность возможностей. Поэтому мы должны убедиться, что информация представлена достаточно гибко, чтобы к ней можно было получить доступ с помощью вспомогательных технологий, которые могут создать альтернативный интерфейс, отвечающий потребностям пользователя.
Это невизуально�� раскрытие использования аффорданса называется его семантикой .
Программы чтения с экрана
Одним из популярных типов вспомогательных технологий является программа чтения с экрана — программа, которая позволяет людям с нарушениями зрения использовать компьютеры, читая текст на экране вслух генерируемым голосом. Пользователь может контролировать то, что читается, перемещая курсор в соответствующую область с помощью клавиатуры.
Мы попросили Виктора Царана объяснить, как он, будучи слепым человеком, получает доступ к Интернету с помощью встроенной в OS X программы чтения с экрана под названием VoiceOver. Посмотрите это видео , где Виктор использует VoiceOver.
Теперь ваша очередь попробовать использовать программу чтения с экрана. Вот страница с ChromeVox Lite , минимальной, но работающей программой чтения с экрана, написанной на JavaScript. Экран намеренно размыт, чтобы имитировать ситуацию с плохим зрением и заставить пользователя выполнить задачу с помощью программы чтения с экрана. Конечно, для этого упражнения вам понадобится браузер Chrome.
Для управления программой чтения с экрана можно использовать панель управления в нижней части экрана. Эта программа чтения с экрана имеет очень минимальную функциональность, но вы можете просматривать содержимое с помощью кнопок Previous и Next , а также щелкать объекты с помощью кнопки Click .
Попробуйте использовать эту страницу с включенным ChromeVox lite, чтобы почувствовать работу программы чтения с экрана. Подумайте о том, что программа чтения с экрана (или другая вспомогательная технология) на самом деле создает для пользователя полный альтернативный пользовательский интерфейс на основе программно выраженной семантики. Вместо визуального интерфейса программа чтения с экрана предоставляет звуковой интерфейс.
Обратите внимание, как программа чтения с экрана сообщает вам некоторую информацию о каждом элементе интерфейса. Вы должны ожида��ь, что хорошо продуманный читатель сообщит вам всю или, по крайней мере, большую часть следующей информации об элементах, с которыми он сталкивается.
- Роль или тип элемента, если он указан (так и должно быть).
- Имя элемента, если оно есть (должно быть).
- Значение элемента, если оно есть (может быть, а может и нет).
- Состояние элемента, например, включен он или отключен (если применимо).
Средство чтения с экрана может создать этот альтернативный пользовательский интерфейс, поскольку собственные элементы содержат встроенные метаданные специальных возможностей. Подобно тому, как механизм рендеринга использует собственный код для создания визуального интерфейса, программа чтения с экрана использует метаданные в узлах DOM для создания доступной версии, что-то вроде этого.