AutoVizuA11y
v2.0.3
AutoVizuA11y — это библиотека React, которая автоматизирует процесс создания доступных визуализаций данных для пользователей программ чтения с экрана. Основное внимание уделяется функциям, которые улучшают работу с диаграммами с помощью клавиатуры, не требуя от разработчиков обширных знаний о специальных возможностях.
В этом инструменте основное внимание уделяется трем различным ключевым компонентам, которые были определены после консультаций с несколькими пользователями программ чтения с экрана: навигация по диаграммам; подробные описания диаграмм; и ярлыки, которые позволяют перемещаться по диаграммам и быстрее получать ценную информацию.
npm i @feedzai/autovizua11y
Клонируйте репозиторий в локальный каталог, используя:
git clone https://github.com/feedzai/autovizua11y.git
cd autovizua11y
gpt-3.5-turbo от OpenAI. Более короткое описание объявляется по умолчанию, как только визуализация данных становится фокусной. Описания также можно написать вручную.| Свойство | Требуется/Необязательно | Тип | Описание |
|---|---|---|---|
data | Необходимый | массив объектов | Данные представлены на графике. Значения каждой пары по порядку добавляются к строке и считываются, когда соответствующий элемент DOM находится в фокусе. Примечание. Количество объектов должно соответствовать общему количеству точек данных, представленных в DOM. |
selectorType | Необходимый | объект | Тип HTML (например, «прямоугольник», «круг» или «путь») элементов данных или имя их класса — можно выбрать только один. Это обеспечивает возможность навигации по элементам данных и их метку aria. AutoVizuA11y предполагает, что количество элементов данных указанного класса или типа соответствует количеству элементов, переданных через свойство данных (гарантируя, что ни один элемент не останется без метки). |
type | Необходимый | нить | Тип визуализации данных. Об этом объявляется после того, как визуализация данных становится фокусной, после заголовка и перед описаниями. |
title | Необходимый | нить | Название визуализации, которое должно быть кратким и лаконичным, демонстрирующим назначение содержимого внутри визуализации данных. Об этом объявляется, как только визуализация данных становится сфокусированной, перед типом и более длинными или короткими описаниями. |
insights | Необходимый | нить | Ожидает string , соответствующую ключу в объекте данных, значения которого будут использоваться для получения статистических данных. Например, если информация должна быть получена на основе amount в данных, то именно ее и следует передать в этом свойстве. Если будет передана пустая строка "" , пользователь получит предупреждение о том, что «Этот ярлык не работает в этой диаграмме». Это относится к ярлыкам, связанным с минимальными, средними и максимальными значениями, а также к тем, которые связаны со сравнением этих данных и других точек данных. Примечание. Значения, используемые для анализа, должны иметь тип Number . |
context | Необходимый | нить | Контекст, в котором присутствует визуализация данных. Он передается в командной строке при автоматическом создании описаний, что приводит к контекстуализированным выводам. |
descriptor | Необязательный | нить | Получая string , этот дескриптор помогает лучше контекстуализировать элементы данных. Он добавляется в конце каждого элемента данных. Если дескриптор не указан, вместо него устанавливается пустой текст («»). |
multiSeries | Необязательный | нить | При работе с данными из нескольких рядов укажите string , соответствующую ключу в объекте данных, определяющем каждую серию, что позволит пользователям перемещаться между различными сериями/кластерами в дополнение к обычной навигации. Если передается пустая строка "" , инструмент интерпретирует данные как одну серию. |
shortcutGuide | Необязательный | JSX.Элемент | AutoVizuA11y имеет NativeShortcutGuide по умолчанию, но вы можете создать свой собственный. ShortcutGuide заключен в <dialog> , и ссылку на него можно получить через свойство dialogRef , которое вы можете добавить в свой shortcutGuide . dialogRef — это RefObject<HTMLDialogElement> , который вы можете использовать, например, для создания кнопки, обрабатывающей логику закрытия этого диалога. |
autoDescriptions | Обязательно (вариант А) | объект | Различные варианты создания автоматических описаний с моделями OpenAI. AutoVizuA11y выполняет два вызова API для каждой завернутой визуализации, по одному для каждого типа описания (более длинного и более короткого). Параметры этого реквизита можно проверить здесь. Эту опору нельзя использовать одновременно с «manualDescriptions». |
manualDescriptions | Обязательно (вариант Б) | объект | Два написанных вручную описания данных. При предоставлении этого реквизита автоматические описания не создаются, что исключает какие-либо затраты. Параметры этого реквизита можно проверить здесь. Этот реквизит нельзя использовать одновременно с «autoDescriptions». |
autoDescriptions| Ключи | Требуется/Необязательно | Тип | Описание |
|---|---|---|---|
dynamicDescriptions | Необязательный | логическое значение | Установка значения false не позволяет компоненту генерировать два описания для этой диаграммы после первого рендеринга (описания сохраняются в локальном хранилище). Это должно быть полезно для статических визуализаций. |
apiKey | Необходимый | нить | Ключ OpenAI API, позволяющий LLM генерировать человеческие описания визуализации данных. Вы можете получить свой здесь. Разработчику рекомендуется принять необходимые меры предосторожности, чтобы скрыть ключ API. |
model | Необязательный | нить | OpenAI LLM, ответственный за создание обоих описаний. Посмотреть доступные модели можно здесь. Если модель не указана, по default будет выбран gpt-3.5-turbo . |
temperature | Необязательный | число | Температура от 0 до 1 , используемая в модели, ответственной за создание обоих описаний. Описания с температурой ближе к 0 должны быть более детерминированными между вызовами API, тогда как описания с температурой ближе к 1 должны быть более случайными между вызовами API. Посмотреть доступные модели можно здесь. Если модель не указана, по default будет выбрано 0 . |
manualDescriptions опций| Ключи | Требуется/Необязательно | Тип | Описание |
|---|---|---|---|
longer | Необходимый | нить | Более длинное описание связано с завернутой визуализацией данных. |
shorter | Необходимый | нить | Более короткое описание связано с завернутой визуализацией данных. |
import { AutoVizuA11y } from "@feedzai/autovizua11y" ;
// ...
const barData = [
{ day : "Monday" , value : 8 } ,
{ day : "Tuesday" , value : 6.5 } ,
{ day : "Wednesday" , value : 7 } ,
{ day : "Thursday" , value : 9 } ,
{ day : "Friday" , value : 11 } ,
{ day : "Saturday" , value : 2 } ,
{ day : "Sunday" , value : 3 } ,
] ;
const multiLineData = [
{ series : "Croatia" , x : 2010 , y : 4.37 } ,
{ series : "Croatia" , x : 2015 , y : 4.25 } ,
{ series : "Croatia" , x : 2020 , y : 4.13 } ,
{ series : "Croatia" , x : 2022 , y : 4.03 } ,
{ series : "Latvia" , x : 2010 , y : 4.25 } ,
{ series : "Latvia" , x : 2015 , y : 4.25 } ,
{ series : "Latvia" , x : 2020 , y : 4.25 } ,
{ series : "Latvia" , x : 2022 , y : 4.25 } ,
{ series : "Lithuania" , x : 2010 , y : 4.25 } ,
{ series : "Lithuania" , x : 2015 , y : 4.25 } ,
{ series : "Lithuania" , x : 2020 , y : 4.25 } ,
{ series : "Lithuania" , x : 2022 , y : 4.25 } ,
] ;
const longerDesc = "..." ;
const shorterDesc = "..." ;
// ...
function App ( ) {
return (
< >
{ /* SingleSeries with automatic descriptions */ }
< AutoVizuA11y
data = { barData }
selectorType = { { element : "rect" } }
type = "bar chart"
title = "Number of hours spent looking at a screen per day of the week."
context = "Screen time dashboard"
insights = "value"
descriptor = "hours"
autoDescriptions = { {
dynamicDescriptions : false ,
apiKey : API_KEY ,
model : "gpt-3.5-turbo" ,
temperature : 0.1 ,
} }
>
< BarChart > < / BarChart >
< / AutoVizuA11y >
{ /* MultiSeries with manual descriptions */ }
< AutoVizuA11y
data = { multiLineData }
selectorType = { { element : "circle" } }
type = "Multi line chart"
title = "Latvia, Lithuania, and Croatia are among the countries where population is decreasing"
context = "Interface with World data"
insights = "y"
descriptor = "millions"
multiSeries = "series"
manualDescriptions = { {
longer : longerDesc ,
shorter : shorterDesc ,
} }
>
< LineChart > < / LineChart >
< / AutoVizuA11y >
< / >
) ;
} Все следующие сочетания клавиш работают только в том случае, если они сосредоточены на визуализации данных (или смежных элементах данных), охватываемых AutoVizuA11y.
Помимо навигации между визуализациями данных, все остальные быстрые результаты (а именно статистические данные) касаются только каждой отдельной визуализации.
Инструмент был протестирован с VoiceOver, JAWS и NVDA, а также с наиболее часто используемыми браузерами. Комбинации клавиш для каждого сочетания клавиш были выбраны с целью избежать конфликтов с другими комбинациями клавиш протестированных программ чтения с экрана и браузеров. Тем не менее, пользователям JAWS и NVDA рекомендуется включить «Режим фокусировки» ( Вставка + Пробел ), чтобы можно было осуществлять навигацию с помощью клавиш со стрелками между визуализациями и внутри них .
Вы можете проверить серию примеров, созданных с использованием AutoVizuA11y, здесь (для некоторых функций требуется ключ API OpenAI).
Все тесты написаны с использованием Cypress.
Чтобы запустить тесты локально:
# root
npm install
npm run build
# /examples
npm install
npm run dev
# root
npx cypress open
Пользователь может получить доступ к ярлыку руководства, используя кнопку ? клавишу, при этом клавиатура фокусируется либо на диаграмме AutoVizuA11y, либо на базовом элементе данных. Как разработчик, вы можете переопределить этот компонент своим собственным или изменить его стиль.
| Ключ(и) активации | Описание |
|---|---|
| ? | Войти в руководство по ярлыкам |
| ? или Esc | Выйти из руководства по ярлыкам |
| ↓ | Попасть в график |
| ↑ | Выйти из графика |
| → | Перемещение вперед по элементу страницы |
| ← | Перемещение назад по элементу страницы |
| Альт (опция) + М | Перемещение между сериями данных внутри диаграммы |
| Главная или Alt (опция) + Q | Перейти к началу диаграммы |
| Конец или Alt (опция) + W | Перейти в конец диаграммы |
| Альт (опция) + X | Определите количество точек данных, которые будут перескакиваться за раз |
| + | Добавьте одно число к точкам данных, которые нужно перепрыгивать за раз. |
| - | Вычтите одно число из точек данных, которые нужно перепрыгнуть за раз. |
| Альт (опция) + J | Минимальное значение |
| Альт (опция) + К | Среднее значение |
| Альт (опция) + Л | Максимальное значение |
| Alt (опция) + Shift + J | Сравните текущую точку с минимальным значением визуализации. |
| Alt (опция) + Shift + K | Сравните текущую точку со средним значением визуализации |
| Alt (опция) + Shift + L | Сравните текущую точку с максимальным значением визуализации |
| Альт (опция) + Z | Как точка соотносится с остальной частью диаграммы |
| Альт (опция) + Б | Установить более подробное описание диаграммы |
| Альт (опция) + S | Установить более короткое описание диаграммы (по умолчанию) |
Краткое руководство — единственный визуальный аспект AutoVizuA11y. Вы можете изменить стиль руководства по умолчанию. Ниже приведены имена классов элементов, составляющих этот компонент:
| имя класса | HTML |
|---|---|
| ярлык-руководство | форма |
| ярлык-guide__container | делитель |
| ярлык-guide__header | делитель |
| ярлык-руководство__title | ч2 |
| ярлык-руководство__button-label | п |
| ярлык-руководство__button | кнопка |
| ярлык-руководство__break | час |
| ярлык-руководство__body | делитель |
| ярлык-руководство__section | делитель |
| ярлык-руководство__list-заголовок | h3 |
| ярлык-руководство__list | делитель |
| ярлык-guide__row | дл |
| ярлык-guide__cell --ярлык | DT |
| ярлык-guide__cell --объяснение | дд |
Ниже приведена запись BibTeX для полного документа EuroVis'24, в котором объясняется процесс создания AutoVizuA11y.
@article { 2024-AutoVizuA11y ,
title = { AutoVizuA11y: A Tool to Automate Screen Reader Accessibility in Charts } ,
ISSN = { 1467-8659 } ,
url = { http://dx.doi.org/10.1111/cgf.15099 } ,
DOI = { 10.1111/cgf.15099 } ,
journal = { Computer Graphics Forum } ,
publisher = { Wiley } ,
author = { Duarte, Diogo and Costa, Rita and Bizarro, Pedro and Duarte, Carlos } ,
year = { 2024 } ,
month = jun
}Могут быть доступны и другие варианты лицензирования. Для получения дополнительной информации обратитесь по адресу [email protected].
