على مدى سبعة عشر درسًا أصلحت Ticketly شريحةً بعد شريحة. والتدقيق هو الطريقة التي تثبت بها أن الكل يعمل، وتجد بها ما انزلق بين الشرائح. ثم تأتي المشكلة الأصعب: أن يبقى كذلك حين يغيّره خمسة مطوّرين ومصمّمان وفريق تسويق كل أسبوع.
\nتعطي منهجية التقييم الصادرة عن W3C، WCAG-EM، الشكل العام. وهذا تطبيقها على Ticketly:
\nكثيرًا ما يسرد التدقيق الأول لمنتج حقيقي عشرات المشكلات أو مئاتها. رتّبها بحسب ما تفعله بالناس:
\nثم زِنها بحسب حجم الزيارات والمسار: مشكلة خطيرة في صفحة الدفع أهمّ من مشكلة متوسطة في صفحة الوظائف. وإصلاح عشر مشكلات حرجة في مسار الحجز يفعل للعملاء ذوي الإعاقة أكثر مما يفعله إصلاح مئة مشكلة طفيفة في أماكن أخرى.
\n\nعمليات التدقيق تجد المشكلات بعد بنائها. أما إمكانية الوصول الدائمة فتأتي من التقاط المشكلات في كل مرحلة، عند النقطة التي يكون إصلاحها فيها أرخص.
\nالتصميم. أرفِق بالتصاميم ملاحظات بالمعلومات التي لا يستطيع المطوّرون رؤيتها في صورة: بنية العناوين، والـ landmarks، وترتيب التركيز، والأسماء المتاحة لأزرار الأيقونات، ورسائل الخطأ، وما يتحرّك وبديله عند تقليل الحركة. تحقّق من tokens الألوان مقابل نسب التباين مرة واحدة، لترثها كل الشاشات. وصمّم حالات التركيز والخطأ، لا الحالة الافتراضية وحالة التمرير فقط.
\nالـ Components. مكتبة الـ components المشتركة أكبر رافعة لديك. إن كانت components مثل Dialog وTabs وButton وTextField سهلة الوصول، فكل ميزة تُبنى منها تبدأ سهلة الوصول، والإصلاح في مكان واحد يُصلح كل شيء.
التطوير. استخدم eslint-plugin-jsx-a11y للـ linting، وشغّل axe في اختبارات الـ components والاختبارات الشاملة، واجعل فحص لوحة المفاتيح لمدة دقيقتين جزءًا من كل pull request. وتحديد العناصر بالدور والاسم في الاختبارات، كما يشجّع Playwright وTesting Library، يُبقي الأسماء صادقة.
ضمان الجودة وتعريف الإنجاز. لا تكون القصة (story) منجزة حتى تعمل بلوحة المفاتيح وتُفحص بقارئ شاشة واحد على الأقل. وأخطاء إمكانية الوصول مكانها الـ backlog العادي بدرجات خطورة عادية؛ فالقائمة المنفصلة تميل إلى أن تصبح القائمة التي لا يجدولها أحد.
\nالمحتوى والمشتريات. المحرّرون يكتبون النصوص البديلة والنصوص بلغة بسيطة؛ فدرّبهم، واجعل حقل alt إلزاميًا في نظام إدارة المحتوى (CMS). وحين تشتري widgets من أطراف ثالثة، مثل نموذج دفع أو أداة محادثة، فاطلب تقرير توافق إمكانية الوصول (Accessibility Conformance Report) واختبرها بنفسك، لأن عوائقها تصبح عوائقك.
\n\nصار لـ Ticketly الآن landmarks ومخطّط عناوين، وأزرار وروابط حقيقية، ونماذج لها labels وأخطاء تُعلَن، ونصوص بديلة مدروسة، وجدول أسعار سليم. يعمل من لوحة المفاتيح مع رابط تخطٍّ وتركيز مرئي، وفيه نافذة حجز أصلية، وتبويبات ARIA، ورسائل حالة حيّة، وينجح في التباين، ويُعاد تدفّقه عند تكبير 400%، ويحترم تقليل الحركة، ويسمّي كل عنصر تحكّم، وينطق محتواه العربي بشكل صحيح. والأهم من ذلك كله أن فيه axe ضمن الـ CI، وفريقًا يفحص بلوحة المفاتيح قبل الدمج.
\nحجز سمير تذاكره لمهرجان Harbour Lights بنفسه هذا العام، في أقل من دقيقتين، دون أن يتصل بأحد. وهذا هو المقصود من كل ما سبق.
\n","toc":[{"id":"sec-1","text":"تدقيق منظّم","level":2},{"id":"sec-2","text":"ترتيب ما تجده بحسب الأولوية","level":2},{"id":"sec-3","text":"دمجها في عمل الفريق","level":2},{"id":"sec-4","text":"أين انتهى Ticketly","level":2}],"takeaways":["للتدقيق نطاق وهدف محدّدان، وعيّنة تمثيلية تشمل مسارات كاملة، واختبار آلي ويدوي، وتقرير مرتّب بحسب الأولوية.","رتّب الأولويات بحسب الأثر في المهام الحقيقية؛ فعائق واحد في صفحة الدفع أهمّ من دزينة مشكلات صغيرة في صفحة «من نحن».","تدوم إمكانية الوصول حين تكون جزءًا من كل مرحلة، من ملاحظات التصميم والـ components سهلة الوصول إلى قواعد الـ lint وفحوص الـ CI وتعريف الإنجاز (definition of done).","أخطاء إمكانية الوصول أخطاء؛ أبقِها في الـ backlog العادي بدرجات خطورة عادية، لا في قائمة منفصلة لا تُجدوَل أبدًا."],"further":[{"title":"W3C WAI: WCAG-EM Overview (Website Accessibility Conformance Evaluation Methodology)","url":"https://www.w3.org/WAI/test-evaluate/conformance/wcag-em/"},{"title":"W3C WAI: Planning and Managing Web Accessibility","url":"https://www.w3.org/WAI/planning-and-managing/"},{"title":"W3C WAI: Developing an Accessibility Statement","url":"https://www.w3.org/WAI/planning/statements/"}],"quiz":[{"q":"وجد تدقيقك لـ Ticketly 60 مشكلة ولديك sprint واحد. أيّها يجب أن يُصلَح أولًا؟
","options":[{"text":"روابط التذييل الثلاثون منخفضة التباين، لأنها الأكثر عددًا","why":"الكثرة ليست هي الأثر. روابط التذييل نادرًا ما تكون السبب في عجز أحد عن شراء تذكرة."},{"text":"كل ما أبلغ عنه axe، لأن النتائج الآلية هي الأكثر موضوعية","why":"بعض أخطر المشكلات، مثل مصيدة تركيز في صفحة الدفع، لا يبلّغ عنها axe أبدًا. رتّب الأولويات بحسب الأثر، لا بحسب المصدر."},{"text":"مشكلات صفحة «من نحن»، لأنها الأسهل وتُظهر تقدّمًا سريعًا","why":"للمكاسب السريعة مكانها، لكن ترك صفحة الدفع معطوبة يعني أن العملاء ذوي الإعاقة ما زالوا عاجزين عن إتمام الشراء."},{"text":"حقل رقم البطاقة بلا label، ومصيدة لوحة المفاتيح في نافذة الدفع، لأنهما يمنعان الشراء","why":"صحيح. العوائق في أهمّ المسارات تأتي أولًا؛ فهي تمنع الناس من إتمام المهمة أصلًا."}],"answer":3},{"q":"لماذا يجب أن تشمل عيّنة التدقيق عمليات كاملة، مثل مسار الحجز كله، لا صفحات منفردة فقط؟
","options":[{"text":"لأن التوافق مع WCAG يشترط أن تتوافق كل صفحة في العملية، والإخفاقات كثيرًا ما تظهر بين الخطوات","why":"صحيح. اشتراطات التوافق في WCAG تشمل العمليات الكاملة، وإدارة التركيز والتعافي من الأخطاء وتكرار الإدخال لا تظهر إلا حين تمرّ عبرها."},{"text":"لأن الأدوات الآلية لا تستطيع فحص إلا المسارات متعدّدة الصفحات","why":"الأدوات الآلية تفحص صفحات وحالات منفردة. المسارات مهمة بسبب ما يمرّ به الإنسان بين الخطوات."},{"text":"لأن الصفحات المنفردة سهلة الوصول دائمًا","why":"الصفحات المنفردة تفشل طوال الوقت. الفكرة أن اختبار الصفحات وحدها يفوّت مشكلات لا تظهر إلا عبر مسار."}],"answer":0},{"q":"أيّ ممارسة تفعل أكثر من غيرها لإبقاء Ticketly سهل الوصول مع إطلاق ميزات جديدة؟
","options":[{"text":"تدقيق خارجي كامل كل سنتين","why":"عمليات التدقيق نقاط تفتيش قيّمة، لكن سنتين من التغييرات غير المفحوصة ستعيد معظم المشكلات."},{"text":"إمكانية الوصول ضمن تعريف الإنجاز، مع components مشتركة سهلة الوصول، وaxe في الـ CI، وفحص بلوحة المفاتيح قبل الدمج","why":"صحيح. حين تمرّ كل ميزة عبر البوّابات نفسها، تُصان إمكانية الوصول باستمرار بدلًا من أن تُرمَّم دوريًا."},{"text":"«backlog لإمكانية الوصول» منفصل يُراجَع في نهاية كل ربع سنة","why":"الـ backlog المنفصل يوحي بأن هذه إضافات اختيارية ويميل إلى أن يُؤجَّل. أخطاء إمكانية الوصول مكانها الـ backlog العادي."}],"answer":1}],"exercise":{"kind":"order","items":["scope","sample","automated","keyboard","screen-reader","visual-content","report","retest"],"title":"خطّط لتدقيق Ticketly","prompt":"طُلب منك تدقيق Ticketly وفق WCAG 2.2 AA قبل إطلاق بيع تذاكر المهرجان. رتّب خطوات التدقيق بالترتيب الذي ستنفّذها به.
\n","hints":["لا يمكنك اختيار الصفحات قبل أن تعرف المعيار الذي تدقّق وفقه وأيّ المسارات مهمة.","أجرِ الفحوص الآلية الرخيصة والسريعة قبل الجولات اليدوية الأبطأ، حتى لا تشتّت الـ labels المفقودة انتباه المختبِرين اليدويين.","تنتهي الاختبارات بجولة على الفحوص البصرية وفحوص المحتوى التي لا تغطّيها الأداة الآلية ولا الجولتان اليدويتان. ويأتي التقرير بعد انتهاء كل الاختبارات، ولا ينتهي العمل حتى يُعاد اختبار الإصلاحات."],"explanation":"يبدأ التدقيق بتحديد نطاقه وهدفه، ليتّفق الجميع على معنى «الانتهاء». ثم تختار العيّنة صفحات تمثيلية ومسارات كاملة. وتأتي الفحوص الآلية أولًا بين الاختبارات لأنها سريعة وتزيل المشكلات الواضحة. وتسبق جولةُ لوحة المفاتيح جولةَ قارئ الشاشة لأن إخفاقات لوحة المفاتيح (عناصر لا يمكن الوصول إليها، ومصائد) تعيق اختبار قارئ الشاشة أيضًا. وتغطّي الفحوص البصرية وفحوص المحتوى ما لا تكشفه أيٌّ من الأداتين. ويرتّب التقرير الأولويات بحسب الأثر، وتنغلق الدورة بالإصلاحات، وإعادة اختبار المسارات نفسها، وتحديث بيان إمكانية الوصول.
\n","checkLabels":{},"itemText":{"scope":"الاتفاق على النطاق والهدف: WCAG 2.2 AA، والمتصفّحات والتقنيات المساعدة، والمسارات الأساسية","sample":"اختيار عيّنة: الصفحة الرئيسية، وصفحة الفعالية، وصفحات الدفع والحساب، إضافةً إلى مسار الحجز كاملًا","automated":"تشغيل axe على كل صفحة وحالة في العيّنة، بما فيها نوافذ الحوار المفتوحة وأخطاء النماذج","keyboard":"إجراء جولة بلوحة المفاتيح عبر كل مسار: الوصول، والرؤية، والتشغيل، والخروج","screen-reader":"تكرار المسارات مع NVDA وChrome، وVoiceOver وSafari، وVoiceOver على iOS","visual-content":"فحص تكبير 400%، والتباعد النصي، وتقليل الحركة، وجودة النص البديل، والعناوين، واللغة","report":"كتابة الملاحظات مع الموقع ومعيار WCAG ودرجة الخطورة والإصلاح، وتقديم العوائق في المسارات الأساسية","retest":"إصلاح المشكلات، وإعادة اختبار المسارات نفسها، وتحديث بيان إمكانية الوصول"}},"words":832,"readMinutes":5}