AutoVizuA11y
v2.0.3
AutoVizuA11y は、スクリーン リーダー ユーザーがアクセス可能なデータ視覚エフェクトを作成するプロセスを自動化する React ライブラリです。開発者に広範なアクセシビリティの知識を必要とせずに、キーボードを使用したグラフの探索を改善する機能に焦点を当てています。
このツールは、数人のスクリーン リーダー ユーザーと相談した結果特定された 3 つの異なる主要コンポーネントに焦点を当てています。洞察力に富んだチャートの説明。チャート内を移動し、より迅速に洞察を得ることができるショートカット。
npm i @feedzai/autovizua11y
以下を使用して、リポジトリのクローンをローカル ディレクトリに作成します。
git clone https://github.com/feedzai/autovizua11y.git
cd autovizua11y
gpt-3.5-turboモデルを使用して生成された人間のような概要で構成されます。データ視覚化に焦点が当てられると、デフォルトで短い説明がアナウンスされます。説明は手動で記述することもできます。| 財産 | 必須/オプション | タイプ | 説明 |
|---|---|---|---|
data | 必須 | オブジェクトの配列 | グラフ内に存在するデータ。各ペアの値は順番に文字列に追加され、対応する DOM 要素がフォーカスされたときに読み取られます。注: オブジェクトの数は、DOM で表されるデータ ポイントの合計と一致する必要があります。 |
selectorType | 必須 | 物体 | データ要素の HTML タイプ (「rect」、「circle」、「path」など)またはそのクラス名。選択できるのは 1 つだけです。これにより、データ要素がナビゲート可能になり、aria-label を持つことができるようになります。 AutoVizuA11y は、指定されたクラスまたは型を持つデータ要素の数が、データ プロパティを介して渡される要素の数と一致すると想定します(ラベルのない要素がないことを確認します)。 |
type | 必須 | 弦 | データ視覚化のタイプ。データビジュアライゼーションがフォーカスされると、タイトルの後、説明の前に通知されます。 |
title | 必須 | 弦 | ビジュアライゼーションのタイトル。データ ビジュアライゼーション内のコンテンツの目的を示す、短く簡潔にする必要があります。データ視覚化に焦点が当てられると、タイプや長いまたは短い説明の前に通知されます。 |
insights | 必須 | 弦 | 統計的洞察を得るために値が使用されるデータ オブジェクトのキーに対応するstringを期待します。たとえば、データ内のamountから洞察を導き出す必要がある場合は、それをこのプロパティに渡す必要があります。空の文字列""が渡された場合、ユーザーは「このショートカットはこのグラフでは機能しません」という警告を受け取ります。これは、最小値、平均値、最大値に関連するショートカット、およびこれらの分析情報や他のデータ ポイントとの比較に関連するショートカットに適用されます。注: インサイトに使用される値はNumber型である必要があります。 |
context | 必須 | 弦 | データ視覚化が存在するコンテキスト。説明を自動生成するときにプロンプトに渡され、コンテキスト化された出力が生成されます。 |
descriptor | オプション | 弦 | string受け取ることにより、この記述子は、データ要素が何であるかをより適切に文脈化するのに役立ちます。各データ要素の末尾に追加されます。記述子が指定されていない場合は、代わりに空白のテキスト ("") が設定されます。 |
multiSeries | オプション | 弦 | 複数シリーズのデータを操作する場合、各シリーズを定義するデータ オブジェクトのキーに対応する文字stringを指定すると、ユーザーは通常のナビゲーションに加えて、異なるシリーズ/クラスター間を移動できるようになります。空の文字列""が渡された場合、ツールはデータを単一の系列として解釈します。 |
shortcutGuide | オプション | JSX.要素 | AutoVizuA11y にはデフォルトのNativeShortcutGuideがありますが、独自のものを作成することもできます。 ShortcutGuide は<dialog>でラップされており、その参照はプロパティdialogRefを通じて取得でき、 shortcutGuideに追加できます。 dialogRefはRefObject<HTMLDialogElement>であり、これを使用して、たとえば、このダイアログを閉じるロジックを処理するボタンを作成できます。 |
autoDescriptions | 必須 (オプション A) | 物体 | OpenAI モデルによる自動記述の作成に関するさまざまなオプション。 AutoVizuA11y は、ラップされたビジュアライゼーションごとに 2 つの API 呼び出しを実行します (説明の種類 (長いものと短いもの) ごとに 1 つずつ)。このプロップのオプションはここで確認できます。このプロパティは「manualDescriptions」と同時に使用することはできません。 |
manualDescriptions | 必須 (オプション B) | 物体 | 手動で書かれたデータの説明が 2 つあります。このプロップを提供すると、自動説明は生成されないため、コストはかかりません。このプロップのオプションはここで確認できます。このプロパティは「autoDescriptions」と同時に使用することはできません。 |
autoDescriptionsプロパティのオプション| キー | 必須/オプション | タイプ | 説明 |
|---|---|---|---|
dynamicDescriptions | オプション | ブール値 | これをfalseに設定すると、最初のレンダリング後にコンポーネントがそのチャートの 2 つの説明を生成しなくなります (説明はローカルストレージに保存されます)。これは静的な視覚化に役立つはずです。 |
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 を使用して構築された一連の例を確認できます (一部の機能には OpenAI API キーが必要です)。
すべてのテストはサイプレスを使用して作成されています。
テストをローカルで実行するには:
# root
npm install
npm run build
# /examples
npm install
npm run dev
# root
npx cypress open
ユーザーは、 ?を使用してショートカット ガイドにアクセスできます。キーを押しながら、キーボードで AutoVizuA11y チャートまたは基になるデータ要素にフォーカスを置きます。開発者は、このコンポーネントを独自のコンポーネントでオーバーライドしたり、そのスタイルを変更したりできます。
| アクティベーション キー | 説明 |
|---|---|
| ? | ショートカットガイドを入力してください |
| ?またはEsc | ショートカットガイドを残す |
| ↓ | チャートに入る |
| ↑ | チャートから抜け出す |
| → | ページ要素内を前に進む |
| ← | ページ要素内で後方に移動する |
| Alt (オプション) + M | グラフ内の一連のデータ間を移動する |
| HomeまたはAlt (オプション) + Q | チャートの先頭にジャンプします |
| EndまたはAlt (オプション) + W | チャートの最後にジャンプします |
| Alt (オプション) + X | 一度にジャンプするデータポイントの数を定義します |
| + | 一度にジャンプするデータポイントに 1 つの数値を追加します |
| - | 一度にジャンプするデータポイントから 1 つの数値を減算します。 |
| Alt (オプション) + J | 最小値 |
| Alt (オプション) + K | 平均値 |
| Alt (オプション) + L | 最大値 |
| Alt (オプション) + Shift + J | 現在のポイントをビジュアライゼーションの最小値と比較します |
| Alt (オプション) + Shift + K | 現在のポイントをビジュアライゼーションの平均値と比較します |
| Alt (オプション) + Shift + L | 現在のポイントをビジュアライゼーションの最大値と比較します |
| Alt (オプション) + Z | ポイントをチャートの残りの部分と比較する方法 |
| Alt (オプション) + B | チャートの長い説明を設定します |
| Alt (オプション) + S | チャートの短い説明を設定します (デフォルト) |
ショートカット ガイドは、AutoVizuA11y の唯一の視覚的な側面です。デフォルトのガイドのスタイルを変更できます。以下は、このコンポーネントを構成する要素のクラス名です。
| クラス名 | HTML |
|---|---|
| ショートカットガイド | 形状 |
| ショートカットガイド__コンテナ | ディビジョン |
| ショートカットガイド__header | ディビジョン |
| ショートカットガイド__title | h2 |
| ショートカットガイド__ボタンラベル | p |
| ショートカットガイド__ボタン | ボタン |
| ショートカットガイド__break | 時 |
| ショートカットガイド__body | ディビジョン |
| ショートカットガイド__セクション | ディビジョン |
| ショートカットガイド__リスト--タイトル | h3 |
| ショートカットガイド__リスト | ディビジョン |
| ショートカットガイド__row | ダウンロード |
| ショートカット-ガイド__セル--ショートカット | dt |
| ショートカットガイド__セル--説明 | DD |
以下は、AutoVizuA11y の作成プロセスを説明する EuroVis'24 のフルペーパーの BibTeX エントリです。
@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] までお問い合わせください。
