شرح معايير WCAG 2.2: الدليل الهندسي والتقني الشامل

نظرة عامة على تغييرات معايير WCAG 2.2

أصدر اتحاد شبكة الويب العالمية (W3C) رسمياً توصية WCAG 2.2 لمعالجة الفجوات الحرجة في سهولة استخدام الأجهزة المحمولة، والتفاعل عبر لوحة المفاتيح لضعاف البصر، وإمكانية الوصول الإدراكي. وبشكل محوري، أزال معيار WCAG 2.2 أيضاً معيار 4.1.1 (التحليل النحوي Parsing) لأن متصفحات الويب الحديثة والتقنيات المساعدة تتعامل الآن مع تصحيح أخطاء HTML بشكل موحد وفق معيار HTML Living Standard.

• تقديم 9 معايير نجاح جديدة (6 معايير في المستويين A و AA، و 3 معايير في المستوى AAA).
• إلغاء وتجاوز معيار قديم واحد (المعيار 4.1.1 الخاص بالتحليل النحوي Parsing).
• تركيز متزايد على تفاعلات المؤشر، وخفض الحمل المعرفي، ووضوح المؤشرات المرئية.

مظهر مؤشر التركيز وعدم حجب التركيز

بموجب معيار 2.4.11 (عدم حجب التركيز - الحد الأدنى، المستوى AA)، يجب ألا تؤدي الترويسات الثابتة، أو أزرار الإجراءات العائمة، أو إشعارات ملفات تعريف الارتباط إلى حجب أي عنصر بالكامل عندما يتلقى تركيز لوحة المفاتيح. وبموجب معيار 2.4.13 (مظهر التركيز، المستوى AAA)، يجب أن يحقق مؤشر التركيز نسبة تباين لا تقل عن 3:1 مع مساحة إطار لا تقل عن 2 بكسل.

/* Recommended CSS for WCAG 2.2 compliant focus styling */
:focus-visible {
  outline: 3px solid #0284C7;
  outline-offset: 2px;
  scroll-margin-top: 5rem; /* Prevents sticky headers from obscuring focus */
  scroll-margin-bottom: 5rem;
}

هندسة الحجم الأدنى لأهداف النقر

يفرض معيار 2.5.8 (حجم الهدف - الحد الأدنى، المستوى AA) أن تكون مساحة أهداف المؤشر التفاعلي 24 في 24 بكسل على الأقل، ما لم يتم توفير مسافة إزاحة كافية تضمن عدم تداخل دائرة قطرها 24 بكسل مع هدف مجاور.

• تُستثنى الروابط النصية المضمنة داخل الجمل والفقرات.
• تُستثنى الأهداف الأساسية بطبيعتها (مثل الدبابيس على خريطة تفاعلية كثيفة).
• تظل أفضل الممارسات الموصى بها لهواتف اللمس 44x44 بكسل لنظام iOS و 48x48 بكسل لنظام Android.

حركات السحب والبدائل بنقرة واحدة

بموجب معيار 2.5.7 (حركات السحب، المستوى AA)، يجب أن توفر أي وظيفة تعتمد على مسار سحب (مثل بطاقات مهام لوحة كانبان أو أشرطة التمرير) بديلاً بنقرة واحدة بسيطة، مثل أزرار إعادة الترتيب لأعلى/لأسفل أو حقول إدخال رقمية.

// Example: Pairing drag-and-drop with accessible button controls
<div role="listitem">
  <span>Task Name</span>
  <div className="flex gap-2">
    <button aria-label="Move task up" onClick={moveUp}>↑</button>
    <button aria-label="Move task down" onClick={moveDown}>↓</button>
  </div>
</div>

الإدخال المكرر والمصادقة الميسرة

يمنع معيار 3.3.7 (الإدخال المكرر، المستوى A) مطالبة المستخدمين بإعادة إدخال معلومات سبق تقديمها في نفس الجلسة (مثل مطابقة عنوان الفاتورة لعنوان الشحن). ويلزم معيار 3.3.8 (المصادقة الميسرة، المستوى AA) بعدم الاعتماد الحصري على اختبارات الوظائف المعرفية (مثل حفظ كلمات المرور أو حل ألغاز كابتشا المرئية المعقدة) دون توفير بدائل مثل الإكمال التلقائي، أو دعم اللصق، أو مفاتيح مرور WebAuthn.

قائمة التحقق الهندسية للتنفيذ السريع

راجع قائمة التحقق الفنية هذه أثناء مراجعة الشيفرة البرمجية لضمان امتثال الميزات الجديدة لمعايير WCAG 2.2 قبل طرحها للإنتاج:

• تأكد من أن الأشرطة العلوية أو الإعلانات الثابتة لا تحجب العناصر المركّز عليها (استخدم scroll-padding و scroll-margin).
• تأكد من أن حدود الأزرار وأيقونات التبديل لا تقل مساحتها التفاعلية عن 24x24 بكسل.
• وفر بدائل عبر أزرار لأعلى ولأسفل أو عبر لوحة المفاتيح لأي عناصر فرز بالسحب والإفلات.
• اسمح بلصق النصوص في جميع حقول كلمات المرور ورموز التحقق الثنائي MFA.
• قم بالتعبئة التلقائية للبيانات الشخصية أو العناوين المكررة في النماذج متعددة الخطوات.