WCAG 1.4.12: تباعد النص

ماذا تعني هذه القاعدة

تنتمي قاعدة WCAG 1.4.12 الخاصة بتباعد النص إلى المبدأ التوجيهي 1.4 (قابلية التمييز) وتستهدف مشكلة محددة جدًا: كثير من الأشخاص ذوي صعوبات القراءة أو ضعف البصر أو الإعاقات الإدراكية يحتاجون إلى تجاوز قيم التباعد الافتراضية للنص في صفحة الويب حتى يصبح المحتوى مقروءًا بالنسبة لهم. إذا تعطّل تخطيط الموقع — مثلًا يتم اقتطاع النص، أو تتداخل الأزرار، أو تختفي تسميات الحقول، أو يصبح المحتوى غير قابل للوصول — عند زيادة التباعد، فإن الموقع يفشل في استيفاء هذا المعيار.

يعرّف هذا المعيار أربع خصائص للتباعد يجب أن تبقى وظيفية عند ضبطها على القيم الدنيا التالية في الوقت نفسه:

• ارتفاع السطر (تباعد الأسطر): لا يقل عن 1.5 مرة من حجم خط العنصر.
• تباعد الحروف (tracking): لا يقل عن 0.12 مرة من حجم خط العنصر.
• تباعد الكلمات: لا يقل عن 0.16 مرة من حجم خط العنصر.
• التباعد بعد الفقرات: لا يقل عن 2 مرة من حجم خط العنصر.

تُعتبر الصفحة ناجحة في هذا المعيار إذا كان المستخدمون، بعد تطبيق جميع هذه التعديلات الأربعة، لا يزالون قادرين على قراءة كل النصوص، وتشغيل جميع العناصر التفاعلية، والوصول إلى كل محتوى الصفحة دون تمرير أفقي عند عرض بعرض 320 بكسل CSS، ودون اقتطاع أو بتر للنص، ودون تداخل للمحتوى إلى درجة تجعله غير مقروء أو غير قابل للاستخدام.

وتُعتبر الصفحة فاشلة إذا أدى تطبيق هذه التعديلات إلى أي مما يلي: يتم قطع النص بواسطة حاوية ذات ارتفاع ثابت وخصيصة overflow: hidden؛ تختفي تسميات العناصر التفاعلية أو نص الأزرار؛ تتداخل القوائم المنسدلة أو التلميحات (tooltips) مع محتوى الصفحة بطريقة تجعلها غير قابلة للاستخدام؛ أو يصبح أي محتوى غير قابل للوصول بشكل دائم.

من المهم أن نلاحظ أن هذا المعيار لا يتطلب منك ضبط قيم التباعد هذه بنفسك. بل يتطلب فقط أن لا يتعطل التخطيط لديك عندما يقوم المستخدم (أو تقنياته المساندة، أو إضافة المتصفح، أو ورقة الأنماط الخاصة بالمستخدم) بتطبيق هذه التعديلات. قيم التباعد هنا هي عتبات للاختبار، وليست متطلبات تصميمية.

هناك استثناء صريح واحد: المكونات التي يكون فيها العرض البصري المحدد أساسيًا للمعلومة المنقولة — مثل الشعار (logotype)، أو النوتة الموسيقية المعروضة بصيغة SVG، أو صورة CAPTCHA — تكون معفاة. ومع ذلك، فإن هذا الاستثناء ضيق النطاق ولا ينبغي استخدامه كذريعة عامة لاستثناء قوائم التنقل أو مكونات البطاقات.

ينطبق هذا المعيار على كل محتوى نصي يتم عرضه في المتصفح باستخدام CSS، بما في ذلك العناوين، والفقرات، والتسميات، ونصوص الأزرار، والنصوص النائبة (placeholder)، وعناصر القوائم، وخلايا الجداول، وروابط التنقل. ولا ينطبق على النص المعروض داخل الصور أو عناصر canvas، لأن هذه العناصر لا تتأثر بتعديلات التباعد عبر CSS.

لماذا يهم

