AutoVizuA11y
v2.0.3
AutoVizuA11y adalah pustaka React yang mengotomatiskan proses pembuatan visualisasi data yang dapat diakses oleh pengguna pembaca layar. Ini berfokus pada fitur yang meningkatkan eksplorasi grafik dengan keyboard, tanpa memerlukan pengetahuan aksesibilitas yang luas dari pengembang.
Alat ini berfokus pada tiga komponen utama berbeda yang diidentifikasi setelah berkonsultasi dengan beberapa pengguna pembaca layar: kemampuan navigasi bagan; deskripsi bagan yang mendalam; dan pintasan yang memungkinkan seseorang menavigasi grafik dan mendapatkan wawasan dengan lebih cepat.
npm i @feedzai/autovizua11y
Kloning repositori ke direktori lokal menggunakan:
git clone https://github.com/feedzai/autovizua11y.git
cd autovizua11y
gpt-3.5-turbo dari OpenAI. Deskripsi singkat diumumkan secara default setelah visualisasi data menjadi fokus. Deskripsinya juga bisa ditulis secara manual.| Milik | Wajib/Opsional | Jenis | Keterangan |
|---|---|---|---|
data | Diperlukan | susunan objek | Data disajikan dalam grafik. Nilai setiap pasangan ditambahkan secara berurutan ke string dan dibaca ketika elemen DOM terkait difokuskan. Catatan: jumlah objek harus sesuai dengan total titik data yang diwakili dalam DOM. |
selectorType | Diperlukan | obyek | Tipe HTML (misalnya "persegi", "lingkaran", atau "jalur") elemen data atau nama kelasnya — hanya satu yang dapat dipilih. Hal ini memungkinkan elemen data dapat dinavigasi dan memiliki label aria. AutoVizuA11y mengasumsikan bahwa jumlah elemen data dengan kelas atau tipe tertentu cocok dengan jumlah elemen yang melewati prop data (memastikan tidak ada elemen yang dibiarkan tanpa label). |
type | Diperlukan | rangkaian | Jenis visualisasi data. Diumumkan setelah visualisasi data terfokus, setelah judul dan sebelum deskripsi. |
title | Diperlukan | rangkaian | Judul visualisasi harus singkat dan ringkas, menunjukkan tujuan konten di dalam visualisasi data. Diumumkan setelah visualisasi data terfokus, sebelum jenis dan deskripsi yang lebih panjang atau pendek. |
insights | Diperlukan | rangkaian | Mengharapkan string yang sesuai dengan kunci dalam objek data yang nilainya akan digunakan untuk memperoleh wawasan statistik. Misalnya, jika wawasan harus diturunkan dari amount dalam data, maka jumlah itulah yang harus diteruskan di properti ini. Jika string kosong "" dilewatkan, pengguna akan menerima peringatan yang menyatakan 'Pintasan ini tidak berfungsi di bagan ini.' Hal ini berlaku untuk pintasan yang terkait dengan nilai minimum, rata-rata, dan maksimum, serta pintasan yang melibatkan perbandingan terhadap wawasan ini dan titik data lainnya. Catatan: nilai yang digunakan untuk wawasan harus bertipe Number . |
context | Diperlukan | rangkaian | Konteks di mana visualisasi data hadir. Itu diteruskan dalam prompt, ketika membuat deskripsi otomatis, menghasilkan keluaran yang dikontekstualisasikan. |
descriptor | Opsional | rangkaian | Dengan menerima string , deskriptor ini membantu mengontekstualisasikan elemen data dengan lebih baik. Itu ditambahkan di akhir setiap elemen data. Jika tidak ada deskriptor yang diberikan, teks kosong (“”) yang ditetapkan. |
multiSeries | Opsional | rangkaian | Saat bekerja dengan data multi-seri, berikan string yang sesuai dengan kunci dalam objek data yang mendefinisikan setiap seri, memungkinkan pengguna untuk bernavigasi di antara seri/cluster yang berbeda selain navigasi reguler. Jika string kosong "" dilewatkan, alat akan menafsirkan data sebagai rangkaian tunggal. |
shortcutGuide | Opsional | BEJ.Elemen | AutoVizuA11y memiliki NativeShortcutGuide defaultnya tetapi Anda dapat membuatnya sendiri. ShortcutGuide dibungkus dalam <dialog> , dan referensinya dapat diperoleh melalui properti dialogRef , yang dapat Anda tambahkan ke shortcutGuide Anda. dialogRef adalah RefObject<HTMLDialogElement> , yang dapat Anda gunakan untuk membuat, misalnya, tombol yang menangani logika penutupan dialog ini. |
autoDescriptions | Wajib (opsi A) | obyek | Berbagai pilihan mengenai pembuatan deskripsi otomatis dengan model OpenAI. AutoVizuA11y melakukan dua panggilan API per visualisasi yang dibungkus, satu untuk setiap jenis deskripsi (lebih panjang dan lebih pendek). Opsi untuk prop ini dapat diperiksa di sini. Prop ini tidak dapat digunakan bersamaan dengan "manualDescriptions". |
manualDescriptions | Wajib (opsi B) | obyek | Dua deskripsi data yang ditulis secara manual. Dengan menyediakan prop ini, tidak ada deskripsi otomatis yang dihasilkan, sehingga tidak ada biaya apa pun yang terkait. Opsi untuk prop ini dapat diperiksa di sini. Prop ini tidak dapat digunakan bersamaan dengan "autoDescriptions". |
autoDescriptions| Kunci | Wajib/Opsional | Jenis | Keterangan |
|---|---|---|---|
dynamicDescriptions | Opsional | boolean | Menyetelnya ke false akan menghentikan komponen menghasilkan dua deskripsi untuk bagan tersebut setelah render pertama (deskripsi disimpan di penyimpanan lokal). Ini akan berguna untuk visualisasi statis. |
apiKey | Diperlukan | rangkaian | Kunci API OpenAI, memungkinkan LLM menghasilkan deskripsi visualisasi data yang mirip manusia. Anda bisa mendapatkannya di sini, Disarankan bagi pengembang untuk mengambil tindakan pencegahan yang diperlukan untuk menyembunyikan kunci API. |
model | Opsional | rangkaian | OpenAI LLM bertanggung jawab untuk menghasilkan kedua deskripsi tersebut. Anda dapat memeriksa model yang tersedia di sini. Jika tidak ada model yang disediakan, gpt-3.5-turbo akan dipilih secara default . |
temperature | Opsional | nomor | Suhu, dari 0 hingga 1 , digunakan dalam model yang bertanggung jawab untuk menghasilkan kedua deskripsi tersebut. Deskripsi dengan suhu mendekati 0 harus lebih deterministik di antara panggilan API, sedangkan deskripsi yang mendekati 1 harus lebih acak di antara panggilan API. Anda dapat memeriksa model yang tersedia di sini. Jika tidak ada model yang disediakan, 0 akan dipilih secara default . |
manualDescriptions opsi prop| Kunci | Wajib/Opsional | Jenis | Keterangan |
|---|---|---|---|
longer | Diperlukan | rangkaian | Deskripsi yang lebih panjang terkait dengan visualisasi data yang dibungkus. |
shorter | Diperlukan | rangkaian | Deskripsi singkat yang terkait dengan visualisasi data yang dibungkus. |
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 >
< / >
) ;
} Semua pintasan berikut hanya berfungsi setelah difokuskan pada visualisasi data (atau elemen data yang berdekatan) yang dicakup oleh AutoVizuA11y.
Selain navigasi antar visualisasi data, setiap hasil pintasan lainnya (yaitu wawasan statistik) hanya memperhatikan setiap visualisasi individual.
Alat ini telah diuji dengan VoiceOver, JAWS dan NVDA, serta browser yang paling umum digunakan. Kombinasi tombol untuk setiap pintasan dipilih dengan tujuan untuk menghindari tabrakan dengan pintasan lain dari pembaca layar dan browser yang diuji. Oleh karena itu, disarankan bagi pengguna JAWS dan NVDA untuk mengaktifkan "Mode fokus" ( Sisipkan + Spasi ) sehingga navigasi dengan tombol panah dapat dilakukan di antara dan di dalam visualisasi .
Anda dapat memeriksa serangkaian contoh yang dibuat menggunakan AutoVizuA11y di sini (beberapa fitur memerlukan kunci API OpenAI).
Semua tes telah ditulis menggunakan cypress.
Untuk menjalankan pengujian secara lokal:
# root
npm install
npm run build
# /examples
npm install
npm run dev
# root
npx cypress open
Panduan Pintasan dapat diakses oleh pengguna, menggunakan ? kunci, sementara keyboard fokus pada bagan AutoVizuA11y atau elemen data yang mendasarinya. Sebagai pengembang, Anda dapat mengganti komponen ini dengan komponen Anda sendiri atau mengubah gayanya.
| Kunci Aktivasi | Keterangan |
|---|---|
| ? | Masukkan panduan pintasan |
| ? atau Esc | Tinggalkan panduan pintasan |
| ↓ | Masuk ke dalam grafik |
| ^ | Keluar dari grafik |
| → | Bergerak maju dalam elemen halaman |
| ← | Bergerak mundur dalam elemen halaman |
| Alt (opsi) + M | Berpindah di antara rangkaian data di dalam bagan |
| Beranda atau Alt (opsi) + Q | Lompat ke awal grafik |
| Akhir atau Alt (opsi) + W | Lompat ke akhir grafik |
| Alt (opsi) + X | Tentukan jumlah titik data yang akan dilompati dalam satu waktu |
| + | Tambahkan satu nomor ke titik data yang akan dilompati sekaligus |
| - | Kurangi satu angka ke titik data yang akan dilompati sekaligus |
| Alt (opsi) + J | Nilai minimal |
| Alt (opsi) + K | Nilai rata-rata |
| Alt (opsi) + L | Nilai maksimum |
| Alt (opsi) + Shift + J | Bandingkan titik saat ini dengan nilai minimum visualisasi |
| Alt (opsi) + Shift + K | Bandingkan poin saat ini dengan nilai rata-rata visualisasi |
| Alt (opsi) + Shift + L | Bandingkan titik saat ini dengan nilai visualisasi maksimum |
| Alt (opsi) + Z | Bagaimana suatu titik dibandingkan dengan bagian lain pada grafik |
| Alt (opsi) + B | Tetapkan deskripsi bagan yang lebih panjang |
| Alt (opsi) + S | Tetapkan deskripsi singkat tentang bagan (default) |
Panduan Pintasan adalah satu-satunya aspek AutoVizuA11y yang juga bersifat visual. Anda dapat mengubah gaya panduan default. Di bawah ini adalah nama kelas elemen yang membentuk komponen ini:
| nama kelas | HTML |
|---|---|
| panduan pintas | membentuk |
| panduan-pintasan__container | div |
| panduan-pintasan__header | div |
| pintasan-panduan__judul | h2 |
| panduan-pintasan__label-tombol | P |
| tombol-panduan-pintasan__ | tombol |
| panduan-pintasan__break | jam |
| panduan-pintasan__body | div |
| panduan-pintasan__bagian | div |
| pintasan-panduan__daftar--judul | h3 |
| pintasan-panduan__daftar | div |
| panduan-pintasan__baris | dl |
| pintasan-panduan__sel--pintasan | dt |
| pintasan-panduan__sel--penjelasan | hh |
Di bawah ini adalah entri BibTeX untuk makalah lengkap EuroVis'24 yang menjelaskan proses pembuatan 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
}Opsi lisensi lainnya mungkin tersedia, silakan hubungi [email protected] untuk informasi lebih lanjut.
