JavaScript и специальные возможности: не вините язык

JavaScript и специальные возможности: не вините язык

Автор: Эверетт Цуфельт

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

И большая часть «открытости для всех» - это наличие доступного Интернета, которым могут пользоваться все пользователи. Вот почему я не должен удивляться тому, с какой частотой я слышу вопрос: «Доступен ли JavaScript?»

На самом деле, я, наверное, слышу этот вопрос чаще, чем многие другие. Я полностью слепой, поэтому пользуюсь вспомогательными технологиями. Я также разработчик JavaScript, в настоящее время работаю директором по техническим услугам в Myplanet. Сочетание этих двух факторов означает, что я работаю с JavaScript и специальными возможностями почти десять лет, и в результате я слышу: Доступен ли JavaScript? с некоторой регулярностью. Вот почему, отвечая на вопрос, я делаю это с более чем достаточной уверенностью: да, JavaScript доступен.

С чего начать?

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

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

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

JavaScript = Интернет

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

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

JavaScript в Интернете используется для отправки и получения информации с сервера, а также для создания или изменения пользовательского интерфейса посредством взаимодействия с DOM (объектной моделью документа). Это позволяет разработчикам веб-приложений создавать динамические пользовательские интерфейсы, которые не требуют загрузки новой «страницы» контента, когда пользователи взаимодействуют с приложением.

С помощью объектной модели документа программисты могут создавать документы, перемещаться по их структуре, а также добавлять, изменять или удалять элементы и контент. Все, что находится в документе HTML или XML, может быть доступно, изменено, удалено или добавлено с помощью объектной модели документа. ("Источник")

Модель DOM и доступность

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

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

… Такие технологии, как JavaScript, Ajax и CSS, позволили веб-страницам выглядеть и вести себя больше как интерактивные настольные приложения с графическим интерфейсом пользователя, без необходимости перезагружать страницу при каждом взаимодействии с пользователем. Теперь разработчики могут преобразовывать элементы HTML в компоненты пользовательского интерфейса, ранее не определенные в HTML. Например, Javascript можно использовать с CSS для изменения элемента ‹div› на основе действий пользователя, чтобы он выглядел и вел себя как всплывающее меню. К сожалению, элемент ‹div› не предоставляет автору средства для добавления семантических метаданных, которые могут быть представлены через DOM и сопоставлены с API доступности. Эти недостатки доступности в традиционной разметке делают богатые Интернет-приложения непригодными для использования людьми, которые используют вспомогательные технологии или полагаются на навигацию с клавиатуры. ("Источник")

Чтобы добавить недостающую семантику ко всем этим бессмысленным элементам ‹div›, W3C создал спецификацию WAI-ARIA (Доступные полнофункциональные Интернет-приложения).

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

Вкратце, WAI-ARIA - это набор свойств, которые могут быть добавлены к элементам DOM, что обогащает значение элементов. Например, вы можете добавить role = «button» в ‹div›, и это будет соответствовать роли «button» в API специальных возможностей платформы. Проблема, однако, заключается в том, что WAI-ARIA предназначена только для передачи смысла и не изменяет поведение браузеров, поэтому вам нужно будет реализовать JavaScript для управления этими новыми значимыми элементами, включая обеспечение их полного доступа с клавиатуры. . Еще одна проблема заключается в том, что не все вспомогательные технологии реализуют все последние изменения в спецификации WAI-ARIA, поэтому необходимы исследования, чтобы гарантировать, что то, что создается, практически доступно.

Использование WAI-ARIA в сочетании с HTML, CSS и JavaScript позволяет разработчикам веб-приложений создавать динамические, интерактивные и доступные пользовательские интерфейсы.

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

«Но я просто хочу создать что-нибудь крутое!»

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

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

5 простых шагов, чтобы начать работу

1. Узнайте, как люди с ограниченными возможностями используют Интернет. Даже если ваша задача - избегать судебных разбирательств, вы добьетесь наибольшего успеха, если вы будете сочувствовать людям по ту сторону ДОМА.

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

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

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

5. Найдите несколько доступных компонентов пользовательского интерфейса. Их много, и я рекомендую поискать в Интернете доступность [название компонента].

Творите добро, чувствуйте себя хорошо

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

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

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

Совершенство - это не ожидание, оно должно быть целью.

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

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

***

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

***

Нашли в этом материале полезную информацию? Обязательно аплодируйте 👏 и делитесь!