ماذا يعني WCAG 2.1 AA فعليًا لجولات Matterport

WCAG 2.1 AA هو المعيار الذي تستند إليه المواصفة الإسرائيلية 5568 ولوائح إتاحة الخدمة، وتحيل إليه أيضًا EN 301 549 وSection 508 وADA. وفي إسرائيل الأمر ملموس تمامًا: أي جولة افتراضية موجَّهة للجمهور لا تستوفي هذه المتطلبات تعرّضكم لدعوى إتاحة، إذ يجيز القانون الحكم بتعويض قانوني يصل إلى 50,000 شيكل من دون حاجة إلى إثبات الضرر. لكن ما الذي يطلبه هذا المعيار فعليًا حين يُطبَّق على جولة Matterport افتراضية؟ نستعرض هنا الصورة العملية، معيارًا بعد معيار، وما يعنيه كل منها لتجربتكم ثلاثية الأبعاد.

WCAG في 30 ثانية

تقوم إرشادات إتاحة محتوى الويب (WCAG) على أربعة مبادئ، فأي محتوى على الويب لا بدّ أن يكون:

1. قابلًا للإدراك أن يدرك المستخدمون المحتوى بحاسّة واحدة من حواسّهم على الأقل.
2. قابلًا للتشغيل أن يتمكّن المستخدمون من التفاعل مع الواجهة.
3. قابلًا للفهم أن يفهم المستخدمون المحتوى وآلية عمل الواجهة.
4. متينًا أن يعمل المحتوى بثبات عبر مختلف التقنيات والأدوات المساعِدة.

المستوى AA هو المستوى الوسط: لا هو الحدّ الأدنى الإلزامي (المستوى A)، ولا هو الأكثر تشدّدًا (المستوى AAA). وعليه استقرّت الجهات المنظِّمة حول العالم بوصفه المعيار المعقول للامتثال. وكل ما يرد أدناه من معايير هو متطلَّب من المستوى A أو AA.

قابل للإدراك: هل يستطيع المستخدمون رؤية محتواكم وسماعه؟

1.1.1، المحتوى غير النصي (المستوى A)

ما الذي يتطلبه: كل عنصر غير نصي يحتاج إلى بديل نصي يؤدّي الغرض نفسه.

ماذا يعني ذلك لـ Matterport: البيئة ثلاثية الأبعاد بصرية بالكامل، وجولة Matterport القياسية لا تقدّم أي وصف نصي لما يراه الزائر. هنا تضيف طبقة الإتاحة تسمية توضيحية لكل لقطة بانورامية تصف المكان: "أنتم الآن في قاعة القاطرات الرئيسية، ووجهكم نحو قاطرة بخارية تعود إلى عشرينيات القرن الماضي"، فيعرف مستخدمو قارئات الشاشة ومن يعتمدون على التسميات التوضيحية أين هم وما الذي يحيط بهم.

1.3.1، المعلومات والعلاقات (المستوى A)

ما الذي يتطلبه: ما يُنقَل بصريًا من معلومات وعلاقات بنيوية يجب أن يكون متاحًا برمجيًا كذلك.

ماذا يعني ذلك لـ Matterport: أزرار نقاط المعلومات، ولوحة التسميات التوضيحية، ومُحدِّدات اللغة، وأدوات التحكّم في الإتاحة، تحتاج جميعها إلى ترميز HTML دلالي سليم وإلى أدوار ARIA صحيحة. فالمستخدم المُبصِر يرى زرًا يطفو في الفضاء ثلاثي الأبعاد، أما مستخدم قارئة الشاشة فيحتاج إلى أن يسمع "زر معلومات: قاطرة" بالدور والتسمية الصحيحين. ويتحقّق ذلك عبر role="button" وaria-label وبنية HTML تعكس التسلسل الهرمي البصري.

1.4.3، التباين (الحد الأدنى) (المستوى AA)

ما الذي يتطلبه: يجب ألّا تقلّ نسبة تباين النص عن 4.5:1 مقابل خلفيته، فيما يكفي النصَّ الكبير (18pt أو 14pt عريض) نسبةُ 3:1 فحسب.

