WCAG 1.4.5: صور النص

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

تنص WCAG 1.4.5 — صور النص (المستوى AA) على أنه إذا كان من الممكن تحقيق نفس العرض البصري باستخدام نص حقيقي، فيجب عليك استخدام نص حقيقي بدلاً من صورة تحتوي على نص. إن صورة النص هي أي صورة تكون فيها حروف النص هي المحتوى الأساسي الذي يتم نقله — على سبيل المثال، ملف JPEG لعنوان، أو لافتة PNG تحتوي على شعار قصير، أو شعار GIF يتهجى اسم علامة تجارية بخط مزخرف.

التمييز بين النجاح والفشل مباشر: إذا كان من الممكن نقل المعلومات عن طريق ترميز حروف فعلية في HTML وتنسيقها باستخدام CSS لتحقيق نفس المظهر، فإن استخدام صورة بدلاً من ذلك يعد فشلاً. لا تتعلق القاعدة بالصور الزخرفية أو الصور الفوتوغرافية التي تحتوي على نص في المشهد بالصدفة (مثل لافتة شارع في صورة). إنها تستهدف الصور التي يكون فيها النص نفسه هو المحتوى المقصود.

تعرّف WCAG استثناءين رسميين حيث يُسمح بصور النص:

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

من المهم ملاحظة ما لا يتطلبه هذا المعيار: فهو لا يحظر جميع الصور التي تحتوي على نص. فصورة فوتوغرافية لوثيقة تاريخية، أو لقطة شاشة تُستخدم كدليل، أو صورة مخطط تكون فيها تسميات المحاور جزءاً من تصور البيانات ليست الهدف الأساسي لهذه القاعدة، رغم أن النص البديل (WCAG 1.1.1) يجب أن يصف محتواها. يتركز الاهتمام على الحالات التي يختار فيها المصمم عرض نص منسق كصورة نقطية أو متجهة لأسباب جمالية بحتة بينما يمكن لـ CSS تحقيق النتيجة نفسها.

تشمل عناصر HTML الأكثر شيوعاً المتورطة في حالات الفشل وسمات <img> المستخدمة للعناوين، واللافتات، وأزرار الدعوة إلى الإجراء، وتسميات التنقل، والاقتباسات البارزة من الشهادات، والنص الترويجي. كما تُعد ملفات SVG التي تدمج النص كمسارات (بدلاً من عناصر <text>) مصدر قلق أيضاً، لأن هذه الحروف لا يمكن للمتصفح تحديدها أو تغيير حجمها أو إعادة تدفقها.

لماذا يهم ذلك

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

يعتمد المستخدمون ذوو ضعف البصر عادةً على تكبير المتصفح، أو تكبير النص على مستوى نظام التشغيل، أو برامج التكبير المخصصة. يتكّبر النص الحقيقي بوضوح عند أي مستوى تكبير؛ بينما تصبح صورة النص ضبابية ومحببة، مما يجعلها غير مقروءة عند التكبير العالي. يعاني حوالي 2.2 مليار شخص حول العالم من شكل من أشكال ضعف البصر، وكثير منهم يستخدمون التكبير كاستراتيجية أساسية للتكيف بدلاً من قارئ الشاشة.

يستخدم المستخدمون الذين لديهم عسر القراءة أو إعاقات قراءة أخرى كثيراً إضافات المتصفح أو تقنيات مساعدة لتجاوز الخطوط، وزيادة تباعد الحروف، والانتقال إلى مخططات ألوان عالية التباين. لا يعمل أي من هذه التخصيصات على صور النص — فالبكسلات غير قابلة للتغيير. لا يمكن للمستخدم الذي يحتاج إلى خط OpenDyslexic أو خط سانس سيريف واسع التباعد تطبيقه على عنوان معروض كملف PNG.

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

فكر في سيناريو ملموس: موقع تجارة إلكترونية تركي يعرض عناوين حملاته الترويجية كصور JPEG للحفاظ على خط العرض المخصص المستخدم في دليل أسلوب العلامة التجارية. يقوم مستخدم ذو ضعف بصر بتكبير متصفحه إلى 200%. تتكّبر صور المنتجات بشكل مقبول، لكن عنوان الحملة — وهو صورة — يتحول إلى لطخة ضبابية من البكسلات. لا يستطيع المستخدم قراءة العرض ويفوته التخفيض. لو تم تقديم الخط نفسه عبر @font-face وتطبيقه على عنصر <h2> حقيقي، لبقي النص حاداً عند أي مستوى تكبير، لأن عرض الخطوط المتجهية يتكّبر بلا حدود.

