AutoVizuA11y

AutoVizuA11y

وصف

AutoVizuA11y هي مكتبة React تعمل على أتمتة عملية إنشاء تصورات بيانات يمكن الوصول إليها لمستخدمي قارئ الشاشة. وهو يركز على الميزات التي تعمل على تحسين استكشاف المخططات باستخدام لوحة المفاتيح، دون الحاجة إلى معرفة واسعة بإمكانية الوصول من المطورين.

تركز هذه الأداة على ثلاثة مكونات رئيسية مختلفة تم تحديدها بعد التشاور مع العديد من مستخدمي قارئ الشاشة: إمكانية التنقل في المخطط؛ أوصاف الرسم البياني الثاقبة؛ والاختصارات التي تسمح للشخص بالتنقل في المخططات والحصول على رؤى بسرعة أكبر.

قم بتثبيت AutoVizuA11y

عبر نبم

 npm i @feedzai/autovizua11y

عبر جيثب

استنساخ المستودع في دليل محلي باستخدام:

 git clone https://github.com/feedzai/autovizua11y.git
cd autovizua11y

AutoVizuA11y للمطورين

المدخلات

• مجموعة من الدعائم، تم تمريرها في مكون AutoVizuA11y، مع المعلومات المتعلقة بتصور البيانات الملتفة.
• المخطط الذي سيتلقى ميزات إمكانية الوصول الخاصة بـ AutoVizuA11y.

النواتج

• الأوصاف
  • تسميات لكل عنصر من عناصر البيانات؛
  • وصفان، أطول وأقصر، لكل تصور بيانات ملفوف بواسطة AutoVizuA11y. كلاهما يتكون من عنوان، ونوع التصور، وما إذا كان الوصف قد تم إنشاؤه تلقائيًا، وملخصًا شبيهًا بالإنسان تم إنشاؤه باستخدام نموذج gpt-3.5-turbo من OpenAI. يتم الإعلان عن الوصف الأقصر بشكل افتراضي بمجرد التركيز على تصور البيانات. يمكن أيضًا كتابة الأوصاف يدويًا.
• ملاحة
  • "أفقيًا"، بين تصورات البيانات المختلفة وبين عناصر البيانات؛
  • "عموديًا"، بين تصورات البيانات وعناصر البيانات الأساسية الخاصة بها؛
  • بين سلاسل البيانات المختلفة (في حالة وجود أكثر من واحدة).
• الاختصارات
  • اختصارات التنقل QOL التي تزيد من السرعة والكفاءة في استكشاف المخطط؛
  • الاختصارات التي تقدم رؤى إحصائية حول البيانات عند الطلب؛
  • دليل الاختصار الذي يمكن الرجوع إليه أثناء التركيز على مخطط AutoVizuA11y.

خصائص مكون AutoVizuA11y