ماذا يعني ذلك لـ Matterport: تظهر عناصر الطبقة، من تسميات توضيحية وتسميات لنقاط المعلومات وأزرار وأدوات تحكّم، فوق خلفية ثلاثية الأبعاد متغيّرة تتبدّل باستمرار مع حركة الزائر، ولا سبيل إلى التحكّم بلون تلك الخلفية. والحلّ خلفيات داكنة شبه شفافة توضَع خلف كل عنصر نصي لتضمن استيفاء نسبة التباين أيًّا كان ما وراءها. ويتيح مفتاح التباين العالي للمستخدمين الانتقال إلى أقصى درجات التباين لقراءة أوضح.

1.4.11، تباين العناصر غير النصية (المستوى AA)

ما الذي يتطلبه: تحتاج مكوّنات الواجهة والعناصر الرسومية إلى تباين لا يقلّ عن 3:1 مقابل الألوان المجاورة لها.

ماذا يعني ذلك لـ Matterport: أزرار نقاط المعلومات، ومُحدِّد اللغة، ومفاتيح لوحة الإتاحة، وكل عنصر تفاعلي، يجب أن يتمايز بصريًا عن المشهد ثلاثي الأبعاد خلفه. ويعني ذلك أزرارًا بخلفيات لونية صلبة، وحدودًا واضحة المعالم، وحالات تركيز جليّة لا تستند في تباينها إلى المشهد ثلاثي الأبعاد.

1.4.4، تغيير حجم النص (المستوى AA)

ما الذي يتطلبه: يمكن تكبير النص حتى 200% من دون فقدان أي محتوى أو وظيفة.

ماذا يعني ذلك لـ Matterport: على الطبقة أن توفّر أدوات للتحكّم في حجم الخط. وحين يكبّر الزائر النص، ينبغي أن تعيد التسميات التوضيحية وأوصاف نقاط المعلومات وكل تسميات الواجهة تنظيم نفسها انسيابيًا، فلا تتجاوز حدود حاوياتها ولا تتداخل مع غيرها. ويتحقّق ذلك بإعداد ثابت لحجم الخط يسري على الطبقة بأكملها.

قابل للتشغيل: هل يستطيع المستخدمون التنقّل والتفاعل؟

2.1.1، لوحة المفاتيح (المستوى A)

ما الذي يتطلبه: يجب أن تكون كل الوظائف قابلة للتشغيل عبر لوحة المفاتيح.

ماذا يعني ذلك لـ Matterport: هذه أكبر ثغرة في جولة Matterport القياسية، إذ يعتمد العارض الافتراضي كليًا على الفأرة واللمس. تضيف طبقة الإتاحة تنقّلًا كاملًا بلوحة المفاتيح: Tab للتنقّل بين نقاط المعلومات، وEnter لفتحها، وEscape لإغلاق اللوحات، ومفاتيح الأسهم أو الاختصارات للتنقّل بين اللقطات البانورامية. وكل عنصر تفاعلي في الطبقة، من مُحدِّد اللغة وأدوات الخط ومفتاح التباين العالي ومشغّل الصوت، يجب أن يعمل بلوحة المفاتيح.

2.1.2، عدم وجود مصيدة لوحة مفاتيح (المستوى A)

ما الذي يتطلبه: إن استطاع المستخدم الدخول إلى مكوّن بلوحة المفاتيح، فلا بدّ أن يستطيع الخروج منه بها.

ماذا يعني ذلك لـ Matterport: حين يفتح الزائر لوحة نقطة معلومات أو إعدادات الإتاحة، يجب أن يعيد الضغط على Escape أو Tab التركيزَ بثبات إلى الواجهة الرئيسية، فلا يحبس أي مكوّن التركيز في حلقة مغلقة. ويستلزم ذلك إدارة دقيقة للتركيز: تتبّع موضعه قبل فتح اللوحة، واستعادته إلى مكانه عند إغلاقها.

2.4.2، عنوان الصفحة (المستوى A)

ما الذي يتطلبه: يجب أن يكون لكل صفحة عنوان وصفي.

ماذا يعني ذلك لـ Matterport: ينبغي أن يصف عنصر <title> الجولةَ وصفًا واضحًا، مثل "حديقة وولفسون، جولة افتراضية متاحة" بدلًا من "Matterport Showcase" أو عنوان عام. وكلما انتقل الزائر إلى لقطة بانورامية جديدة، تحدّث العنوان تلقائيًا ليعكس الموقع الحالي.

