{"id":"l-a11y-1-3","courseId":"web-accessibility","lang":"ar","kind":"lesson","summary":"اقرأ WCAG 2.2 كما يقرؤها المدقّقون، وطبّق معايير النجاح الستة الجديدة في المستويين A وAA، واعرف أيّ القوانين تستند إليها في 2026.","html":"

«هل الموقع سهل الوصول؟» سؤال لا إجابة له حتى تتّفقوا على معنى «سهل الوصول». بالنسبة لمحتوى الويب، الإجابة المتّفق عليها هي إرشادات إمكانية الوصول إلى محتوى الويب (WCAG) التي تنشرها W3C. تستند إليها القوانين في أوروبا والولايات المتحدة ودول كثيرة غيرها، وتُكتب تقارير التدقيق بلغتها. لا تحتاج إلى حفظها، لكنك تحتاج إلى قراءتها بطلاقة.

\n

كيف تنتظم WCAG

\n

لـ WCAG أربع طبقات، من العامّ إلى القابل للاختبار:

\n

أربعة مبادئ، تُحفظ باختصار POUR. يجب أن يكون المحتوى قابلًا للإدراك (Perceivable) فيستطيع المستخدمون الإحساس به، وقابلًا للتشغيل (Operable) فيستطيعون استخدام عناصر التحكّم، وقابلًا للفهم (Understandable) فيستطيعون فهمه وتوقّع سلوكه، ومتينًا (Robust) فيعمل مع التقنيات المساعدة الحالية والمستقبلية.
13 إرشادًا تحت هذه المبادئ، مثل 1.1 Text Alternatives أو 2.1 Keyboard Accessible.
معايير النجاح (success criteria) تحت كل إرشاد: القواعد القابلة للاختبار. لكلٍّ منها رقم واسم ومستوى: A أو AA أو AAA. مثلًا: “1.4.3 Contrast (Minimum), AA”.
وثائق Understanding والتقنيات التي تشرح الغاية من كل معيار وتعرض طرقًا معروفة للنجاح فيه أو الإخفاق.

\n

يُعلَن التوافق عند مستوى معيّن، وكل مستوى يتضمّن ما تحته. المستوى AA هو الهدف الذي تعتمده الغالبية العظمى من القوانين وسياسات الشركات، وهو هدف Ticketly. وتنصح W3C نفسها بعدم اشتراط AAA لمواقع كاملة، لأن بعض معايير AAA لا يمكن تحقيقها لكل أنواع المحتوى.

\n\n

ما الذي تغيّر في 2.2

\n

صدرت WCAG 2.0 عام 2008، و2.1 عام 2018، و2.2 في أكتوبر 2023. كل إصدار متوافق مع ما قبله: الصفحة التي تحقّق 2.2 تحقّق 2.1 و2.0 أيضًا. حذف الإصدار 2.2 معيارًا واحدًا هو 4.1.1 Parsing، لأن المتصفّحات الحديثة تتعامل مع الكود المعطوب بشكل متّسق. وأضاف تسعة معايير. ستة منها في المستوى A أو AA، وكل واحد منها يكشف خللًا حقيقيًا في Ticketly:

\n

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

المعيار	المستوى	Ticketly اليوم
2.4.11 Focus Not Obscured (Minimum)	AA	شريط ملفات تعريف الارتباط (cookies) الثابت يُخفي الروابط التي عليها التركيز في أسفل الشاشة.
2.5.7 Dragging Movements	AA	شريط نطاق السعر لا يعمل إلا بالسحب.
2.5.8 Target Size (Minimum)	AA	زرّا كمية التذاكر “−” و"+" مربّعان بحجم 16 px متلاصقان.
3.2.6 Consistent Help	A	رابط «اتصل بنا» يغيّر مكانه من صفحة إلى أخرى.
3.3.7 Redundant Entry	A	صفحة الدفع تطلب البريد الإلكتروني مرة أخرى في الخطوة 3.
3.3.8 Accessible Authentication (Minimum)	AA	حقل كلمة مرور الحساب يمنع اللصق.

حجم الهدف (target size) يستحق نظرة أقرب لأنه سهل القياس. يجب ألا يقلّ الهدف الذي يُنقر بالمؤشّر عن 24 × 24 بكسل CSS، إلا إذا كانت حوله مسافة كافية (دائرة قطرها 24 px متمركزة عليه لا تتداخل مع هدف آخر)، أو كان هناك عنصر تحكّم مكافئ في مكان آخر يحقّق الحجم، أو كان الهدف داخل جملة، أو كان حجمه يحدّده المتصفّح، أو كان هذا العرض بعينه ضروريًا (كنموذج يفرضه القانون مثلًا). جعل زرّي الكمية في Ticketly مربّعين بحجم 24 px، أو المباعدة بينهما، يحلّ المشكلة:

\n

ticketly/styles.css

.qty button {\n  min-inline-size: 24px;\n  min-block-size: 24px;\n}

\n

المصادقة سهلة الوصول (accessible authentication) هي المعيار الذي يفاجئ الفرق. ينصّ على أن تسجيل الدخول لا يجوز أن يعتمد على «اختبار للوظائف الإدراكية»، مثل تذكّر كلمة مرور أو نسخ رمز، ما لم يوجد بديل أو آلية مساعدة. السماح باللصق والتعبئة التلقائية لكي يعمل مديرو كلمات المرور يكفي عادةً. أما منع اللصق في حقل كلمة المرور فيخالف المعيار.

\n\n

القانون باختصار

\n

هذه صورة المشهد في 2026، وليست استشارة قانونية؛ راجع مستشارك القانوني في التفاصيل.

\n

الاتحاد الأوروبي. يسري قانون إمكانية الوصول الأوروبي (European Accessibility Act) (التوجيه 2019/882) منذ 28 يونيو 2025. يشمل منتجات وخدمات مثل التجارة الإلكترونية والخدمات المصرفية والكتب الإلكترونية وتذاكر النقل والاتصالات الإلكترونية، لذا فإن موقعًا مثل Ticketly يبيع لعملاء في الاتحاد الأوروبي يقع ضمن نطاقه. الشركات متناهية الصغر التي تقدّم خدمات (أقل من 10 موظفين وإيرادات لا تتجاوز مليوني يورو) مستثناة. والمعيار المرجعي EN 301 549 v3.2.1 يقابل WCAG 2.1 AA لمحتوى الويب؛ أما الإصدار 4.1.1 الذي نُشر في سبتمبر 2026 فينتقل إلى WCAG 2.2 AA، ويصبح هو المرجع بمجرد أن يستشهد به الاتحاد الأوروبي في جريدته الرسمية. وكان توجيه إمكانية الوصول إلى الويب الأقدم يفرض الشيء نفسه على مواقع القطاع العام.
الولايات المتحدة. يشمل الباب الثالث (Title III) من قانون ADA الأعمال المفتوحة للجمهور؛ لا يحدّد معيارًا تقنيًا، لكن المحاكم والتسويات تستخدم WCAG AA، وتُرفع آلاف الدعاوى المتعلّقة بإمكانية الوصول إلى الويب كل عام. وتفرض قاعدة أصدرتها وزارة العدل عام 2024 على حكومات الولايات والحكومات المحلية تحقيق WCAG 2.1 AA؛ وفي أبريل 2026 أجّلت قاعدة مؤقتة المواعيد النهائية إلى أبريل 2027 للجهات التي تخدم 50,000 نسمة أو أكثر، وإلى أبريل 2028 للأصغر منها. أما الوكالات الفيدرالية فتتّبع Section 508، الذي يستند إلى WCAG 2.0 AA.
في أماكن أخرى. تستند كندا والمملكة المتحدة وإسرائيل وأستراليا وغيرها إلى WCAG 2.0 أو 2.1 أو 2.2 في المستوى AA.

\n

الخلاصة العملية بسيطة: ابنِ وفق WCAG 2.2 AA وستحقّق كل ما سبق، لأن 2.2 تتضمّن كل ما في 2.1 و2.0. أما WCAG 3.0 فقيد التطوير كمسودة عمل (working draft) في W3C بنموذج تقييم مختلف؛ وليست معيارًا بعد، ولا يشترطها أي قانون.

\n

الآن وقد صرت تستطيع قراءة كتاب القواعد، يبدأ القسم 2 أعمال الإصلاح الفعلية في Ticketly، بدءًا بهيكل الصفحة: الـ landmarks والعناوين.

\n","toc":[{"id":"sec-1","text":"كيف تنتظم WCAG","level":2},{"id":"sec-2","text":"ما الذي تغيّر في 2.2","level":2},{"id":"sec-3","text":"القانون باختصار","level":2}],"takeaways":["تنتظم WCAG في أربعة مبادئ (قابل للإدراك، قابل للتشغيل، قابل للفهم، متين)، ثم إرشادات، ثم معايير نجاح قابلة للاختبار في المستويات A وAA وAAA.","المستوى AA هو الهدف الذي تعتمده الغالبية العظمى من القوانين والسياسات؛ أما AAA فطموح وغير مطلوب لمواقع كاملة.","أضافت WCAG 2.2 معايير عدم حجب التركيز، وبدائل السحب، وحدًّا أدنى لحجم الهدف قدره 24 × 24 بكسل، والمساعدة المتّسقة، وعدم تكرار الإدخال، والمصادقة سهلة الوصول.","يسري قانون إمكانية الوصول الأوروبي منذ 28 يونيو 2025، والقواعد الأمريكية بموجب ADA تستند إلى WCAG 2.1 AA، لذا فإن WCAG 2.2 AA تغطّي الاثنين."],"further":[{"title":"W3C: What's New in WCAG 2.2","url":"https://www.w3.org/WAI/standards-guidelines/wcag/new-in-22/"},{"title":"W3C: How to Meet WCAG 2.2 (Quick Reference)","url":"https://www.w3.org/WAI/WCAG22/quickref/"},{"title":"W3C: Understanding Success Criterion 2.5.8 Target Size (Minimum)","url":"https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html"}],"quiz":[{"q":"

حين تنتقل بمفتاح Tab إلى رابط «أضِف إلى التقويم» قرب أسفل الشاشة، يغطّيه شريط «سلّتك» الثابت أسفل الصفحة في Ticketly تغطيةً كاملة. أيّ معيار في WCAG 2.2 يخالفه هذا؟

","options":[{"text":"2.4.7 Focus Visible","why":"للرابط مؤشّر تركيز فعلًا؛ لكنه مخفي خلف محتوى آخر. معيار Focus Visible يتعلّق بوجود المؤشّر أصلًا."},{"text":"2.5.8 Target Size (Minimum)","why":"حجم الهدف يتعلّق بمساحة الهدف الذي يُنقر بالمؤشّر، لا بكونه مغطّى وهو يحمل تركيز لوحة المفاتيح."},{"text":"1.4.10 Reflow","why":"معيار Reflow يتعلّق باتّساع المحتوى لـ viewport عرضه 320 بكسل CSS دون تمرير في اتجاهين، لا بتداخل العناصر الثابتة."},{"text":"2.4.11 Focus Not Obscured (Minimum)","why":"صحيح. في المستوى AA، يجب ألا يُخفى العنصر الذي عليه التركيز بالكامل خلف محتوى وضعه صاحب الموقع، مثل الترويسات أو التذييلات أو الأشرطة الثابتة."}],"answer":3},{"q":"

أيّ تغيير يحقّق معيار 2.5.7 Dragging Movements لشريط تحديد نطاق السعر في Ticketly، والذي لا يعمل حاليًا إلا بسحب مقبضه؟

","options":[{"text":"تكبير المقبض ليسهل الإمساك به","why":"المقبض الأكبر ما زال يتطلّب السحب. وقد لا يستطيع المصابون بالرعاش أو من يستخدمون مؤشّرًا يُحرَّك بالرأس الاستمرار في الضغط أثناء التحريك أصلًا."},{"text":"إضافة تلميح يقول «اسحب للتعديل»","why":"التعليمات لا تُلغي الحاجة إلى السحب. المعيار يطلب طريقة لفعل الشيء نفسه بنقرات أو لمسات مفردة."},{"text":"السماح للمستخدمين بالنقر على نقاط في المسار أو استخدام زرّي زائد وناقص لضبط القيمة","why":"صحيح. البديل الذي يعمل بمؤشّر واحد ونقرة مفردة، مثل النقر على نقطة في المسار أو ضغط أزرار، يحقّق المعيار."}],"answer":2},{"q":"

يسأل مدير منتج: «هل علينا تحقيق كل معايير AAA لنكون ملتزمين؟» ما الإجابة الدقيقة؟

","options":[{"text":"لا؛ الهدف المعتاد هو المستوى AA، وW3C نفسها تقول إن AAA غير موصى به كسياسة عامة لمواقع كاملة","why":"صحيح. بعض معايير AAA لا يمكن تحقيقها لكل أنواع المحتوى، لذا تُستخدم بانتقائية حيث تكون أهمّ."},{"text":"نعم، لأن التوافق مع WCAG يعني تحقيق كل معايير النجاح في كل المستويات","why":"يُعلَن التوافق عند مستوى معيّن. والقوانين والسياسات تطلب في الغالب المستوى AA، أي كل معايير A وAA."},{"text":"لا، المستوى A يكفي للقانونين الأوروبي والأمريكي","why":"المعيار الأوروبي المنسَّق والقواعد الأمريكية تستند إلى المستوى AA، الذي يتضمّن كل معايير A وAA."}],"answer":0},{"q":"

أيّ مسار لتسجيل الدخول في Ticketly يحقّق معيار 3.3.8 Accessible Authentication (Minimum)؟

","options":[{"text":"حقل كلمة المرور يمنع اللصق، فلا بدّ من كتابة كلمة المرور من الذاكرة","why":"منع اللصق يعطّل مديري كلمات المرور، فيفرض اختبارًا للذاكرة. وهذا يخالف المعيار."},{"text":"حقل كلمة المرور يسمح باللصق والتعبئة التلقائية، وهناك خيار «أرسل لي رابط دخول بالبريد»","why":"صحيح. مديرو كلمات المرور وروابط البريد تعني أن أحدًا لا يُضطر إلى حفظ شيء أو نسخه يدويًا."},{"text":"على المستخدمين إعادة كتابة رمز من ستة أحرف يظهر كصورة مشوّهة، دون أي بديل","why":"نسخ رمز مشوّه اختبار للوظائف الإدراكية، ومن دون بديل فهو يخالف المعيار."}],"answer":1}],"exercise":{"kind":"choice","multiple":true,"options":["seat-drag","focus-hidden","tiny-qty","focus-thin","reverse-code","inline-link"],"correct":["seat-drag","focus-hidden","tiny-qty","reverse-code"],"title":"فرز مشكلات Ticketly وفق WCAG 2.2 AA","prompt":"

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

\n","hints":["لكل ملاحظة، سمِّ معيار النجاح أولًا، ثم تحقّق من مستواه في المرجع السريع.","معيار Focus Appearance ‏(2.4.13) من المستوى AAA. ولمعيار Target Size (Minimum) استثناء للروابط داخل الجمل.","أربع من الست إخفاقات في المستوى AA أو A."],"explanation":"

أربع ملاحظات تخالف المستوى AA: تحديد المقاعد بالسحب فقط (2.5.7 Dragging Movements)، والشريط الذي يغطّي بالكامل زرًّا عليه التركيز (2.4.11 Focus Not Obscured)، وزرّا الكمية المتلاصقان بحجم 16 px ‏(2.5.8 Target Size)، وتحدّي تسجيل الدخول بعكس ترتيب الحروف، وهو اختبار للوظائف الإدراكية بلا بديل (3.3.8 Accessible Authentication). حلقة التركيز المنقّطة الرفيعة مرئية، فهي تحقّق 2.4.7 Focus Visible؛ أما المعيار الأشدّ 2.4.13 Focus Appearance فمن المستوى AAA. والرابط الصغير داخل فقرة الشروط يشمله الاستثناء الخاص بالعناصر المضمّنة في النص في 2.5.8. الفرز مهم: التقرير الذي يخلط تحسينات AAA الاختيارية بإخفاقات AA يُتجاهَل.

\n","checkLabels":{},"optionText":{"seat-drag":{"text":"اختيار مجموعة من المقاعد لا يعمل إلا بسحب مستطيل تحديد فوق خريطة المقاعد.","why":"يخالف 2.5.7 Dragging Movements ‏(AA). يحتاج المستخدمون إلى طريقة تعمل بمؤشّر واحد ونقرات مفردة، مثل النقر على المقاعد واحدًا تلو الآخر."},"focus-hidden":{"text":"حين تنتقل بمفتاح Tab إلى زر “Checkout”، يغطّيه شريط ملفات تعريف الارتباط الثابت تمامًا.","why":"يخالف 2.4.11 Focus Not Obscured (Minimum) ‏(AA): العنصر الذي عليه التركيز مخفي بالكامل خلف محتوى وضعه صاحب الموقع."},"tiny-qty":{"text":"زرّا أيقونتي كمية التذاكر “−” و"+" بحجم 16 × 16 px ومتلاصقان.","why":"يخالف 2.5.8 Target Size (Minimum) ‏(AA). حجمهما أقل من 24 × 24 px ولا توجد مسافة تعوّض ذلك."},"focus-thin":{"text":"حلقة التركيز إطار منقّط بسماكة 1 px وبتباين جيد مع الخلفية.","why":"ينجح في AA. التركيز مرئي (2.4.7). وحده معيار 2.4.13 Focus Appearance، وهو من المستوى AAA، يطلب مؤشّرًا أسمك."},"reverse-code":{"text":"لتسجيل الدخول، على المستخدمين كتابة حروف كلمة معروضة بترتيب معكوس، دون أي خيار آخر.","why":"يخالف 3.3.8 Accessible Authentication (Minimum) ‏(AA): إنه اختبار للوظائف الإدراكية بلا بديل أو آلية مساعدة."},"inline-link":{"text":"رابط “refund policy” داخل فقرة الشروط ارتفاعه 14 px فقط.","why":"ينجح. الأهداف داخل جملة أو كتلة نصية مستثناة من 2.5.8 بموجب استثناء العناصر المضمّنة في النص."}}},"words":889,"readMinutes":5}