ملكية	مطلوب / اختياري	يكتب	وصف
data	مطلوب	مجموعة من الكائنات	البيانات الموجودة في الرسم البياني. تتم إضافة قيم كل زوج، بالترتيب، إلى سلسلة وتتم قراءتها عند التركيز على عنصر DOM المقابل. ملاحظة: يجب أن يتطابق عدد الكائنات مع إجمالي نقاط البيانات الممثلة في DOM.
selectorType	مطلوب	هدف	نوع HTML (على سبيل المثال "مستقيم" أو "دائرة" أو "مسار") لعناصر البيانات أو اسم فئتها — يمكن اختيار نوع واحد فقط. يتيح ذلك إمكانية التنقل في عناصر البيانات والحصول على علامة aria. يفترض AutoVizuA11y أن عدد عناصر البيانات ذات الفئة أو النوع المحدد يتطابق مع عدد العناصر التي تم تمريرها عبر خاصية البيانات (مما يضمن عدم ترك أي عنصر بدون تسمية).
type	مطلوب	خيط	نوع تصور البيانات. يتم الإعلان عنه بمجرد التركيز على تصور البيانات، بعد العنوان وقبل الأوصاف.
title	مطلوب	خيط	عنوان التمثيل المرئي، والذي يجب أن يكون قصيرًا وموجزًا، ويوضح الغرض من المحتوى داخل تصور البيانات. يتم الإعلان عنه بمجرد التركيز على تصور البيانات، قبل النوع والأوصاف الأطول أو الأقصر.
insights	مطلوب	خيط	تتوقع string تتوافق مع المفتاح الموجود في كائن البيانات والذي سيتم استخدام القيم منه لاستخلاص الرؤى الإحصائية. على سبيل المثال، إذا كان يجب استخلاص المعلومات من amount الموجودة في البيانات، فهذا هو ما يجب تمريره في هذه الخاصية. إذا تم تمرير سلسلة فارغة "" ، فسيتلقى المستخدم تنبيهًا يفيد بأن "هذا الاختصار لا يعمل في هذا المخطط". ينطبق هذا على الاختصارات المتعلقة بالقيم الدنيا والمتوسط ​​والحد الأقصى، بالإضافة إلى تلك التي تتضمن مقارنات مع هذه الرؤى ونقاط البيانات الأخرى. ملاحظة: القيم المستخدمة للرؤى يجب أن تكون من النوع Number .
context	مطلوب	خيط	السياق الذي يوجد فيه تصور البيانات. يتم تمريره في الموجه، عند إنشاء الأوصاف تلقائيًا، مما يؤدي إلى مخرجات سياقية.
descriptor	خياري	خيط	من خلال تلقي string ، يساعد هذا الواصف في وضع سياق أفضل لعناصر البيانات. تتم إضافته في نهاية كل عنصر بيانات. إذا لم يتم توفير واصف، يتم تعيين نص فارغ ('') بدلاً من ذلك.
multiSeries	خياري	خيط	عند العمل مع بيانات متعددة السلاسل، قم بتوفير string تتوافق مع المفتاح الموجود في كائن البيانات الذي يحدد كل سلسلة، مما يسمح للمستخدمين بالتنقل بين السلاسل/المجموعات المختلفة بالإضافة إلى التنقل العادي. إذا تم تمرير سلسلة فارغة "" ، تقوم الأداة بتفسير البيانات كسلسلة واحدة.
shortcutGuide	خياري	JSX.Element	يحتوي AutoVizuA11y على NativeShortcutGuide الافتراضي الخاص به ولكن يمكنك إنشاء ملف خاص بك. يتم تغليف ShortcutGuide في <dialog> ، ويمكن الحصول على مرجعه من خلال الخاصية dialogRef ، والتي يمكنك إضافتها إلى shortcutGuide الخاص بك. يعتبر dialogRef RefObject<HTMLDialogElement> ، والذي يمكنك استخدامه لإنشاء زر، على سبيل المثال، يتعامل مع منطق إغلاق مربع الحوار هذا.
autoDescriptions	مطلوب (الخيار أ)	هدف	خيارات متنوعة فيما يتعلق بإنشاء الأوصاف التلقائية باستخدام نماذج OpenAI. يقوم AutoVizuA11y بإجراء استدعاءين لواجهة برمجة التطبيقات (API) لكل تصور ملتف، واحد لكل نوع من أنواع الوصف (أطول وأقصر). يمكن التحقق من خيارات هذه الدعامة هنا. لا يمكن استخدام هذه الدعامة في نفس الوقت مع "الوصف اليدوي".
manualDescriptions	مطلوب (الخيار ب)	هدف	وصفان مكتوبان يدويًا للبيانات. من خلال توفير هذه الدعامة، لا يتم إنشاء أي أوصاف تلقائية، وبالتالي لا توجد أي تكاليف مرتبطة بها. يمكن التحقق من خيارات هذه الدعامة هنا. لا يمكن استخدام هذه الدعامة في نفس الوقت مع "الوصف التلقائي".

خيارات دعم الأوصاف autoDescriptions