2.4.3، ترتيب التركيز (المستوى A)

ما الذي يتطلبه: يجب أن تتلقّى العناصر القابلة للتركيز التركيزَ بترتيب يحفظ المعنى ويصون قابلية التشغيل.

ماذا يعني ذلك لـ Matterport: ينبغي أن يسير ترتيب Tab وفق تسلسل مكاني منطقي: أدوات التحكّم في الإتاحة أولًا، ثم مُحدِّد اللغة، ثم أزرار نقاط المعلومات بتسلسل ذي معنى، فأدوات التنقّل أخيرًا. وعند فتح لوحة نقطة معلومات ينتقل التركيز إلى داخلها، وعند إغلاقها يعود إلى الزر الذي فتحها.

2.4.7، التركيز مرئي (المستوى AA)

ما الذي يتطلبه: يجب أن يكون تركيز لوحة المفاتيح مرئيًا.

ماذا يعني ذلك لـ Matterport: يحتاج كل عنصر قابل للتركيز إلى حلقة تركيز واضحة وظاهرة. وبالنسبة إلى أزرار نقاط المعلومات الطافية في الفضاء ثلاثي الأبعاد، يعني ذلك إطارًا عالي التباين يبين مقابل أي خلفية. وكثيرًا ما يقصُر إطار التركيز الافتراضي للمتصفّح عن أداء الغرض في سياق ثلاثي الأبعاد، فتلزم أنماط تركيز مخصّصة بتباين وحجم كافيين.

قابل للفهم: هل يستطيع المستخدمون متابعة ما يجري؟

3.1.1، لغة الصفحة (المستوى A)

ما الذي يتطلبه: يجب تحديد لغة الصفحة الافتراضية برمجيًا.

ماذا يعني ذلك لـ Matterport: يجب ضبط سمة lang في HTML ضبطًا صحيحًا: lang="en" للإنجليزية، وlang="he" للعبرية، وهكذا. وحين يبدّل الزائر اللغة في الطبقة، تتحدّث سمة lang لتطابقها، وفي اللغات المكتوبة من اليمين إلى اليسار كالعبرية والعربية تتحوّل سمة dir إلى rtl.

3.1.2، لغة الأجزاء (المستوى AA)

ما الذي يتطلبه: حين يتضمّن المحتوى نصًا بلغة تختلف عن لغة الصفحة الافتراضية، يجب تحديد ذلك النص برمجيًا.

ماذا يعني ذلك لـ Matterport: إن ضمّت جولة بالعبرية عنوان معروض بالإنجليزية، احتاج ذلك العنوان إلى سمة lang="en". وفي جولة متعددة اللغات، يجب أن تحمل كل كتلة تسمية توضيحية وكل منطقة محتوى لنقطة معلومات مُعرِّف اللغة الصحيح، حتى تبدّل قارئات الشاشة محرّك النطق بما يلائم.

3.2.1، عند التركيز (المستوى A)

ما الذي يتطلبه: نقل التركيز إلى مكوّن يجب ألّا يُحدِث تلقائيًا تغييرًا في السياق.

ماذا يعني ذلك لـ Matterport: الانتقال بمفتاح Tab إلى زر نقطة معلومات يجب ألّا يفتح اللوحة من تلقائه، والتركيز على مُحدِّد اللغة يجب ألّا يبدّل اللغة من تلقائه. فعلى المستخدم أن يفعّل العنصر صراحةً (Enter/Space) ليُحدِث التغيير. قد يبدو هذا بديهيًا، لكنه خطأ متكرّر في الواجهات ثلاثية الأبعاد التفاعلية.

متين: هل يعمل مع التقنيات المساعدة؟

4.1.2، الاسم والدور والقيمة (المستوى A)

ما الذي يتطلبه: بالنسبة إلى كل مكوّنات الواجهة، يجب أن يكون الاسم والدور والحالة قابلين للتحديد برمجيًا.

