JavaScript:Библиотеки/p5.accessibility

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

Перевод: Максим Кузьмин
Проверка/Оформление/Редактирование: Мякишев Е.А.


Черновик


p5.accessibility[1]

Библиотека p5.accessibility делает работу с холстом библиотеки p5.js более доступным для слепых и слабовидящих людей.

О том, как использовать p5.js вместе со скринридером (от англ. «screenreader»; это программа, описывающая события на экране при помощи звуковых и/или голосовых уведомлений), читайте в этом руководстве.

Примечание: На MacOS библиотека p5.accessibility в данный момент не поддерживается.

О библиотеке

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

Библиотека p5.accessibility может генерировать данные в 3 разных режимах:

Просто текст

Словами описывает визуальное содержимое холста.

Сначала идет общее описание холста, включающее в себя информацию о размере холста, цвете холста и количестве элементов на холсте (пример: «ваш холст имеет размер 200 на 200, окрашен в сиреневато-голубой цвет (123, 87, 255) и содержит следующие 4 объекта: ...»). За этим описанием идет список элементов, в котором говорится о типе фигуры, цвете, позиции и площади каждого из них (пример: «оранжевый (255, 128, 0) эллипс в верхнем левом углу занимает 0.79% холста»), и каждый из этих элементов можно выбрать, чтобы узнать о нем более подробно. Кроме того, в самом низу приведена таблица с данными обо всех элементах холста, и она содержит информацию о форме, цвете, расположении, координатах и площади каждого элемента (пример: «оранжевый (255, 128, 0) эллипс; расположение=вверху слева; координаты=20x,20y; площадь=0.79%»).

Текст в таблице

Содержимое холста в форме таблицы, описывающей положение каждого элемента холста в пространстве. Сначала идет краткое описание холста, содержащее информацию о цвете фона, размере холста, количестве объектов и типах объектов (пример: «холст сиреневато-голубого (123, 87, 255) цвета, размер 200 на 200, площадь 40000, содержит 4 объекта: 3 эллипса и 1 прямоугольник»). Далее идет таблица, описывающая пространственное расположение элементов холста – каждый элемент помещен в ячейку, соответствующую его расположению на холсте. В каждой ячейке находится информация о цвете и фигуре элемента (пример: «оранжевый (255, 87, 255) эллипс»). Каждое из этих описаний можно выбрать, чтобы узнать о необходимом элементе более подробно. Далее идет еще одна таблица, в которой описываются тип фигуры, цвет, расположение, координаты и площадь всех элементов на холсте (пример: «оранжевый (255, 128, 0) эллипс; расположение=вверху слева; координаты=20x,20y; площадь=0.79%»).

Звуковое описание

В этом режиме описывается перемещение объектов на холсте. Перемещение сверху вниз озвучивается при помощи снижения частоты звука, а слева направо – при помощи изменения стерео-позиции звука.

Более подробно о проекте можно прочитать в этой и этой статьях на Medium.

Если вы нашли какой-то баг в библиотеке p5.accessibility, то о нем можно рассказать тут, на вкладке «Issues».

Использование

Поставьте ссылку на библиотеку в самом конце своего HTML-сайта:

<script src="https://cdn.rawgit.com/processing/p5.accessibility/v0.1.1/dist/p5-accessibility.js"></script>

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

<section id="textOutput-content"></section>

Чтобы активировать режим «Текст в таблице», впишите в ваш HTML-файл следующий код (также можно задать место, в котором будет генерироваться эта информация):

<section id="tableOutput-content"></section>

Чтобы активировать режим «Звуковое описание», впишите в ваш HTML-файл следующий код (также можно задать место, в котором будет генерироваться эта информация):

<section id="soundOutput-content"></section>

Чтобы одновременно активировать режимы «Просто текст» и «Текст в таблице», впишите в ваш HTML-файл следующее:

<style>
      #textOutput-content, #tableOutput-content{
        position: static !important;
        left: 10px !important;
        top: auto !important;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
      }
 </style>

Как принять участие

Библиотеки p5.js и p5.accessibility – это кооперативные проекты, созданные множеством разных людей. Мы приглашаем вас, чтобы помочь в развитии этих проектов! Приветствуется любой тип помощи. Если заинтересовались, сначала загляните в раздел «Сообщество».

Как я могу внести свой вклад?

Я новичок

Если вы новичок или просто хотите начать с какой-то маленькой задачи, то вот список наших легких багов. Сначала прочтите дискуссию об этой проблеме на GitHub и узнайте, работает ли кто-нибудь над ней в данный момент или нет. Если никто не работает или есть кто-то, заявивший об этом, но с тех пор долго не дававший о себе знать, спросите, «свободен» ли этот баг. Ничего страшного, если вы не знаете, как решить проблему, поэтому не стесняйтесь задавать вопросы о том, как к ней подступиться! Мы все здесь для того, чтобы учиться и создавать прекрасное. Кто-нибудь из сообщества поможет вам, и, помимо прочего, исправление этих багов – это отличный способ изучить библиотеку и процесс ее разработки.

Я люблю задачи посложнее

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

Улучшение функций

Если вы хотите поучаствовать в разработке чего-то нового, взгляните на этот список.

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

Вот несколько руководств по работе над багами и новыми функциями:

Установка изменений

  • Клонируйте или загрузите этот репозиторий.
  • Зайдите в репозиторий при помощи команды «cd».
  • Запустите команду «npm install».
  • Запустите команду «grunt curl», чтобы получить последние версии CDN-библиотек.
  • Внесите изменения в исходный код в папке «src».
  • Запустите команду «grunt» в корневой папке. Это обновит библиотеку в «.../dist/p5.accessibility.js».
  • Имейте в виду, что примеры здесь могут ссылаться на новые версии CDN-библиотек, а не на сгенерированную вами библиотеку «.../dist/p5.accessibility.js». Если вы хотите протестировать свои изменения на этих примерах, поменяйте файлы «index.html» в этих примерах так, чтобы они ссылались на вашу локальную библиотеку «.../dist/p5.accessibility.js».

Инструменты

Мы используем следующие инструменты:

  • grunt-curl – для управления зависимостями (менее навороченная альтернатива менеджеру пакетов Bower).
  • ColorNamer.js – простой npm-модуль (и клиентская JS-библиотека), возвращающий название цвета по шестнадцатеричному или RGB-значению.

См.также

Внешние ссылки