اختبار إمكانية الوصول البصرية

تباين النص: ماذا تعني النسبة وكيف تقيسها

يشترط 1.4.3 Contrast (Minimum) (AA) أن تكون نسبة التباين (Contrast ratio) للنص وصور النص 4.5:1 على الأقل مقابل خلفيته، أو 3:1 للنص كبير الحجم. وتعرّف WCAG النص كبير الحجم بأنه 18 نقطة على الأقل، أو 14 نقطة بخط عريض (بوحدات CSS: 18pt تساوي 24px، و14pt نحو 18.7px). ولا يوجد متطلب تباين للنص في العناصر غير النشطة، ولا للزخرفة البحتة، ولا للنص غير المرئي، ولا للنص الذي هو جزء من صورة تحتوي محتوى بصرياً مهماً آخر، ولا للشعارات. أما 1.4.6 Contrast (Enhanced) الأشد فهو من المستوى AAA بنسبتي 7:1 و4.5:1.

النسبة ليست رأياً تصميمياً. تعرّفها WCAG انطلاقاً من السطوع النسبي (Relative luminance) للونين — أي السطوع النسبي لكل لون على مقياس من 0 للأسود الأشد إلى 1 للأبيض الأفتح، محسوباً من قيم sRGB — وتتراوح النسبة الناتجة من 1:1 إلى 21:1. استخدم أداة فحص تباين تطبّق تعريف WCAG، ولا تقدّر بالعين.

على سبيل المثال: الرمادي #767676 على الأبيض نسبته 4.54:1 وينجح لنص المتن؛ و#777777 على الأبيض نسبته 4.48:1 ويُخفق للنص العادي (لا تقرّب للأعلى)، مع أنه ينجح للنص الكبير. قِس الألوان كما تُعرض فعلاً: النص فوق صورة أو تدرّج يُفحص عند أسوأ نقطة، وحالات المرور والتركيز والزيارة والتحديد والخطأ يحتاج كل منها قياساً خاصاً.

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

جرّبها: محوّل الألوان جرّبها: محوّل HEX / RGB / HSL

تباين العناصر غير النصية: المكونات والحالات والرسومات

يشترط 1.4.11 Non-text Contrast (AA) نسبة 3:1 مقابل الألوان المجاورة للمعلومات البصرية اللازمة لتمييز مكونات الواجهة وحالاتها، ولأجزاء الرسومات اللازمة لفهم المحتوى. وتُستثنى المكونات غير النشطة وعناصر التحكم الافتراضية للمتصفح غير المعدّلة، وكذلك الرسومات التي يكون عرضها بطريقة معينة جوهرياً.