ماذا يعني ذلك لـ Matterport: كل أداة مخصّصة في الطبقة، من أزرار نقاط المعلومات ومشغّل الصوت وشريط تمرير حجم الخط ومفتاح التباين، تحتاج إلى سمات ARIA مناسبة. فزرّ نقطة المعلومات يحتاج إلى role="button" وaria-label="معلومات: قاطرة"، ومشغّل الصوت يحتاج إلى role="region" وaria-label="سرد صوتي"، ومفتاح التباين يحتاج إلى aria-pressed="true/false". وبدون هذه السمات، تعجز التقنيات المساعدة عن إبلاغ المستخدم بماهية أدوات التحكّم أو بالحالة التي هي عليها.

4.1.3، رسائل الحالة (المستوى AA)

ما الذي يتطلبه: يجب أن تكون رسائل الحالة قابلة للتحديد برمجيًا عبر الدور أو الخصائص، حتى تعرضها التقنيات المساعدة من دون أن تتلقّى التركيز.

ماذا يعني ذلك لـ Matterport: حين ينتقل الزائر إلى لقطة بانورامية جديدة وتتحدّث التسمية التوضيحية، يجب الإعلان عن هذا التغيير لقارئات الشاشة من دون اختطاف التركيز. ويتحقّق ذلك بمنطقة aria-live="polite" تحيط بمحتوى التسمية، فما إن يتغيّر نصها حتى تنطق قارئة الشاشة تلقائيًا وصف اللقطة الجديدة. وينطبق الأمر نفسه على رسائل الحالة من نحو "تم تغيير اللغة إلى العربية" أو "تم تفعيل التباين العالي."

ما الذي تفشل فيه جولة Matterport القياسية

وضعًا للأمر في نصابه، إليكم بطاقة تقييم تُظهر موقع جولة Matterport الافتراضية القياسية من المعايير الواردة أعلاه:

جولة Matterport الافتراضية القياسية تفشل أو تفشل جزئيًا في 14 معيارًا من أصل 14 معيارًا منطبقًا من معايير WCAG 2.1 AA. وهذه ليست فجوة امتثال، بل هي غياب تامّ للامتثال.

المعايير التي تشير إلى WCAG

WCAG 2.1 AA ليس مجرّد إرشاد، بل هو المعيار التقني الذي تحيل إليه كبرى التشريعات:

• المواصفة الإسرائيلية 5568 (إسرائيل) تعتمد WCAG معيارًا تقنيًا لإتاحة المواقع والخدمات الرقمية، مع أحكام خاصة بدعم العربية والعبرية، وهي مكرّسة ضمن لوائح إتاحة الخدمة.
• EN 301 549 (أوروبا) المعيار الأوروبي الموحّد لإتاحة تكنولوجيا المعلومات والاتصالات يدمج متطلبات WCAG 2.1 AA دمجًا مباشرًا.
• ADA (الولايات المتحدة) تعتمد المحاكم الأمريكية WCAG 2.1 AA مرجعًا للإتاحة الرقمية في إطار قانون الأمريكيين ذوي الإعاقة (Americans with Disabilities Act).
• Section 508 (الفيدرالي، الولايات المتحدة) تدمج معاييره المحدَّثة WCAG 2.0 AA، مع توجّه الجهات بصورة متزايدة نحو WCAG 2.1 AA للمحتوى الجديد.

استيفاء WCAG 2.1 AA يعني أنكم ممتثلون، أو على مقربة شديدة من الامتثال، لهذه الأطر التنظيمية الأربعة في آنٍ واحد.

لستم مضطرّين لبناء هذا بأنفسكم

تطبيق هذه المتطلبات كاملةً فوق جولة Matterport يستلزم إلمامًا عميقًا بـ SDK الخاص بـ Matterport، وبالامتثال لـ WCAG، وبأنماط ARIA، وبتخطيط الواجهات متعددة اللغات (بما فيها الكتابة من اليمين إلى اليسار)، وبتصميم التفاعل ثلاثي الأبعاد. إنه تقاطع نادر من المهارات قلّما يتوافر داخل فرق التطوير.

وهذا تحديدًا ما تقدّمه Geemaps Accessibility. فقد حللنا كل واحد من هذه المتطلبات في بيئة إنتاج فعلية، بأربع لغات وبامتثال كامل لـ WCAG 2.1 AA، ضمن مشروع الساحة البيضاء لبلدية تل أبيب-يافا في حديقة وولفسون. ونطبّق الطبقة المُجرَّبة نفسها على جولتكم.