إضافة إلى إمكانية الوصول، فإن استخدام النص الحقيقي له فوائد ملموسة في تحسين محركات البحث (SEO). تقوم عناكب محركات البحث بفهرسة عقد النص مباشرة؛ ولا يمكنها استخراج محتوى النص من الصور بشكل موثوق دون OCR. العنوان المضمّن في ملف PNG غير مرئي لخوارزمية ترتيب Google. يمكن أن يؤدي التحول إلى نص حقيقي إلى تحسين فهرسة الكلمات المفتاحية وترتيب الصفحة لنفس المحتوى.

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

تتطلب WCAG 1.4.5 اختباراً يدوياً. لا توجد قاعدة axe-core آلية واحدة يمكنها اكتشاف صور النص بشكل موثوق، للأسباب الموضحة أدناه.

• يتطلب اختباراً يدوياً — لا توجد قاعدة آلية مخصصة: يمكن للأدوات الآلية اكتشاف وجود عنصر <img> وأن لديه سمة alt، لكنها لا تستطيع تحديد ما إذا كان المحتوى البصري لتلك الصورة عبارة عن نص معروض بشكل أساسي. سيتطلب ذلك التعرف على الصور / OCR لكل صورة في الصفحة، وهو أمر مكلف حسابياً ويعتمد على السياق. لا يمكن لأداة تفحص صفحة أن تميز بين صورة فوتوغرافية تحتوي بالصدفة على لافتة بكلمات وبين صورة عنوان تم تصميمها عمداً. يتطلب الأمر حكماً بشرياً لتقييم ما إذا كانت صورة معينة موجودة لغرض عرض نص منسق كان يمكن بدلاً من ذلك ترميزه كنص HTML حقيقي مع تنسيق CSS.
• إشارة جزئية من قواعد تباين الألوان: لن تعمل قواعد axe-core مثل color-contrast على النص المضمّن داخل الصور، لأنها تعمل على عقد نص DOM وقيم ألوان CSS المحسوبة. إذا كانت صورة النص ذات تباين غير كافٍ، فسيتجاهل فحص التباين الآلي ذلك بصمت. هذا يعني أن صور النص قد تفشل في كل من 1.4.5 و1.4.3 (الحد الأدنى للتباين) دون أي إشارة آلية — وهو سبب قوي لإجراء تدقيقات يدوية شاملة.
• نص SVG كمسارات: عندما يصدر SVG النص كمسارات مخططة (عناصر <path>) بدلاً من عناصر <text>، لا تملك axe-core طريقة لمعرفة أن هذه المسارات تشكل كلمات. يلزم الفحص اليدوي لكود مصدر SVG لتحديد ما إذا تم تحويل النص إلى مسارات وما إذا كان يجب أن يكون بدلاً من ذلك عنصراً حقيقياً <text> مع تطبيق خط ويب.

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