يؤثر تباعد النص مباشرة في أشخاص عبر طيف واسع من الإعاقات وأنماط القراءة. وفقًا لمنظمة الصحة العالمية، يعاني حوالي 2.2 مليار شخص حول العالم من شكل من أشكال ضعف البصر أو العمى، وكثير منهم يستخدمون تكبير المتصفح أو أوراق الأنماط المخصصة لجعل المحتوى مقروءًا. وبالإضافة إلى ضعف البصر، يُقدّر أن 15–20% من سكان العالم لديهم عسر قراءة (dyslexia)، وهي حالة تُعد زيادة تباعد الحروف والكلمات وارتفاع السطر من التدخلات المثبتة لتحسين قابلية القراءة فيها — وهو ما تدعمه أبحاث، بما في ذلك دراسات منشورة في مجلة Annals of Dyslexia.

بالنسبة للمستخدمين ذوي الإعاقات الإدراكية مثل اضطراب فرط الحركة وتشتت الانتباه (ADHD) أو صعوبات المعالجة، يزيد تباعد النص الضيق من العبء الإدراكي للقراءة من خلال جعل تتبع الأسطر وتمييز الكلمات الفردية أكثر صعوبة. غالبًا ما يقوم هؤلاء المستخدمون بتثبيت إضافات للمتصفح مثل Readability Bookmarklet أو Stylus، أو استخدام إعدادات إمكانية الوصول على مستوى المنصة التي تطبق تباعدًا مخصصًا على جميع المواقع التي يزورونها.

فكّر في سيناريو ملموس: طالبة جامعية لديها عسر قراءة تزور منصة تجارة إلكترونية تركية للتحقق من سياسة إرجاع منتج قبل امتحان. تستخدم إضافة متصفح تضبط ارتفاع السطر إلى 1.7 وتباعد الحروف إلى 0.14em على مستوى النظام. في صفحة تفاصيل المنتج، يوجد نص سياسة الإرجاع داخل عنصر <div> بارتفاع ثابت مُنسّق باستخدام height: 120px; overflow: hidden;. مع تفعيل تباعدها المخصص، لا تظهر سوى السطرين الأولين ولا توجد آلية لإظهار الباقي. لا تستطيع إكمال مهمتها وتفقد ثقتها في المنصة. هذا بالضبط هو الفشل الذي صُممت قاعدة WCAG 1.4.12 لمنعه.

إلى جانب الوصول للأشخاص ذوي الإعاقة، هناك فوائد ثانوية. فالتخطيطات المرنة المقاومة لتغيّر التباعد تميل إلى أن تكون أكثر متانة عبر الأسواق الدولية — فالنص التركي، على سبيل المثال، غالبًا ما يحتوي على صيغ كلمات أطول بسبب البنية اللصقية (agglutinative morphology)، والتخطيطات التي لا يمكنها استيعاب تغيّر التباعد تميل أيضًا إلى التعطل مع السلاسل النصية الأطول. كما أن التخطيطات القابلة للوصول تحسّن تحسين محركات البحث (SEO) بشكل غير مباشر: فالمحتوى المقروء والقابل للوصول يميل إلى معدلات ارتداد أقل وإشارات تفاعل أفضل، وهي عوامل تأخذها محركات البحث في الاعتبار عند ترتيب النتائج.

قواعد axe-core ذات الصلة

تتطلب قاعدة WCAG 1.4.12 اختبارًا يدويًا ولا يمكن التحقق منها بالكامل بواسطة الأدوات الآلية وحدها. يعود ذلك إلى أن المحركات الآلية لا يمكنها التنبؤ بكيفية تصرف التخطيط عند تطبيق أنماط المستخدم دون فعليًا تطبيق هذه الأنماط وقياس النتيجة المعروضة — وهي عملية تتطلب فحصًا بصريًا أو مقارنة عرضية باستخدام محرك عرض بدون واجهة (headless). لا يتضمن محرك axe-core قاعدة آلية مخصصة لـ 1.4.12 لهذا السبب.

