أجريت تدقيقاً لإمكانية الوصول على 200 لوحة بيانات العام الماضي. كانت النتائج صارمة: 94% كان فيها مشكلة حرجة واحدة على الأقل في إمكانية الوصول.
المشكلة الأكثر شيوعاً؟ الترميز باللون فقط. رسوم بيانية غير قابلة للقراءة تماماً لـحوالي 300 مليون شخص حول العالم يعانون من نقص في رؤية الألوان.
لنصلح ذلك.
لماذا تهم إمكانية الوصول في الرسوم البيانية
بعيداً عن الواجب الأخلاقي، هناك حجة أعمال:
- نحو 15% من سكان العالم يعانون من شكل من أشكال الإعاقة
- عمى الألوان يؤثر على نحو 8% من الرجال و0.5% من النساء
- التصميم المتاح غالباً يحسّن سهولة الاستخدام للجميع
والأمر يتحول أكثر فأكثر إلى قانون. الامتثال لـ WCAG مطلوب للمواقع الحكومية والكثير من المؤسسات.
الأعمدة الأربعة لإمكانية الوصول في الرسوم البيانية
1. الاستقلال عن اللون
القاعدة: لا تستخدم اللون أبداً كالطريقة الوحيدة لنقل المعلومات.
سيء: رسم بياني خطي بالأحمر لـ"المبيعات" والأخضر لـ"الربح" دون تمييز آخر.
جيد: نفس الرسم، لكن المبيعات بخط متصل والربح بخط متقطع. أو أشكال نقاط مختلفة. أو تسميات مباشرة.
إصلاحات عملية:
- إضافة أنماط أو نسيج للمناطق المملوءة
- استخدام أنماط خطوط مختلفة (متصل، متقطع، منقط)
- تضمين تسميات مباشرة على نقاط البيانات
- استخدام أشكال لنقاط المبعثر
- إضافة وسيلة إيضاح واضحة لا تعتمد على مطابقة اللون
نصائح لوحة الألوان:
- استخدام لوحة آمنة لعمى الألوان (مثل ColorBrewer)
- ضمان تباين كافٍ بين الألوان المتجاورة
- الاختبار بمحاكي عمى الألوان (Chrome DevTools فيه واحد)
2. دعم قارئات الشاشة
الرسوم البيانية بصرية بطبيعتها. جعلها تعمل مع قارئات الشاشة يتطلب جهداً مقصوداً.
عناصر أساسية:
- نص بديل يصف الرسالة الرئيسية للرسم، وليس بنيته فقط
- جداول بيانات كتمثيل بديل
- تسلسل عناوين صحيح حول الرسم
- تسميات ARIA للعناصر التفاعلية
كتابة نص بديل جيد:
سيء: "رسم بياني شريطي يعرض بيانات المبيعات"
جيد: "رسم بياني شريطي لمبيعات الربع الثالث 2025 حسب المنطقة. المنطقة الغربية تتقدم بـ2.3 مليون دولار، تليها الشرقية 1.8، الوسطى 1.4، الجنوبية 0.9."
النص البديل يجب أن يجيب: ماذا يحتاج شخص لا يستطيع رؤية هذا الرسم أن يعرف؟
للرسوم المعقدة، وفر بديلاً بجدول بيانات. لف صورة الرسم بعنصر figure مع نص بديل وصفي، وضمّن قسم details قابل للطي يحتوي على جدول البيانات الأساسي.
3. التنقل بلوحة المفاتيح
الرسوم التفاعلية يجب أن تكون قابلة للوصول بلوحة المفاتيح.
المتطلبات:
- وصول Tab لجميع العناصر التفاعلية
- مؤشرات تركيز واضحة
- ترتيب تبويب منطقي
- اختصارات لوحة مفاتيح للإجراءات الشائعة (موثقة)
لللوحات التفاعلية المعقدة:
- توفير طريقة لتخطي الرسم
- السماح لمستخدمي لوحة المفاتيح بالوصول لنفس المعلومات كمستخدمي الفأرة
- تضمين طريقة لإيقاف أي بيانات تتحدث تلقائياً
الاختبار: افصل الفأرة وحاول استخدام رسمك بلوحة المفاتيح فقط. هل تستطيع الوصول لجميع المعلومات؟
4. إمكانية الوصول المعرفية
ليست كل مشكلات إمكانية الوصول حسية. الحمل المعرفي مهم أيضاً.
إرشادات:
- أبْقِ الرسوم بسيطة؛ رسالة رئيسية واحدة لكل رسم
- تجنب المصطلحات في التسميات والتعليقات
- استخدم تنسيقاً متسقاً عبر اللوحة
- وفر السياق والشروحات
- تجنب الرسوم المتحركة ذات التشغيل التلقائي
اختبار الخمس ثوانٍ: هل يستطيع أحد فهم النقطة الرئيسية لرسمك في 5 ثوانٍ؟ إن لم يكن، بَسّط.
أنواع الرسوم الشائعة وتحدياتها
رسوم الدائرة
- المشكلة: أجزاء مميزة باللون فقط
- الحل: إضافة أنماط، تسميات على الأجزاء، أو وسيلة إيضاح واضحة مع القيم
الرسوم الخطية
- المشكلة: خطوط متعددة مميزة باللون فقط
- الحل: أنماط خطوط مختلفة، تسميات مباشرة، أو حالات تمرير
الرسوم الشريطية
- المشكلة: تباين منخفض بين الأشرطة والخلفية
- الحل: نسبة تباين 3:1 كحد أدنى، إضافة حدود للأشرطة عند الحاجة
خرائط الحرارة
- المشكلة: التدرجات اللونية بلا معنى دون البصر
- الحل: قيم رقمية في الخلايا، توفير بديل بجدول بيانات
رسوم المبعثر
- المشكلة: نقاط متداخلة، فئات باللون فقط
- الحل: أشكال نقاط مختلفة، شفافية قابلة للتعديل، جدول بيانات
اختبار رسومك
اختبار آلي
- axe DevTools للوصولية العامة
- WAVE للفحوص البصرية السريعة
- تدقيق إمكانية الوصول في Lighthouse
اختبار يدوي
- محاكيات عمى الألوان (Sim Daltonism، Chrome DevTools)
- قارئات الشاشة (NVDA، VoiceOver، JAWS)
- التنقل بلوحة المفاتيح فقط
- التكبير إلى 200% (هل الرسم لا يزال يعمل؟)
اختبار المستخدم
- تضمين أشخاص ذوي إعاقة في بحث المستخدم
- لا تفترض؛ اسأل عن نقاط الألم الفعلية
تحسينات سريعة يمكن تطبيقها اليوم
- إضافة نص بديل لكل رسم (وصف البصيرة، وليس النوع فقط)
- تضمين بديل بجدول بيانات
- التحقق من تباين اللون (3:1 كحد أدنى للرسوم)
- الاختبار بمحاكي عمى الألوان
- التحقق من عمل التنقل بلوحة المفاتيح
- إضافة مؤشرات تركيز مرئية
أدوات تساعد
ChartGen وأدوات حديثة أخرى بدأت تتضمن ميزات إمكانية الوصول افتراضياً. ابحث عن:
- اقتراحات نص بديل مدمجة
- خيارات لوحة آمنة لعمى الألوان
- تراكبات أنماط تلقائية
- توليد جداول بيانات
لكن الأدوات ليست سحراً. ما زلت بحاجة للمراجعة والتخصيص لسياقك.
التأثير على الأعمال
شارك صديق مستشار إمكانية وصول: شركة خدمات مالية أصلحت مشكلات إمكانية الوصول في لوحة المستثمرين. النتيجة؟ زيادة 23% في التفاعل من جميع المستخدمين، وليس فقط ذوي الإعاقة.
التصميم المتاح عادةً هو ببساطة تصميم أفضل.
موارد
- إرشادات WCAG 2.1 (خصوصاً 1.4.1 استخدام اللون و1.1.1 المحتوى غير النصي)
- مشروع Chartability للإرشاد الخاص بالرسوم
- A11y Style Guide لأنماط المكونات
- أدوات محاكاة عمى الألوان
فكرة أخيرة
لن تبني مبنى بدون منحدر. لماذا تبني لوحة بدون إمكانية وصول؟
الجهد لجعل الرسوم متاحة متواضع. التأثير كبير. ابدأ برسم واحد، طبّق هذه المبادئ، وابنِ عليه.