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-значению.