• الاختبار اليدوي باستخدام Text Spacing Bookmarklet: نهج الاختبار الموصى به هو Text Spacing Bookmarklet الذي أنشأه Steve Faulkner (ويتم الآن صيانته من قبل مجتمع إمكانية الوصول). يقوم هذا الـ bookmarklet بحقن ورقة أنماط في الصفحة الحالية تضبط الخصائص الأربع للتباعد على قيم العتبة الدنيا في الوقت نفسه. بعد ذلك يقوم المختبِر بفحص بصري (أو باستخدام قارئ شاشة) للتحقق مما إذا كان أي محتوى قد تم اقتطاعه أو تداخله أو أصبح غير قابل للوصول. يُعد نهج الـ bookmarklet هو المعيار المشار إليه في وثيقة الفهم (Understanding) الخاصة بـ W3C لقاعدة 1.4.12.
• لماذا لا تكفي الأتمتة: تقوم أدوات الفحص الآلي مثل axe-core بتحليل DOM والأنماط المحسوبة كما هي موجودة وقت الفحص. لا تحاكي هذه الأدوات تجاوزات أنماط المستخدم أو تعيد عرض الصفحة لاكتشاف تجاوز التخطيط أو الاقتطاع الناتج عن هذه التعديلات. فحاوية تحتوي على overflow: hidden وارتفاع ثابت ستمر في الفحص الآلي لأن هذا، بمعزل عن غيره، ليس خطأ في إمكانية الوصول — ولا يصبح كذلك إلا عند زيادة التباعد. لا يمكن للمختبِر تأكيد الفشل إلا من خلال تطبيق التعديل وملاحظة النتيجة.
• فحوصات آلية تكميلية: رغم عدم وجود قاعدة في axe تطابق 1.4.12 مباشرة، ينبغي على المراجعين أيضًا ملاحظة أن قاعدة scrollable-region-focusable وقواعد تباين الألوان في axe يمكن أن تكشف عن مشكلات ذات صلة تسهم في تجربة تباعد نص سيئة. بالإضافة إلى ذلك، قد تشير مراجعة إمكانية الوصول في Lighthouse إلى حاويات ذات حجم ثابت في سياقات معينة، وإن لم يكن ذلك تحديدًا من أجل الامتثال لتباعد النص.

كيفية الاختبار

1. تثبيت Text Spacing Bookmarklet. انتقل إلى صفحة Steve Faulkner الخاصة بـ Text Spacing Bookmarklet (يمكن الوصول إليها عبر وثيقة الفهم الخاصة بـ W3C أو من خلال بحث ويب عن "text spacing bookmarklet WCAG"). اسحب الـ bookmarklet إلى شريط العلامات في متصفحك. بدلاً من ذلك، أنشئ علامة يدويًا والصق كود JavaScript الخاص بالـ bookmarklet كعنوان URL.
2. افتح الصفحة المراد اختبارها في متصفحك عند مستوى التكبير الافتراضي (100%). انتقل إلى الصفحة أو المكوّن الذي تريد تقييمه — مثل صفحة قائمة المنتجات، أو نموذج الدفع، أو قائمة التنقل.
3. فعّل الـ bookmarklet. انقر على الـ bookmarklet. سيؤدي ذلك إلى حقن CSS يضبط line-height: 1.5 !important وletter-spacing: 0.12em !important وword-spacing: 0.16em !important وهامش أسفل عناصر p إلى 2em !important في جميع أنحاء الصفحة.
4. افحص الصفحة بالكامل بصريًا. مرّر عبر جميع مناطق المحتوى. ابحث عن: نص مقطوع في أسفل الحاوية؛ تسميات الأزرار أو نصوص الروابط التي اختفت أو أصبحت مخفية جزئيًا؛ قوائم تنقل أو قوائم منسدلة تتداخل فيها العناصر؛ حقول نماذج يتم فيها اقتطاع النص النائب أو نص التسمية؛ وحوارات منبثقة (modals) أو تلميحات (tooltips) يفيض فيها المحتوى خارج حدود الحاوية.
5. تفاعل مع العناصر التفاعلية. تنقّل باستخدام مفتاح Tab عبر جميع العناصر القابلة للتركيز، وفعّل القوائم المنسدلة، وافتح الحوارات المنبثقة، وأرسل النماذج. تأكد من أن جميع عناصر التحكم التفاعلية لا تزال قابلة للتشغيل وأن تسمياتها المرئية قابلة للقراءة بالكامل مع التباعد المطبق.
6. اختبر باستخدام قارئ شاشة للتحقق من فقدان الوظائف. مع بقاء الـ bookmarklet مفعّلًا، استخدم NVDA مع Firefox أو JAWS مع Chrome للتنقل في الصفحة حسب العناوين والمعالم والعناصر التفاعلية. تأكد من أن ترتيب القراءة والمحتوى المُعلن يطابق ما يراه المستخدم المبصر. استخدم VoiceOver على Safari في macOS أو iOS لتغطية منصات Apple.
7. اختبر عند عرض بعرض 320px. غيّر حجم نافذة المتصفح إلى عرض 320 بكسل CSS (أو استخدم وضع العرض المتجاوب في أدوات المطور في المتصفح). أعد تفعيل الـ bookmarklet. تأكد من أن المحتوى لا يزال قابلًا للوصول دون تمرير أفقي وأن النص غير مقطوع عند الجمع بين عرض صغير وزيادة التباعد.
8. وثّق حالات الفشل. لكل حالة فشل، سجّل: نوع العنصر، وفئة CSS أو المعرّف (ID) الخاص به، وخصيصة التباعد المحددة التي تسبب الفشل، ولقطة شاشة قبل وبعد تفعيل الـ bookmarklet.