مفاتيح	مطلوب / اختياري	يكتب	وصف
dynamicDescriptions	خياري	منطقية	يؤدي تعيين هذا إلى false إلى إيقاف المكون من إنشاء الوصفين لهذا المخطط بعد العرض الأول (يتم حفظ الأوصاف في التخزين المحلي). يجب أن يكون هذا مفيدًا للتصورات الثابتة.
apiKey	مطلوب	خيط	مفتاح OpenAI API، الذي يمكّن LLM من إنشاء أوصاف تشبه وصف الإنسان لتصور البيانات. يمكنك الحصول عليها هنا، ومن المستحسن أن يتخذ المطور الاحتياطات اللازمة لإخفاء مفتاح واجهة برمجة التطبيقات.
model	خياري	خيط	OpenAI LLM مسؤول عن إنشاء كلا الوصفين. يمكنك التحقق من النماذج المتاحة هنا. إذا لم يتم توفير أي نموذج، فسيتم اختيار gpt-3.5-turbo default .
temperature	خياري	رقم	درجة الحرارة من 0 إلى 1 المستخدمة في النموذج المسؤول عن توليد كلا الوصفين. يجب أن تكون الأوصاف ذات درجات الحرارة الأقرب إلى 0 أكثر تحديدًا بين استدعاءات واجهة برمجة التطبيقات (API) بينما يجب أن تكون الأوصاف الأقرب إلى 1 أكثر عشوائية بين استدعاءات واجهة برمجة التطبيقات (API). يمكنك التحقق من النماذج المتاحة هنا. إذا لم يتم توفير أي نموذج، فسيتم اختيار 0 default .

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 لمستخدمي قارئ الشاشة

تعمل جميع الاختصارات التالية فقط بمجرد التركيز على تصور البيانات (أو عناصر البيانات المجاورة) التي يغطيها 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	اترك دليل الاختصار
↓	ندخل في الرسم البياني
↑	اخرج من الرسم البياني
→	المضي قدما في عنصر الصفحة
←	التحرك للخلف في عنصر الصفحة
البديل (الخيار) + م	التنقل بين سلسلة من البيانات داخل المخطط
الصفحة الرئيسية أو البديل (الخيار) + Q	انتقل إلى بداية المخطط
نهاية أو Alt (الخيار) + W	انتقل إلى نهاية المخطط
البديل (الخيار) + X	تحديد عدد نقاط البيانات التي سيتم القفز عليها في المرة الواحدة
+	أضف رقمًا واحدًا إلى نقاط البيانات المراد القفز عليها في كل مرة
-	اطرح رقمًا واحدًا من نقاط البيانات المراد القفز عليها في كل مرة
البديل (الخيار) + J	الحد الأدنى للقيمة
البديل (الخيار) + ك	متوسط ​​القيمة
البديل (الخيار) + L	القيمة القصوى
البديل (الخيار) + التحول + J	قارن النقطة الحالية بالحد الأدنى لقيمة التصور
Alt (خيار) + Shift + K	قارن النقطة الحالية بمتوسط ​​قيمة التصور
البديل (الخيار) + التحول + L	قارن النقطة الحالية بالقيمة القصوى للتصور
البديل (الخيار) + Z	كيفية مقارنة النقطة ببقية الرسم البياني
البديل (الخيار) + ب	تعيين وصف أطول للمخطط
البديل (الخيار) + S	تعيين وصف أقصر للمخطط (افتراضي)

التخصيص البصري

دليل الاختصار هو الجانب الوحيد من AutoVizuA11y الذي يكون مرئيًا أيضًا. يمكنك تغيير نمط الدليل الافتراضي. فيما يلي أسماء الفئات للعناصر التي يتكون منها هذا المكون:

اسم الفئة	HTML
دليل الاختصار	استمارة
دليل الاختصار__حاوية	شعبة
دليل الاختصار__header	شعبة
دليل الاختصار__title	h2
دليل الاختصار__button-label	ص
دليل الاختصار__زر	زر
الاختصار-guide__break	ساعة
دليل الاختصار__body	شعبة
دليل الاختصار__section	شعبة
دليل الاختصار__قائمة--العنوان	h3
دليل الاختصار__قائمة	شعبة
دليل الاختصار__صف	دل
الاختصار-guide__cell--shortcut	dt
دليل الاختصار__الخلية--شرح	د

نقلا عن AutoVizuA11y

يوجد أدناه إدخال 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] لمزيد من المعلومات.