1. تشغيل فحص آلي كنقطة انطلاق. استخدم axe DevTools (إضافة متصفح) أو Lighthouse في أدوات مطوري Chrome لتحديد أي مشكلات تم الإبلاغ عنها في الصفحة. رغم أن أياً من الأداتين لا يحتوي على قاعدة مخصصة لـ 1.4.5، إلا أن مخرجات الفحص قد تُظهر مشكلات ذات صلة مثل غياب نص alt على الصور أو فشل تباين الألوان على عقد النص. دوّن أي صور تم الإبلاغ عنها — فهذه تصبح مرشحة للمراجعة اليدوية.
2. فحص بصري لجميع الصور في الصفحة. افتح الصفحة في متصفح وانظر بشكل منهجي إلى كل عنصر <img>، وكل SVG مضمن، وكل صورة خلفية CSS، وكل عنصر canvas. اسأل عن كل واحد منها: هل الغرض الأساسي من هذه الصورة هو عرض نص؟ إذا كانت الإجابة نعم، انتقل إلى الخطوة التالية.
3. التحقق مما إذا كان يمكن لـ CSS تحقيق النتيجة نفسها. بالنسبة لأي صورة تم تحديدها في الخطوة 2، اسأل: هل يمكن لخط ويب (@font-face) مع خصائص CSS (اللون، ظل النص، تباعد الحروف، الخلفية المتدرجة) إنتاج نتيجة بصرية مكافئة؟ إذا كانت الإجابة نعم، فإن صورة النص تعد فشلاً ما لم ينطبق استثناء الشعار النصي.
4. التحقق من استثناءات الشعار النصي. إذا ادعى موقع ما استثناء الشعار النصي، فتحقق من أن الصورة هي بالفعل شعار علامة تجارية يكون تصميم أشكال الحروف فيه غير قابل للفصل عن هوية العلامة التجارية، وليس مجرد عنوان مكتوب بخط العلامة التجارية.
5. الاختبار باستخدام تكبير المتصفح. قم بتكبير المتصفح إلى 200% و400% (باستخدام Ctrl/Cmd + أو إعدادات المتصفح). راقب ما إذا كان النص في الصفحة يبقى حاداً. ستصبح صور النص ضبابية أو محببة؛ بينما يبقى النص الحقيقي واضحاً. يتحقق هذا الاختبار في الوقت نفسه من انتهاكات 1.4.5 ومخاوف إعادة التدفق ذات الصلة (WCAG 1.4.4 و1.4.10).
6. فحص كود مصدر SVG. انقر بزر الماوس الأيمن على أي SVG واختر "View Source" أو استخدم أدوات مطوري المتصفح لفحص DOM الخاص بـ SVG. تأكد من أن محتوى النص يستخدم عناصر <text> بدلاً من عناصر <path> التي ترسم مخططات الحروف. إذا تم تحويل كل النص إلى مسارات، فإن SVG يعاني من المشكلة نفسها التي تعاني منها صورة نص نقطية.
7. الاختبار باستخدام قارئ شاشة لفهم التأثير المركب. استخدم NVDA مع Firefox، أو VoiceOver مع Safari على macOS/iOS، أو JAWS مع Chrome. انتقل إلى صور النص وتأكد من أن سمة alt تنقل محتوى النص بدقة. رغم أن سمة alt ذات المعنى تعالج WCAG 1.1.1 (المحتوى غير النصي)، إلا أنها لا تحل فشل 1.4.5 — فالنص لا يزال غير قابل لتخصيص المستخدم. وثّق كلتا المشكلتين بشكل منفصل.
8. تطبيق ورقة أنماط مستخدم مخصصة أو إضافة متصفح. ثبّت إضافة متصفح مثل Stylus أو استخدم ميزة ورقة أنماط المستخدم المدمجة في Firefox لتجاوز عائلات الخطوط وزيادة حجم الخط عالمياً. سيتغير النص الحقيقي؛ بينما لن يتغير نص الصورة. يحاكي هذا مباشرة ما يختبره المستخدمون ذوو إعاقات القراءة عندما يطبقون خطوطهم المفضلة.

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

عنوان لافتة زخرفية — غير صحيح

<!-- فشل: يتم عرض عنوان تسويقي كصورة JPEG للحفاظ على خط مخصص -->
<div class='hero'>
  <img src='summer-sale-heading.jpg' alt='Summer Sale — Up to 50% Off' />
</div>

عنوان لافتة زخرفية — صحيح

<!-- تم الإصلاح: يتم تقديم الخط المخصص نفسه عبر @font-face وتطبيقه على عنوان حقيقي.
     أصبح النص الآن قابلاً للتحديد والتكبير والتخصيص من قبل المستخدم. -->
<style>
  @font-face {
    font-family: 'BrandDisplay';
    src: url('/fonts/brand-display.woff2') format('woff2');
    font-display: swap;
  }
  .hero-heading {
    font-family: 'BrandDisplay', sans-serif;
    font-size: clamp(2rem, 5vw, 4rem);
    color: #c0392b;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
  }
</style>

<div class='hero'>
  <h1 class='hero-heading'>Summer Sale — Up to 50% Off</h1>
</div>

SVG بنص محوّل إلى مسارات — غير صحيح

<!-- فشل: تم تحويل النص إلى مسارات في تصدير SVG،
     مما يجعل الحروف غير قابلة للوصول وغير قابلة للتكبير كنص -->
<svg viewBox='0 0 400 80' xmlns='http://www.w3.org/2000/svg'>
  <!-- عشرات من عناصر <path> التي ترسم حروف 'Accsible' -->
  <path d='M10 60 L20 20 L30 60 ...' fill='#003087' />
</svg>

SVG بنص حقيقي — صحيح

<!-- تم الإصلاح: يستخدم SVG عنصراً حقيقياً <text> مع مرجع لخط ويب.
     أصبح النص الآن قابلاً للفهرسة والتحديد والتكبير. -->