كيفية الإصلاح

حاوية ذات ارتفاع ثابت تقطع النص — غير صحيح

<!-- Failure: fixed height with overflow:hidden clips text when line-height increases -->
<div class='product-description' style='height: 80px; overflow: hidden;'>
  <p>Bu ürün doğal malzemelerden üretilmiştir ve 2 yıl garanti kapsamındadır.</p>
</div>

حاوية ذات ارتفاع ثابت تقطع النص — صحيح

<!-- Fix: use min-height instead of height, and allow overflow to be visible or auto -->
<div class='product-description' style='min-height: 80px; overflow: visible;'>
  <p>Bu ürün doğal malzemelerden üretilmiştir ve 2 yıl garanti kapsamındadır.</p>
</div>
<!-- If you need to truncate for design reasons, use a "Read more" button pattern
     that expands the content rather than hiding it with overflow:hidden -->

تسمية زر مقطوعة بسبب ارتفاع زر ثابت — غير صحيح

<!-- Failure: fixed height on button causes label text to be cut off
     when letter-spacing and line-height are increased -->
<button style='height: 36px; overflow: hidden; white-space: nowrap;'>
  Sepete Ekle
</button>

تسمية زر مقطوعة بسبب ارتفاع زر ثابت — صحيح

<!-- Fix: use min-height and padding instead of fixed height.
     padding ensures the button grows with its content. -->
<button style='min-height: 36px; padding: 8px 16px;'>
  Sepete Ekle
</button>

تلميح أو قائمة منسدلة يفيض محتواها دون تمرير — غير صحيح

<!-- Failure: tooltip has a max-height and overflow:hidden,
     causing content to be cut off when spacing is increased -->
<div role='tooltip' id='info-tip' style='max-height: 60px; overflow: hidden;'>
  Bu alan zorunludur. Lütfen geçerli bir e-posta adresi giriniz.
</div>

تلميح أو قائمة منسدلة يفيض محتواها دون تمرير — صحيح

<!-- Fix: remove the max-height restriction or use overflow:auto
     so content remains accessible when spacing is overridden -->
<div role='tooltip' id='info-tip' style='max-width: 280px; overflow: auto;'>
  Bu alan zorunludur. Lütfen geçerli bir e-posta adresi giriniz.
</div>

تباعد الفقرات يفسد تخطيط البطاقة — غير صحيح

<!-- Failure: card uses absolute positioning and a fixed container height.
     When paragraph margin-bottom is set to 2em by the user,
     text overflows and overlaps the card footer. -->
<div class='card' style='position: relative; height: 200px; overflow: hidden;'>
  <p>Ürün açıklaması burada yer alır ve birden fazla satır içerebilir.</p>
  <div class='card-footer' style='position: absolute; bottom: 0;'>
    <a href='/urun/detay'>Detayları Gör</a>
  </div>
</div>

تباعد الفقرات يفسد تخطيط البطاقة — صحيح

<!-- Fix: use flexbox or grid with a natural document flow.
     The footer follows the content instead of being absolutely positioned.
     min-height allows the card to grow with its content. -->
