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