<svg viewBox='0 0 400 80' xmlns='http://www.w3.org/2000/svg'
     role='img' aria-label='Accsible'>
  <defs>
    <style>
      .svg-label {
        font-family: 'BrandDisplay', sans-serif;
        font-size: 48px;
        fill: #003087;
      }
    </style>
  </defs>
  <text class='svg-label' x='10' y='60'>Accsible</text>
</svg>

صورة خلفية CSS مع تسمية نصية ضمن الصورة — غير صحيح

<!-- فشل: تسمية الزر جزء من صورة الخلفية،
     وليست عقدة نص حقيقية -->
<a href='/shop' class='cta-button'></a>

<style>
  .cta-button {
    display: block;
    width: 200px;
    height: 60px;
    background: url('shop-now-button.png') no-repeat center;
    background-size: cover;
  }
</style>

صورة خلفية CSS مع نص متراكب — صحيح

<!-- تم الإصلاح: يستخدم الزر عقدة نص حقيقية منسقة باستخدام CSS.
     صورة الخلفية زخرفية بحتة (تدرج أو نسيج). -->
<a href='/shop' class='cta-button'>Shop Now</a>

<style>
  .cta-button {
    display: inline-block;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: #ffffff;
    font-family: 'BrandDisplay', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 4px;
  }
</style>

شعار نصي (Logotype) — استثناء مقبول

<!-- مقبول: شعار نصي يكون فيه التصميم المحدد لأشكال الحروف
     هو ذاته هوية العلامة التجارية. ينقل نص alt محتوى النص بدقة.
     لا يمكن لـ CSS تكرار أشكال الحروف المرسومة يدوياً. -->
<a href='/' aria-label='Accsible — Home'>
  <img src='accsible-logo.svg'
       alt='Accsible'
       width='160'
       height='48' />
</a>

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

• استخدام JPEG أو PNG لعناوين الصفحات لأن نموذج التصميم يستخدم خطاً غير متوفر في Google Fonts — الإصلاح الصحيح هو استضافة الخط ذاتياً كملف WOFF2 باستخدام @font-face، وليس تضمين العنوان في صورة.
• تصدير أقسام hero كاملة كصورة مسطحة واحدة من أدوات التصميم مثل Figma أو Photoshop، مما يضمّن كل النصوص والأزرار والتسميات في ملف نقطي واحد. يجب أن يكون كل عنصر نصي عقدة HTML منفصلة.
• تحويل نص SVG إلى مسارات أثناء التصدير لتجنب الاعتماد على تحميل الخطوط من الخادم. هذا يلغي إمكانية الوصول إلى النص وإمكانية البحث فيه. استخدم عناصر <text> مع مرجع خط CSS بدلاً من ذلك.
• وضع نص ترويجي أو قانوني (مثل الشروط والأحكام أو التسعير أو قواعد المسابقة) داخل صورة للحفاظ على التحكم الدقيق في التخطيط. يجب أن يكون أي نص يحتاج المستخدمون إلى قراءته نص HTML حقيقي.
• الادعاء باستثناء الشعار النصي لكل جزء من النص ذي العلامة التجارية — ينطبق الاستثناء فقط على شعار العلامة الفعلي، وليس على أي عنوان أو تسمية مكتوبة بخط العلامة التجارية. العنوان المكتوب بخط Helvetica Neue ليس شعاراً نصياً.
• توفير سمة alt دقيقة وافتراض أن ذلك يحل فشل 1.4.5 — هذا غير صحيح. يفي نص alt بمتطلبات WCAG 1.1.1 (المحتوى غير النصي) لكنه لا يجعل نص الصورة قابلاً لتخصيص المستخدم، وهو المتطلب المميز في 1.4.5.
• استخدام عناصر HTML5 <canvas> لعرض نص منسق لأثر بصري دون توفير بديل نصي حقيقي في DOM. يتمتع النص المعروض عبر canvas بكل العيوب نفسها التي يتمتع بها نص الصورة.
• تضمين نص في صور Open Graph أو صور معاينة المشاركة الاجتماعية ونسيان أن هذه الصور تظهر أيضاً في الصفحة (على سبيل المثال، كصورة مميزة في منشور مدونة). إذا كانت الصورة المميزة سياقاً زخرفياً، فقد يكون ذلك مقبولاً — ولكن إذا كانت هي العنوان الأساسي للمقال، فهذا فشل.
• تجاهل قوالب النشرات البريدية — رغم أن عملاء البريد الإلكتروني خارج نطاق WCAG للمتصفح، إلا أن العديد من المؤسسات تنشر نشراتها كصفحات ويب. يظل النص في صور رؤوس البريد الإلكتروني المضمّنة كمحتوى ويب خاضعاً لمعيار 1.4.5.
• الافتراض أن صور Retina عالية الدقة تحل المشكلة — صورة نص بدقة 2× أو 3× أكثر حدة من صورة 1× لكنها لا تزال تفشل في 1.4.5 لأن النص يبقى غير قابل للتخصيص، وغير قابل لإعادة التدفق، وغير مرئي لمحركات البحث وتقنيات المساعدة.

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