الإخفاقات المعتادة: حدود حقول باهتة (حدّ #CCCCCC على الأبيض نسبته 1.61:1)، ومربع تحديد لا تختلف حالته المحددة إلا بصبغة خفيفة، وأزرار أيقونات فقط بلون رمادي فاتح، ومؤشرات تركيز لا تكاد تختلف عن الخلفية، وخطوط الرسوم البيانية أو قطاعاتها المميّزة بألوان باستيل متقاربة فقط. وإذا لم يكن للحقل حد مرئي أصلاً، فتحقق من أن شيئاً آخر يدل على أنه حقل — تعبئة خلفية أو خط سفلي يستوفي 3:1.

استخدام اللون

ينص 1.4.1 Use of Color (A) على ألا يكون اللون الوسيلة البصرية الوحيدة لنقل المعلومات، أو الإشارة إلى إجراء، أو طلب استجابة، أو تمييز عنصر. وهذا منفصل عن التباين: فقد ينجح لونان في التباين ويبقيان غير قابلين للتمييز لمن لديه قصور في تمييز الأحمر والأخضر.

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

البدائل النصية: كيف تقرّر النص البديل

يشترط 1.1.1 Non-text Content (A) بديلاً نصياً (Text alternative) يؤدي الغرض المكافئ. تستطيع الأدوات إخبارك بوجود السمة alt؛ أما صحتها فلا يقرّرها إلا إنسان. صنّف كل صورة أولاً ثم احكم على النص.

• صورة معلوماتية — ينقل alt المعلومة التي تضيفها الصورة في سياقها باختصار: «مخطط أعمدة: انخفضت المبالغ المستردة من 9% إلى 4% بعد صفحة الدفع الجديدة» بدلاً من «chart.png».
• صورة زخرفية — alt فارغ (alt="") أو خلفية CSS، ليتجاوزها قارئ الشاشة. صورة زخرفية بقيمة alt="زخرفة دائرية" مجرد ضجيج.
• صورة وظيفية — صورة هي رابط أو زر: يصف alt الإجراء أو الوجهة («بحث»، «تنزيل الفاتورة PDF») لا الصورة («عدسة مكبّرة»).
• صورة معقّدة — المخططات والرسوم التوضيحية والخرائط: alt قصير يعرّفها، مع وصف أطول أو جدول بيانات قريب يحمل التفاصيل.
• صور النص — يشترط 1.4.5 Images of Text (AA) استخدام النص الحقيقي بدلاً من صور النص حين تستطيع التقنية تحقيق العرض البصري نفسه؛ وتُستثنى الصور القابلة للتخصيص والحالات الجوهرية كالشعارات.
• alt مكرّر — إذا كان النص المجاور يقول الشيء نفسه فيمكن أن تكون الصورة زخرفية؛ تكرار التعليق يضاعف ما يسمعه مستخدم قارئ الشاشة.

تكبير النص وإعادة التدفق عند 320 CSS px وتباعد النص

1.4.4 Resize Text (AA): يمكن تكبير النص حتى 200 بالمئة دون تقنية مساعدة ودون فقدان محتوى أو وظيفة. اختبر بتكبير المتصفح إلى 200% وبحجم خط افتراضي أكبر، وابحث عن نص مقصوص وعناصر متداخلة وعناصر تحكم تخرج من الشاشة.

1.4.10 Reflow (AA): يعمل المحتوى دون تمرير في بُعدين عند عرض يعادل 320 CSS pixels (للمحتوى الذي يُمرَّر عمودياً) أو ارتفاع 256 CSS pixels (للمحتوى الذي يُمرَّر أفقياً). وتشير WCAG إلى أن 320 CSS pixels تعادل نافذة عرضها 1280 px عند تكبير 400%، وهذا هو الاختبار العملي: اضبط نافذة المتصفح على 1280 px، وكبّر إلى 400%، واقرأ الصفحة كاملة بالتمرير العمودي فقط. ويجوز أن تحتفظ الخرائط والمخططات والفيديو والألعاب والعروض التقديمية وجداول البيانات بالتمرير في بُعدين لتلك الأجزاء.

1.4.12 Text Spacing (AA): لا يُفقد محتوى أو وظيفة حين يضبط المستخدم ارتفاع السطر على 1.5 ضعف حجم الخط، والمسافة بعد الفقرات على ضعفين، وتباعد الأحرف على 0.12 ضعف، وتباعد الكلمات على 0.16 ضعف. طبّق التجاوز أدناه عبر Bookmarklet أو إضافة أنماط المستخدم وابحث عن تسميات مقطوعة ونص متداخل وأزرار انقطع نصها. وتتضمن WCAG استثناءً للغات والكتابات التي لا تستخدم إحدى هذه الخصائص — وهذا مهم للعربية، إذ يتعارض تباعد الأحرف مع الحروف المتصلة؛ فاتفق مع فريقك على طريقة تطبيقه.

/* WCAG 1.4.12 text-spacing test override */
* {
  line-height: 1.5 !important;
  letter-spacing: 0.12em !important;
  word-spacing: 0.16em !important;
}
p {
  margin-bottom: 2em !important;
}

حجم الهدف

يشترط 2.5.8 Target Size (Minimum) (AA)، الجديد في WCAG 2.2، أن تكون أهداف المؤشر (Pointer targets) بحجم 24 × 24 CSS pixels على الأقل، مع استثناءات. فالهدف الأصغر ينجح إذا كانت دائرة قطرها 24 CSS px متمركزة عليه لا تتقاطع مع هدف آخر أو مع دائرة هدف صغير آخر؛ وينجح أيضاً حين يوجد في الصفحة نفسها عنصر مكافئ يستوفي الحجم، أو حين يكون ضمن جملة، أو حين يحدد وكيل المستخدم حجمه دون تعديل من المؤلف، أو حين يكون عرضه جوهرياً أو مطلوباً قانونياً.

قِس في أدوات المطوّر (صندوق العنصر، بما في ذلك الحشو الذي هو جزء من مساحة النقر). الإخفاقات المعتادة: أيقونات الإغلاق «×» في نوافذ الحوار والرقائق، وأرقام ترقيم الصفحات المتلاصقة، ومربعات التحديد الصغيرة، وصفوف الأيقونات داخل خلايا الجداول. وتوصي إرشادات منصتي Apple وGoogle بأهداف لمس أكبر من هذا الحد الأدنى؛ فعند اختبار التطبيقات الأصلية استخدم إرشادات المنصة أيضاً.

الحركة والرسوم المتحركة وتفضيل تقليل الحركة

ثلاثة معايير مهمة. 2.2.2 Pause, Stop, Hide (A): المحتوى المتحرك أو الوامض أو المتمرّر الذي يبدأ تلقائياً ويستمر أكثر من خمس ثوانٍ ويُعرض بجوار محتوى آخر يحتاج إلى وسيلة لإيقافه مؤقتاً أو إيقافه أو إخفائه — وشرائح العرض الدوّارة وأشرطة الإعلانات المتحركة هي المشتبه المعتاد. 2.3.1 Three Flashes or Below Threshold (A): لا شيء يومض أكثر من ثلاث مرات في أي ثانية واحدة، ما لم يكن الوميض تحت عتبتي الوميض العام والأحمر. 2.3.3 Animation from Interactions (AAA): يمكن تعطيل الحركة الناتجة عن التفاعل ما لم تكن جوهرية.

وحتى حين يستهدف المشروع المستوى AA، فإن احترام إعداد «تقليل الحركة» في نظام التشغيل رخيص ومتوقَّع. تعرضه المتصفحات عبر ميزة الوسائط prefers-reduced-motion. فعّل تقليل الحركة في النظام (أو حاكِه في أدوات المطوّر) وتحقق من أن تأثير المنظور (Parallax) وانتقالات الصفحات بالتكبير والفيديو الخلفي التلقائي والانزلاقات الكبيرة أُزيلت أو استُبدلت بتلاشٍ بسيط.

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

الوضع الداكن والتباين العالي والألوان المفروضة

السمة الداكنة (Dark mode) عرض بصري ثانٍ، وكل فحوص التباين تنطبق عليها بشكل مستقل. عيوب الوضع الداكن الشائعة: ألوان العلامة التجارية التي تنجح على الأبيض وتُخفق على شبه الأسود، وشعارات PNG الشفافة وأيقونات بحدود داكنة تختفي، وحلقات تركيز صُمّمت لخلفية فاتحة، ومخططات تحتفظ بألوان السمة الفاتحة، وظلال تُستخدم حدّاً وحيداً لبطاقة أو حقل. بدّل السمة من إعداد النظام أو من محاكاة prefers-color-scheme في أدوات المطوّر وأعد جولة التباين.

واختبر كذلك مع وضع الألوان المفروضة أو التباين العالي (مثل سمات التباين في Windows). يستبدل المتصفح ألوان المؤلف، فقد تختفي المعلومات المحمولة بلون الخلفية أو صور الخلفية وحدها: مربعات تحديد مخصّصة مرسومة بالخلفيات، وأيقونات منفّذة كخلفيات CSS، وأنماط تركيز تعتمد على box-shadow وحده.

قائمة فحص: حالات اختبار إمكانية الوصول البصرية

القائمة أدناه بالإنجليزية لتُنسخ كما هي إلى أداة إدارة الاختبار، وهذه بنودها بالعربية:

• التباين — نص المتن والنص الثانوي والروابط والأزرار والحقول والتلميحات 4.5:1 على الأقل (والنص الكبير 3:1) (1.4.3)؛ والنص فوق الصور والتدرجات يُقاس عند أسوأ نقطة؛ وتُقاس حالات التمرير والتركيز والتحديد والزيارة والخطأ؛ وحدود الحقول والأيقونات وحالات مربعات التحديد وأزرار الاختيار ومؤشر التركيز 3:1 على الأقل (1.4.11)؛ وعناصر المخططات اللازمة للفهم 3:1 على الأقل مقابل ما يجاورها (1.4.11).
• اللون — بالتدرج الرمادي تبقى الأخطاء والروابط والحالات وسلاسل المخططات قابلة للتمييز (1.4.1).
• الصور — كل صورة مصنّفة: معلوماتية أو زخرفية أو وظيفية أو معقدة (1.1.1)؛ والصور الوظيفية تصف الإجراء، والزخرفية لها ⁦alt=""⁩؛ ولا صور نصوص إلا الشعارات (1.4.5).
• التكبير والتخطيط — عند تكبير 200% لا نص مقصوص أو متراكب وكل الوظائف متاحة (1.4.4)؛ وعند عرض 1280px بتكبير 400% (أي 320 CSS px) يكون التمرير عمودياً فقط، باستثناء المحتوى ثنائي الأبعاد (1.4.10)؛ ومع تجاوز تباعد النص لا شيء مقطوع أو متراكب (1.4.12).
• الأهداف والحركة — أهداف المؤشر 24×24 CSS px على الأقل أو تستوفي أحد الاستثناءات (2.5.8)؛ والمحتوى المتحرك تلقائياً أكثر من 5 ثوانٍ يمكن إيقافه مؤقتاً أو إيقافه أو إخفاؤه (2.2.2)؛ ولا وميض أكثر من 3 مرات في الثانية (2.3.1)؛ وإعداد تقليل الحركة يزيل الحركة غير الضرورية.
• السمات — تُعاد جولة التباين كاملة في السمة الداكنة؛ وفي وضع الألوان المفروضة أو التباين العالي تبقى عناصر التحكم والأيقونات والتركيز مرئية.

VISUAL A11Y CHECKLIST — <page / screen / build / theme>

Contrast
[ ] Body, secondary, link, button, input and hint text >= 4.5:1 (large text >= 3:1) (1.4.3)
[ ] Text over images/gradients measured at the worst point
[ ] Hover, focus, selected, visited and error states measured
[ ] Input borders, icons, checkbox/radio states, focus indicator >= 3:1 (1.4.11)
[ ] Chart elements needed for understanding >= 3:1 against neighbours (1.4.11)

Colour
[ ] In greyscale, errors, links, statuses and chart series are still distinguishable (1.4.1)

Images
[ ] Each image classified: informative / decorative / functional / complex (1.1.1)
[ ] Functional images describe the action; decorative have alt=""
[ ] No images of text except logos (1.4.5)

Zoom & layout
[ ] 200% zoom: no clipped or overlapping text, all functions available (1.4.4)
[ ] 1280px at 400% (= 320 CSS px): vertical scroll only, except 2-D content (1.4.10)
[ ] Text-spacing override: nothing truncated or overlapping (1.4.12)

Targets & motion
[ ] Pointer targets >= 24x24 CSS px or meet an exception (2.5.8)
[ ] Auto-moving content > 5 s can be paused/stopped/hidden (2.2.2)
[ ] No flashing more than 3 times per second (2.3.1)
[ ] Reduce-motion setting removes non-essential motion

Themes
[ ] Dark theme: full contrast pass repeated
[ ] Forced colours/high contrast: controls, icons and focus still visible

جرّبها: مولّد قوائم تحقق QA بالذكاء الاصطناعي

عيوب نموذجية مكتوبة كعناوين تقارير أخطاء

اذكر الألوان المقيسة والنسبة في التقرير، وأرفق لقطة شاشة، وسمِّ المعيار. عيب تباين يقول «#9E9E9E على #FFFFFF = 2.68:1، والمطلوب 4.5:1» يُصلَح دون جدال.

• «تسجيل الدخول: نص التلميح #999999 على الأبيض نسبته 2.85:1، أقل من 4.5:1 (1.4.3)»
• «نموذج الملف الشخصي: حدود الحقول #CCCCCC على الأبيض نسبتها 1.61:1، والحقول غير قابلة للتمييز (1.4.11)»
• «جدول الطلبات: حالتا ‹فشل› و‹مدفوع› تظهران بنقطة حمراء/خضراء فقط (1.4.1)»
• «زر البحث في الترويسة: alt الصورة ‹أيقونة عدسة› بدلاً من الإجراء ‹بحث› (1.1.1)»
• «صفحة الأسعار عند 1280px وتكبير 400%: بطاقات المقارنة تتطلب تمريراً أفقياً (1.4.10)»
• «أزرار إغلاق الرقائق بحجم 16×16 CSS px ومتلاصقة (2.5.8)»
• «الشريط الدوّار في الرئيسية ينتقل كل 4 ثوانٍ دون زر إيقاف (2.2.2)»
• «السمة الداكنة: نص الزر الأساسي 3.1:1 على أزرق العلامة (1.4.3)»

جرّبها: مولّد عناوين الأخطاء بالذكاء الاصطناعي

الأسئلة الشائعة

المراجع

• Web Content Accessibility Guidelines (WCAG) 2.2W3C · 2024توصية W3C التي تحدد معايير النجاح القابلة للاختبار لإتاحة محتوى الويب، مرتّبةً تحت أربعة مبادئ وثلاثة مستويات مطابقة (A وAA وAAA).
• Understanding WCAG 2.2W3C Web Accessibility Initiative (WAI)الشرح التوضيحي لكل إرشاد ومعيار نجاح في WCAG 2.2: الغرض، ومن يستفيد، والأمثلة والتقنيات (غير إلزامي).
• How to Meet WCAG (Quick Reference)W3C Web Accessibility Initiative (WAI)قائمة قابلة للتصفية بكل معايير نجاح WCAG 2.2 مع التقنيات الكافية وحالات الإخفاق الشائعة.
• Easy Checks – A First Review of Web AccessibilityW3C Web Accessibility Initiative (WAI)فحوص أولية بسيطة يستطيع أي شخص إجراؤها — عنوان الصفحة والبدائل النصية والعناوين والتباين وتكبير النص والوصول بلوحة المفاتيح — قبل التقييم الكامل.
• Accessibility — MDNMDN Web Docs (Mozilla)أدلة عملية لبناء صفحات ويب ميسّرة وفحصها: HTML الدلالي وARIA ودعم لوحة المفاتيح والاختبار.
• Accessibility — Human Interface GuidelinesAppleإرشادات Apple لتصميم إمكانية الوصول في iOS وغيره: VoiceOver والنص الديناميكي والتباين وأهداف اللمس والحركة.
• Test your app's accessibilityAndroid Developers (Google)كيف تُختبر إمكانية الوصول في تطبيق Android يدوياً باستخدام TalkBack وغيره، وآلياً بأدوات الاختبار في المنصة.