فحص صفحة وبناء فريق يراعي إمكانية الوصول

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

تدقيق منظّم

تعطي منهجية التقييم الصادرة عن W3C، WCAG-EM، الشكل العام. وهذا تطبيقها على Ticketly:

1. النطاق والهدف. «تطبيق Ticketly على الويب، WCAG 2.2 بالمستوى AA، أحدث إصدارات Chrome وFirefox وSafari، وNVDA وVoiceOver.» كتابة ذلك تمنع التدقيق من التشعّب، أو من تخطّي الأجزاء الصعبة بصمت.
2. الاستكشاف واختيار العيّنة. اسرد المسارات الأساسية: إيجاد فعالية، وحجز التذاكر، والدفع، وإدارة الحجز. اختر صفحات تمثيلية، وأدرج كل عملية كاملة من أولها إلى آخرها. يشمل التوافق مع WCAG العمليات كاملةً، وكثير من الإخفاقات، مثل ضياع التركيز بعد خطوة أو طلب البريد الإلكتروني مرة أخرى، لا تظهر إلا بين الصفحات.
3. الفحص الآلي. شغّل axe على كل صفحة وحالة في العيّنة: نوافذ حوار مفتوحة، وقوائم موسَّعة، ونماذج تُظهر أخطاء، والسمة الداكنة مفعّلة. أصلح النتائج أو سجّلها؛ فهي الرخيصة.
4. جولة لوحة المفاتيح. كل مسار، دون فأرة، باستخدام قائمة الفحص من درس الاختبار بلوحة المفاتيح وقارئات الشاشة.
5. جولة قارئ الشاشة. المسارات نفسها مع NVDA وChrome، وVoiceOver وSafari، وVoiceOver على iOS للتخطيط الخاص بالهاتف.
6. الفحوص البصرية وفحوص المحتوى. تكبير 400% وإعادة التدفّق عند 320px، والتباعد النصي، والتباين غير النصي، وتقليل الحركة، وجودة النص البديل، والعناوين، ونصوص الروابط، ولغة الأجزاء.
7. التقرير وترتيب الأولويات. كل ملاحظة مع موقعها، وخطواتها، ومعيار WCAG، ودرجة الخطورة، واقتراح للإصلاح.
8. الإصلاح وإعادة الاختبار للمسارات نفسها، ثم تحديث بيان إمكانية الوصول.

ترتيب ما تجده بحسب الأولوية

كثيرًا ما يسرد التدقيق الأول لمنتج حقيقي عشرات المشكلات أو مئاتها. رتّبها بحسب ما تفعله بالناس:

• حرجة (Critical): تمنع بعض المستخدمين من إتمام مهمة أساسية. حقل رقم بطاقة بلا label، أو مصيدة لوحة مفاتيح في نافذة الدفع، أو CAPTCHA بلا بديل.
• خطيرة (Serious): المهمة ممكنة لكنها صعبة جدًا. عناوين مفقودة في صفحة طويلة، أو أخطاء لا تُعلَن.
• متوسطة (Moderate): احتكاك وارتباك. نصوص روابط مبهمة، أو تباين منخفض في النصوص الثانوية.
• طفيفة (Minor): لمسات أخيرة. أيقونة زخرفية تُعلَن على أنها “graphic”.

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

دمجها في عمل الفريق

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

التصميم. أرفِق بالتصاميم ملاحظات بالمعلومات التي لا يستطيع المطوّرون رؤيتها في صورة: بنية العناوين، والـ landmarks، وترتيب التركيز، والأسماء المتاحة لأزرار الأيقونات، ورسائل الخطأ، وما يتحرّك وبديله عند تقليل الحركة. تحقّق من tokens الألوان مقابل نسب التباين مرة واحدة، لترثها كل الشاشات. وصمّم حالات التركيز والخطأ، لا الحالة الافتراضية وحالة التمرير فقط.

الـ Components. مكتبة الـ components المشتركة أكبر رافعة لديك. إن كانت components مثل Dialog وTabs وButton وTextField سهلة الوصول، فكل ميزة تُبنى منها تبدأ سهلة الوصول، والإصلاح في مكان واحد يُصلح كل شيء.

التطوير. استخدم eslint-plugin-jsx-a11y للـ linting، وشغّل axe في اختبارات الـ components والاختبارات الشاملة، واجعل فحص لوحة المفاتيح لمدة دقيقتين جزءًا من كل pull request. وتحديد العناصر بالدور والاسم في الاختبارات، كما يشجّع Playwright وTesting Library، يُبقي الأسماء صادقة.

ضمان الجودة وتعريف الإنجاز. لا تكون القصة (story) منجزة حتى تعمل بلوحة المفاتيح وتُفحص بقارئ شاشة واحد على الأقل. وأخطاء إمكانية الوصول مكانها الـ backlog العادي بدرجات خطورة عادية؛ فالقائمة المنفصلة تميل إلى أن تصبح القائمة التي لا يجدولها أحد.

المحتوى والمشتريات. المحرّرون يكتبون النصوص البديلة والنصوص بلغة بسيطة؛ فدرّبهم، واجعل حقل alt إلزاميًا في نظام إدارة المحتوى (CMS). وحين تشتري widgets من أطراف ثالثة، مثل نموذج دفع أو أداة محادثة، فاطلب تقرير توافق إمكانية الوصول (Accessibility Conformance Report) واختبرها بنفسك، لأن عوائقها تصبح عوائقك.

أين انتهى Ticketly

صار لـ Ticketly الآن landmarks ومخطّط عناوين، وأزرار وروابط حقيقية، ونماذج لها labels وأخطاء تُعلَن، ونصوص بديلة مدروسة، وجدول أسعار سليم. يعمل من لوحة المفاتيح مع رابط تخطٍّ وتركيز مرئي، وفيه نافذة حجز أصلية، وتبويبات ARIA، ورسائل حالة حيّة، وينجح في التباين، ويُعاد تدفّقه عند تكبير 400%، ويحترم تقليل الحركة، ويسمّي كل عنصر تحكّم، وينطق محتواه العربي بشكل صحيح. والأهم من ذلك كله أن فيه axe ضمن الـ CI، وفريقًا يفحص بلوحة المفاتيح قبل الدمج.

حجز سمير تذاكره لمهرجان Harbour Lights بنفسه هذا العام، في أقل من دقيقتين، دون أن يتصل بأحد. وهذا هو المقصود من كل ما سبق.