AutoVizuA11y
v2.0.3
AutoVizuA11y ist eine React-Bibliothek, die den Prozess der Erstellung zugänglicher Datenvisualisierungen für Benutzer von Bildschirmleseprogrammen automatisiert. Es konzentriert sich auf Funktionen, die die Erkundung von Diagrammen mit einer Tastatur verbessern, ohne dass Entwickler umfassende Kenntnisse zur Barrierefreiheit erfordern.
Dieses Tool konzentriert sich auf drei verschiedene Schlüsselkomponenten, die nach Rücksprache mit mehreren Benutzern von Bildschirmlesegeräten identifiziert wurden: Navigationsfähigkeit auf Karten; aufschlussreiche Diagrammbeschreibungen; und Verknüpfungen, die es einem ermöglichen, durch die Diagramme zu navigieren und schneller Erkenntnisse zu gewinnen.
npm i @feedzai/autovizua11y
Klonen Sie das Repository in ein lokales Verzeichnis mit:
git clone https://github.com/feedzai/autovizua11y.git
cd autovizua11y
gpt-3.5-turbo Modell von OpenAI generiert wurde. Die kürzere Beschreibung wird standardmäßig angesagt, sobald die Datenvisualisierung fokussiert wird. Die Beschreibungen können auch manuell verfasst werden.| Eigentum | Erforderlich/Optional | Typ | Beschreibung |
|---|---|---|---|
data | Erforderlich | Array von Objekten | Die im Diagramm vorhandenen Daten. Die Werte jedes Paares werden der Reihe nach zu einer Zeichenfolge hinzugefügt und gelesen, wenn das entsprechende DOM-Element fokussiert ist. Hinweis: Die Anzahl der Objekte muss mit der Gesamtzahl der im DOM dargestellten Datenpunkte übereinstimmen. |
selectorType | Erforderlich | Objekt | Der HTML-Typ (zum Beispiel „rect“, „circle“ oder „path“) der Datenelemente oder ihr Klassenname – es kann nur einer ausgewählt werden. Dadurch sind die Datenelemente navigierbar und verfügen über eine Aria-Beschriftung. AutoVizuA11y geht davon aus, dass die Anzahl der Datenelemente mit der angegebenen Klasse oder dem angegebenen Typ mit der Anzahl der durch die Datenstütze übergebenen Elemente übereinstimmt (wodurch sichergestellt wird, dass kein Element ohne Beschriftung bleibt). |
type | Erforderlich | Zeichenfolge | Die Art der Datenvisualisierung. Es wird angekündigt, sobald eine Datenvisualisierung fokussiert wird, nach dem Titel und vor den Beschreibungen. |
title | Erforderlich | Zeichenfolge | Der Titel der Visualisierung sollte kurz und prägnant sein und den Zweck des Inhalts in der Datenvisualisierung verdeutlichen. Es wird angekündigt, sobald eine Datenvisualisierung fokussiert wird, vor dem Typ und den längeren oder kürzeren Beschreibungen. |
insights | Erforderlich | Zeichenfolge | Erwartet eine string , die dem Schlüssel im Datenobjekt entspricht, aus dem Werte zum Ableiten statistischer Erkenntnisse verwendet werden. Wenn die Erkenntnisse beispielsweise aus der amount in den Daten abgeleitet werden sollen, dann sollte dies in dieser Eigenschaft übergeben werden. Wenn eine leere Zeichenfolge "" übergeben wird, erhält der Benutzer eine Warnung mit der Meldung „Diese Verknüpfung funktioniert in diesem Diagramm nicht.“ Dies gilt für Abkürzungen im Zusammenhang mit Minimal-, Durchschnitts- und Maximalwerten sowie für solche, die Vergleiche mit diesen Erkenntnissen und anderen Datenpunkten beinhalten. Hinweis: Die für Erkenntnisse verwendeten Werte müssen vom Typ Number sein. |
context | Erforderlich | Zeichenfolge | Der Kontext, in dem die Datenvisualisierung vorhanden ist. Es wird in der Eingabeaufforderung übergeben, wenn die Beschreibungen automatisch generiert werden, was zu kontextualisierten Ausgaben führt. |
descriptor | Optional | Zeichenfolge | Durch den Empfang einer string trägt dieser Deskriptor dazu bei, Datenelemente besser zu kontextualisieren. Es wird am Ende jedes Datenelements hinzugefügt. Wenn kein Deskriptor angegeben wird, wird stattdessen leerer Text („“) gesetzt. |
multiSeries | Optional | Zeichenfolge | Wenn Sie mit Daten aus mehreren Reihen arbeiten, stellen Sie eine string bereit, die dem Schlüssel im Datenobjekt entspricht, der die einzelnen Reihen definiert, sodass Benutzer zusätzlich zur regulären Navigation zwischen verschiedenen Reihen/Clustern navigieren können. Wenn eine leere Zeichenfolge "" übergeben wird, interpretiert das Tool die Daten als einzelne Reihen. |
shortcutGuide | Optional | JSX.Element | AutoVizuA11y verfügt über seinen standardmäßigen NativeShortcutGuide , Sie können jedoch Ihren eigenen erstellen. Der ShortcutGuide ist in einen <dialog> eingeschlossen und seine Referenz kann über die Eigenschaft dialogRef abgerufen werden, die Sie zu Ihrem shortcutGuide hinzufügen können. Die dialogRef ist ein RefObject<HTMLDialogElement> , mit dem Sie beispielsweise eine Schaltfläche erstellen können, die die Logik zum Schließen dieses Dialogs verwaltet. |
autoDescriptions | Erforderlich (Option A) | Objekt | Verschiedene Möglichkeiten zur Erstellung automatischer Beschreibungen mit OpenAI-Modellen. AutoVizuA11y führt zwei API-Aufrufe pro umschlossener Visualisierung durch, einen für jeden Beschreibungstyp (länger und kürzer). Die Optionen für diese Requisite können hier überprüft werden. Diese Requisite kann nicht gleichzeitig mit „manualDescriptions“ verwendet werden. |
manualDescriptions | Erforderlich (Option B) | Objekt | Zwei manuell verfasste Beschreibungen der Daten. Durch die Bereitstellung dieser Requisite werden keine automatischen Beschreibungen generiert und es fallen daher keine Kosten an. Die Optionen für diese Requisite können hier überprüft werden. Diese Requisite kann nicht gleichzeitig mit „autoDescriptions“ verwendet werden. |
autoDescriptions Requisitenoptionen| Schlüssel | Erforderlich/Optional | Typ | Beschreibung |
|---|---|---|---|
dynamicDescriptions | Optional | Boolescher Wert | Wenn Sie dies auf false setzen, wird verhindert, dass die Komponente nach dem ersten Rendern die beiden Beschreibungen für dieses Diagramm generiert (die Beschreibungen werden im lokalen Speicher gespeichert). Dies sollte für statische Visualisierungen nützlich sein. |
apiKey | Erforderlich | Zeichenfolge | Der OpenAI-API-Schlüssel, der es einem LLM ermöglicht, menschenähnliche Beschreibungen der Datenvisualisierung zu generieren. Sie können Ihren hier erhalten. Es wird dem Entwickler empfohlen, die notwendigen Vorkehrungen zu treffen, um den API-Schlüssel zu verbergen. |
model | Optional | Zeichenfolge | Der OpenAI LLM, der für die Generierung beider Beschreibungen verantwortlich ist. Die verfügbaren Modelle können Sie hier einsehen. Wenn kein Modell angegeben ist, wird default gpt-3.5-turbo ausgewählt. |
temperature | Optional | Nummer | Eine Temperatur von 0 bis 1 , die in dem Modell verwendet wird, das für die Generierung beider Beschreibungen verantwortlich ist. Beschreibungen mit Temperaturen näher bei 0 sollten zwischen API-Aufrufen deterministischer sein, während Beschreibungen mit Temperaturen näher bei 1 zwischen API-Aufrufen eher zufällig sein sollten. Die verfügbaren Modelle können Sie hier einsehen. Wenn kein Modell angegeben ist, wird default 0 ausgewählt. |
manualDescriptions Requisitenoptionen| Schlüssel | Erforderlich/Optional | Typ | Beschreibung |
|---|---|---|---|
longer | Erforderlich | Zeichenfolge | Die längere Beschreibung, die der umschlossenen Datenvisualisierung zugeordnet ist. |
shorter | Erforderlich | Zeichenfolge | Die kürzere Beschreibung, die der umschlossenen Datenvisualisierung zugeordnet ist. |
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 >
< / >
) ;
} Alle folgenden Verknüpfungen funktionieren nur, wenn der Fokus auf einer Datenvisualisierung (oder angrenzenden Datenelementen) liegt, die von AutoVizuA11y abgedeckt wird.
Abgesehen von der Navigation zwischen Datenvisualisierungen berücksichtigt jedes andere Verknüpfungsergebnis (nämlich die statistischen Erkenntnisse) nur jede einzelne Visualisierung.
Das Tool wurde mit VoiceOver, JAWS und NVDA sowie den am häufigsten verwendeten Browsern getestet. Die Tastenkombinationen für jede Tastenkombination wurden mit der Absicht ausgewählt, Kollisionen mit anderen Tastenkombinationen der getesteten Screenreader und Browser zu vermeiden. Dennoch wird Benutzern von JAWS und NVDA empfohlen, den „Fokusmodus“ ( Einfügen + Leertaste ) einzuschalten, damit die Navigation mit den Pfeiltasten zwischen und innerhalb der Visualisierungen erfolgen kann .
Hier können Sie eine Reihe von Beispielen ansehen, die mit AutoVizuA11y erstellt wurden (einige Funktionen erfordern einen OpenAI-API-Schlüssel).
Alle Tests wurden mit Cypress geschrieben.
So führen Sie Tests lokal aus:
# root
npm install
npm run build
# /examples
npm install
npm run dev
# root
npx cypress open
Auf die Shortcut-Anleitung kann der Benutzer zugreifen, indem er das ? Taste, während der Tastaturfokus entweder auf einem AutoVizuA11y-Diagramm oder einem zugrunde liegenden Datenelement liegt. Als Entwickler können Sie diese Komponente durch Ihre eigene überschreiben oder ihren Stil ändern.
| Aktivierungsschlüssel | Beschreibung |
|---|---|
| ? | Geben Sie die Kurzanleitung ein |
| ? oder Esc | Verlassen Sie die Kurzanleitung |
| ↓ | Steigen Sie in ein Diagramm ein |
| ↑ | Raus aus einem Diagramm |
| → | In einem Seitenelement vorwärts bewegen |
| ← | In einem Seitenelement rückwärts bewegen |
| Alt (Option) + M | Wechseln Sie zwischen Datenreihen im Diagramm |
| Home oder Alt (Option) + Q | Zum Anfang eines Diagramms springen |
| Ende oder Alt (Option) + W | Zum Ende eines Diagramms springen |
| Alt (Option) + X | Definieren Sie die Anzahl der Datenpunkte, die gleichzeitig übersprungen werden sollen |
| + | Addieren Sie jeweils eine Zahl zu den zu überspringenden Datenpunkten |
| - | Subtrahieren Sie jeweils eine Zahl von den zu überspringenden Datenpunkten |
| Alt (Option) + J | Mindestwert |
| Alt (Option) + K | Durchschnittswert |
| Alt (Option) + L | Maximalwert |
| Alt (Option) + Umschalt + J | Vergleichen Sie den aktuellen Punkt mit dem Minimalwert der Visualisierung |
| Alt (Option) + Umschalt + K | Vergleichen Sie den aktuellen Punkt mit dem Durchschnittswert der Visualisierung |
| Alt (Option) + Umschalt + L | Vergleichen Sie den aktuellen Punkt mit dem Maximalwert der Visualisierung |
| Alt (Option) + Z | Wie ein Punkt im Vergleich zum Rest des Diagramms abschneidet |
| Alt (Option) + B | Legen Sie eine längere Beschreibung des Diagramms fest |
| Alt (Option) + S | Kürzere Beschreibung des Diagramms festlegen (Standard) |
Der Shortcut-Guide ist der einzige Aspekt von AutoVizuA11y, der auch visuell ist. Sie können den Stil der Standardanleitung ändern. Nachfolgend sind die Klassennamen der Elemente aufgeführt, aus denen diese Komponente besteht:
| Klassenname | HTML |
|---|---|
| Kurzanleitung | bilden |
| short-guide__container | div |
| short-guide__header | div |
| short-guide__title | h2 |
| Shortcut-Guide__Button-Label | P |
| Shortcut-Guide__button | Taste |
| Shortcut-guide__break | Std |
| Shortcut-Guide__body | div |
| short-guide__section | div |
| short-guide__list--title | h3 |
| Shortcut-Guide__list | div |
| Shortcut-guide__row | dl |
| shortcut-guide__cell--shortcut | dt |
| short-guide__cell--explanation | dd |
Unten finden Sie den BibTeX-Eintrag für das vollständige Papier von EuroVis'24, in dem der Prozess der Erstellung von AutoVizuA11y erläutert wird.
@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
}Möglicherweise sind auch andere Lizenzoptionen verfügbar. Für weitere Informationen wenden Sie sich bitte an [email protected].