تضع التعميم الرئاسي 2025/10 في تركيا، المنشور في الجريدة الرسمية رقم 32933 بتاريخ 21 يونيو 2025، معايير إلزامية لإمكانية الوصول على الويب وعلى الأجهزة المحمولة لمجموعة واسعة من الكيانات العاملة في تركيا. يشير التعميم صراحةً إلى WCAG 2.2 كمعيار تقني معياري، ويُطلب الالتزام بالمستوى AA — الذي يشمل WCAG 1.4.5 — للتأهل للحصول على شعار Erişilebilirlik (شعار إمكانية الوصول)، الصادر عن وزارة الأسرة والخدمات الاجتماعية (Aile ve Sosyal Hizmetler Bakanlığı). يعمل هذا الشعار كعلامة اعتماد رسمية تشير إلى أن المنتج الرقمي يلبي متطلبات إمكانية الوصول المحددة في التعميم.

تشمل الكيانات التي يغطيها التعميم شريحة واسعة من الاقتصاد الرقمي في تركيا. يُطلب من المؤسسات العامة والهيئات الحكومية على جميع المستويات الامتثال، وكذلك البنوك والمؤسسات المالية الخاضعة لتنظيم BDDK (هيئة التنظيم والرقابة المصرفية). كما تُغطى المستشفيات ومقدمو الرعاية الصحية، العامة والخاصة. في القطاع الخاص، تقع منصات التجارة الإلكترونية، ومشغلو الاتصالات الذين لديهم 200,000 مشترك أو أكثر، ووكالات السفر، وشركات النقل الخاصة، والمدارس والمؤسسات التعليمية الخاصة المخولة من وزارة التربية الوطنية (MoNE / Milli Eğitim Bakanlığı) جميعها ضمن نطاق التعميم.

بالنسبة لهذه المنظمات، فإن WCAG 1.4.5 لها آثار مباشرة وعملية. تستخدم العديد من مواقع التجارة الإلكترونية والمؤسسات التركية صوراً ترويجية ولافتات بخطوط مخصصة وعناوين حملات تدمج النص كصور نقطية — وهي ممارسة شائعة في سير عمل تصميم الويب التي تنشأ في أدوات التصميم البصري. بموجب التعميم الرئاسي، تشكل مثل هذه التطبيقات حالة عدم امتثال للمستوى AA وستؤدي إلى استبعاد الموقع من الحصول على شعار Erişilebilirlik أو الحفاظ عليه. ستكون البنوك التي تعرض جداول أسعار الفائدة كصور، والمستشفيات التي تسرد أسماء الأقسام في لافتات PNG، أو مشغلو الاتصالات الذين يقدمون التعريفات الترويجية كملفات صور مسطحة جميعها في حالة انتهاك لهذا المعيار.

يجب على المنظمات التي تسعى للامتثال أن تدقق جميع الصور في ممتلكاتها على الويب بحثاً عن محتوى نصي مضمّن، وأن تعطي الأولوية لتحويل الصفحات ذات الحركة العالية (الصفحات الرئيسية، وصفحات المنتجات، وصفحات الخدمات) أولاً، وأن تنشئ سير عمل من التصميم إلى التطوير يحظر تسليم محتوى نصي داخل ملفات الصور. إن الاستثمار في استراتيجية خطوط ويب باستخدام @font-face بتنسيق WOFF2 وقيم font-display مناسبة سيسمح للمصممين بتحقيق الغنى الطباعي نفسه المطلوب من أدلة العلامة التجارية مع البقاء متوافقين تماماً مع WCAG 2.2 المستوى AA ومع تفويض إمكانية الوصول التركي لعام 2025.