<div class='card' style='display: flex; flex-direction: column; min-height: 200px;'>
  <p style='flex: 1;'>Ürün açıklaması burada yer alır ve birden fazla satır içerebilir.</p>
  <div class='card-footer'>
    <a href='/urun/detay'>Detayları Gör</a>
  </div>
</div>

الأخطاء الشائعة

• استخدام height بدلًا من min-height في حاويات النص. سيؤدي ارتفاع height ثابت على أي عنصر يحتوي على نص إلى اقتطاع النص بمجرد أن يزيد المستخدم ارتفاع السطر أو تباعد الحروف. استبدل جميع الارتفاعات الثابتة في الحاويات التي تحتوي على نص بـ min-height حتى تتمكن الحاوية من التمدد.
• تعيين overflow: hidden على الحاويات التي تحتوي على نصوص الفقرات. هذا هو السبب الأكثر شيوعًا لفشل 1.4.12. فـ overflow المخفي يقتطع النص الذي يتمدّد عموديًا عند زيادة التباعد. استخدم overflow: visible أو overflow: auto حسب سياق التصميم.
• استخدام white-space: nowrap على تسميات الأزرار أو الروابط دون مرونة كافية في الحاوية. عندما يزيد تباعد الحروف، قد يفيض النص الذي لا يلتف (nowrap) خارج الحاوية أو يتم اقتطاعه، خاصة في عناصر التنقل ذات العرض الثابت.
• الوضع المطلق (absolute positioning) لعناصر التذييل أو عناصر الإجراءات داخل بطاقة ذات ارتفاع ثابت. عندما ينمو محتوى البطاقة بسبب تعديلات التباعد، تتداخل العناصر الموضوعة بشكل مطلق في أسفل البطاقة مع النص. استخدم تخطيط flexbox بعمود بدلًا من ذلك.
• تطبيق max-height مع overflow: hidden على الأقسام القابلة للطي وهي في حالة التوسّع. الأكورديونات المتحركة التي تتمدّد إلى قيمة max-height محسوبة بناءً على قياسات بالبكسل ستقتطع النص عند هذا الحد من البكسل عندما يتم تجاوز التباعد، حتى وهي مفتوحة بالكامل.
• استخدام خاصية CSS line-clamp (webkit-line-clamp) دون آلية مرئية لتوسيع المحتوى بالكامل. يُعد حصر النص في عدد ثابت من الأسطر مقبولًا فقط إذا كان هناك عنصر تحكم واضح التسمية وقابل للوصول عبر لوحة المفاتيح لكشف المحتوى الكامل. أما الحصر دون أي آلية للتوسيع فيفشل في استيفاء 1.4.12.
• الاعتماد على JavaScript لضبط ارتفاعات العناصر ديناميكيًا بوحدات البكسل. السكربتات التي تقيس ارتفاعات العناصر ثم تضبط هذه القيم بالبكسل كأنماط مضمنة ستقفل الحاوية على حجم يتجاهل تعديلات تباعد المستخدم. استخدم القياس الذاتي (intrinsic sizing) ودع CSS يتولى التخطيط.
• افتراض أن الفحوصات الآلية لإمكانية الوصول ستكشف جميع حالات فشل 1.4.12. الفرق التي تعتمد حصريًا على axe أو Lighthouse دون تشغيل Text Spacing Bookmarklet ستفوتها جميع حالات الفشل المتعلقة بالتخطيط والتباعد. الاختبار اليدوي باستخدام الـ bookmarklet إلزامي لهذا المعيار.
• عدم اختبار قوائم التنقل والـ mega-menus باستخدام الـ bookmarklet. غالبًا ما تُبنى مكونات التنقل بارتفاعات ثابتة بالبكسل وoverflow مخفي لإنتاج مظهر بصري مصقول. وهي أيضًا من أكثر المكونات فشلًا في 1.4.12 لأن زيادة التباعد تؤدي إلى التفاف عناصر القائمة واقتطاعها.
• التعامل مع قيم التباعد كمتطلبات تصميمية بدلًا من كونها عتبات اختبار. بعض الفرق تستجيب لقاعدة 1.4.12 بتحديث أنماطها الافتراضية لتطابق قيم العتبة، وهو أمر غير ضروري وقد يتعارض مع نية المصمم. يتطلب المعيار فقط ألا يتعطل التخطيط عند تطبيق هذه القيم — وليس أن تكون هي القيم الافتراضية.

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

تُعد قاعدة WCAG 1.4.12 الخاصة بتباعد النص ذات صلة مباشرة بالإطار القانوني الناشئ لإمكانية الوصول في تركيا. أحدث تطور مهم هو التعميم الرئاسي 2025/10، المنشور في الجريدة الرسمية رقم 32933 بتاريخ 21 يونيو 2025. يضع هذا التعميم التزامات ملزمة لمجموعة واسعة من المنظمات لضمان إمكانية الوصول الرقمي عبر حضورها على الويب وتطبيقاتها المحمولة.

يغطي التعميم مجموعة واسعة من أنواع الكيانات. يُطلب من المؤسسات والهيئات العامة على جميع مستويات الحكومة الامتثال. وتشمل الكيانات في القطاع الخاص الواقعة ضمن النطاق منصات التجارة الإلكترونية، والبنوك والمؤسسات المالية، والمستشفيات ومقدمي الرعاية الصحية، وشركات الاتصالات التي لديها 200,000 مشترك أو أكثر، ووكالات السفر، وشركات النقل الخاصة، والمدارس الخاصة المرخّصة من قبل وزارة التربية الوطنية (MoNE). يُطلب من هذه المنظمات تحقيق مستوى الامتثال AA مع WCAG، والذي يشمل 1.4.12، كجزء من التزاماتها بموجب التعميم.

يُعد الامتثال على مستوى AA أيضًا شرطًا مسبقًا للحصول على شعار إمكانية الوصول (Erişilebilirlik Logosu) الصادر عن وزارة الأسرة والخدمات الاجتماعية (Aile ve Sosyal Hizmetler Bakanlığı). يشير هذا الشعار للمستخدمين، وخاصة ذوي الإعاقة، إلى أن المنتج الرقمي قد خضع لتدقيق ويلبي معيار إمكانية الوصول المطلوب. بالنسبة للمنظمات التي تخدم مجتمع الأشخاص ذوي الإعاقة في تركيا — والمقدّر بعدة ملايين من الأشخاص، بما في ذلك ذوو الإعاقات البصرية والإدراكية وصعوبات القراءة — يحمل الشعار وزنًا اعتباريًا وتنظيميًا.

من الناحية العملية، فإن منصة تجارة إلكترونية تركية تستخدم حاويات لوصف المنتجات ذات ارتفاع ثابت مع overflow: hidden، أو بوابة حكومية تقطع قائمة التنقل عندما يطبق المستخدم تعديلات التباعد عبر إضافة متصفح أو إعدادات إمكانية الوصول في نظام التشغيل، لا تفشل فقط في خدمة مستخدميها — بل قد تكون أيضًا غير ممتثلة للالتزامات المنصوص عليها في التعميم 2025/10. تُعد حالات فشل تباعد النص ذات صلة خاصة بالمستخدمين الأتراك الذين لديهم عسر قراءة أو ضعف بصر ويعتمدون على أدوات تباعد مخصصة، وبالمستخدمين الذين يصلون إلى الخدمات الحكومية أو التجارية عبر الأجهزة المحمولة حيث يمكن أن تؤدي إعدادات حجم النص في نظام التشغيل أيضًا إلى عدم استقرار في التخطيط مشابه لتعديلات التباعد.

ينبغي على المنظمات التي تسعى للحصول على Erişilebilirlik Logosu أن تدرج تدقيقًا يدويًا لتباعد النص باستخدام Text Spacing Bookmarklet كخطوة مطلوبة في عملية تدقيق إمكانية الوصول الخاصة بها، إلى جانب الفحص الآلي واختبار قارئ الشاشة. إن معالجة حالات الفشل في 1.4.12 — بشكل أساسي من خلال استبدال الارتفاعات الثابتة بـ min-height، وإزالة overflow: hidden غير الضروري من حاويات النص، واعتماد تقنيات تخطيط CSS مرنة — يمكن تحقيقها عمومًا دون تغييرات تصميمية كبيرة وتمثل تحسينًا عالي القيمة ومنخفض التكلفة لإمكانية الوصول في أي خدمة رقمية تركية.