- ما الذي ستتعلمه في هذا الدليل - من الذي يجب أن يكتب نصوص Alt ولماذا يهم ذلك - مبادئ أساسية لكتابة نص Alt فعّال - أمثلة عملية لنص Alt جيد وسيئ - إرشادات خاصة للمطورين - إرشادات خاصة لفرق المحتوى كيفية كتابة نص Alt: دليل عملي للمطورين وفرق المحتوى

وفقًا لتقرير WebAIM Million 2025، يؤثر غياب النص البديل على 55.5% من جميع الصفحات الرئيسية التي تم تحليلها — ومن بين تلك الإخفاقات، يتضمن 44% صورًا مرتبطة، مما يعطل تمامًا التنقل لمستخدمي قارئات الشاشة. هذه ليست مشكلة هامشية. هذا يعني أن نصف الويب يترك المستخدمين المكفوفين وضعاف البصر عالقين أمام صور لا تقول شيئًا. إذا كان فريقك يطرح صورًا دون التفكير بعناية في النص البديل، فأنت لا تفشل فقط في استيفاء خانة امتثال — بل تخبر جزءًا كبيرًا من جمهورك أن تجربتهم لا تهم.

ما هو النص البديل فعليًا (ولماذا هو أكثر من مجرد وسم)

النص البديل، وهو اختصار لـ alternative text، هو وصف مكتوب مضمَّن في خاصية alt لعنصر HTML <img>. عندما يواجه قارئ الشاشة صورة، يقرأ النص البديل بصوت عالٍ للمستخدم. وعندما تفشل الصورة في التحميل — بسبب اتصال بطيء، أو رابط معطّل، أو حاجب محتوى — يتم عرض النص البديل بدلًا منها. كما تتم فهرسته بواسطة محركات البحث، مما يجعله إشارة SEO هادئة ولكن ذات مغزى.

لكن ما يفوته الكثير من الفرق هو أن النص البديل ليس مجرد شبكة أمان احتياطية. إنه الطريقة الأساسية التي يختبر بها المستخدمون المكفوفون وضعاف البصر — حوالي 43.3 مليون شخص حول العالم من المكفوفين، و295 مليونًا ممن لديهم ضعف بصري متوسط إلى شديد — المحتوى المرئي على الويب. قارئات الشاشة مثل NVDA وJAWS (أكثر قارئات الشاشة المكتبية استخدامًا) تعلن النص البديل بمجرد أن يصل التركيز إلى الصورة. إذا كان هذا النص غائبًا أو بلا معنى أو مكررًا، تتدهور تجربة المستخدم فورًا.

تُظهر الأبحاث حول المستخدمين المكفوفين وضعاف البصر صورة صارخة لما يحدث في الواقع. بعض المستخدمين يذكرون أنهم يتجاهلون الصور على المواقع تمامًا لأن النص البديل، في تجربتهم، لا يكون مفيدًا أبدًا. آخرون يتجاوزون صور المنتجات في مواقع التجارة الإلكترونية ويعتمدون على مراجعات المستخدمين بدلًا من ذلك، لأن نصًا بديلًا مثل "image001.jpg" أو "photo" لا يخبرهم بأي شيء. هذه ليست مشكلة في قارئ الشاشة — بل مشكلة محتوى، وهي مشكلة يمكن لفريقك حلها.

فهم النص البديل كمسؤولية محتوى — وليس مجرد مهمة مطوّر — هو أول تحول ذهني يحتاجه كل فريق. المطوّر يطبّق الخاصية؛ وفريق المحتوى يفهم السياق. كلاهما ضروري للوصول إلى النتيجة الصحيحة.

المشهد القانوني والامتثالي

النص البديل ليس اختياريًا إذا كنت تهتم بالتعرض القانوني. معيار النجاح 1.1.1 في WCAG (المحتوى غير النصي) هو متطلب من مستوى A — أدنى وأساس مستوى من مستويات الامتثال. الفشل فيه يعني الفشل في أي تدقيق رسمي لإمكانية الوصول. في الولايات المتحدة، تم تطبيق ADA على المواقع الإلكترونية في آلاف القضايا، مع رفع 4,605 دعوى قضائية متعلقة بمواقع الويب بموجب ADA في عام 2024 وحده. غياب النص البديل هو أحد أكثر الانتهاكات المذكورة في خطابات المطالبة تحديدًا لأنه سهل الاكتشاف، وقابل للقياس موضوعيًا، ويمنع مباشرة الوصول إلى المحتوى الأساسي.

إلى جانب ADA، أصبح قانون الوصولية الأوروبي (EAA) قابلًا للتنفيذ في 28 يونيو 2025. إذا كانت مؤسستك تخدم عملاء في الاتحاد الأوروبي، يمكن أن يؤدي عدم الامتثال إلى غرامات تصل إلى €100,000 أو 4% من الإيرادات السنوية. يُعترف على نطاق واسع بأن WCAG 2.2 مستوى AA هو المعيار المرجعي للامتثال لـ EAA، ومتطلبات النص البديل فيه بموجب المعيار 1.1.1 لم تتغير عن الإصدارات السابقة — يجب أن تحتوي جميع الصور المعلوماتية على بدائل نصية قابلة للتحديد برمجيًا.

في كندا، يفرض قانون إمكانية الوصول لأونتاريو لذوي الإعاقة (AODA) بالمثل الالتزام بـ WCAG للمنظمات في القطاعين العام والخاص. القسم 508 في السياق الفدرالي الأمريكي لديه متطلباته الموازية الخاصة. الخلاصة متسقة عبر الأنظمة القضائية: النص البديل ليس ميزة إضافية لطيفة، وبيئة التنظيم تزداد صرامة، لا تساهلًا.

WCAG 1.1.1 هو مستوى A — أكثر مستويات الامتثال أساسية. الفشل فيه يعني الفشل في كل تدقيق لإمكانية الوصول، وهو أسهل انتهاك يمكن لأدوات الأتمتة والفرق القانونية اكتشافه.

إطار اتخاذ القرار: أي الصور تحتاج إلى ماذا

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

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

لاحظ أن النص البديل الفارغ (alt='') ليس هو نفسه غياب خاصية alt. قد يتسبب وجود صورة بدون خاصية alt على الإطلاق في أن يقرأ قارئ الشاشة اسم ملف الصورة أو عنوان URL بصوت عالٍ — وهو ما يكون أسوأ تقريبًا دائمًا من الصمت. احرص دائمًا على تضمين الخاصية، حتى عندما تكون قيمتها فارغة عن قصد.

كتابة نص بديل يعمل فعليًا: قواعد عملية

كتابة نص بديل جيد أصعب مما يبدو. إليك القواعد الملموسة التي تميز الأوصاف المفيدة عن الضوضاء:

• اجعله موجزًا. استهدف أقل من 125 حرفًا. قد تقوم قارئات الشاشة مثل JAWS وNVDA بقطع النص البديل الأطول في منتصف الجملة، مما يحذف بالضبط المعلومات التي بذلت جهدًا لتقديمها. إذا كانت الصورة معقدة بما يكفي لتتطلب أكثر من ذلك، فهذا مؤشر على حاجتك إلى وصف طويل تكميلي.
• لا تبدأ بـ "Image of" أو "Photo of". تعلن قارئات الشاشة تلقائيًا أن العنصر صورة قبل قراءة النص البديل. كتابة alt='Image of a smiling woman' تجعل قارئ الشاشة يقول "image, image of a smiling woman" — وهو أمر مكرر ويهدر وقت المستمع.
• صف المعنى، لا المظهر فقط. يجب أن ينقل النص البديل نفس المعلومات أو الوظيفة التي تقدمها الصورة. إذا كنت تعرض مخططًا لأرباح الربع الثالث، فلا تكتب alt='Bar chart'. اكتب شيئًا مثل alt='Bar chart showing Q3 revenue up 22% year-over-year'، ثم قدم البيانات الكاملة في النص المحيط.
• طابق السياق. يمكن أن تتطلب نفس الصورة الفوتوغرافية نصًا بديلًا مختلفًا اعتمادًا على مكان استخدامها. صورة حاسوب محمول على مكتب مستخدمة في قسم "تعرف على فريقنا" قد تحتاج إلى نص بديل يصف مساحة العمل؛ بينما في قائمة منتج، تحتاج إلى وصف مواصفات الحاسوب المحمول ومظهره.
• لا تحشر الكلمات المفتاحية. تتم فهرسة النص البديل بواسطة محركات البحث، لكن حشر الكلمات المفتاحية فيه تجربة سيئة للمستخدم وانتهاك لنية WCAG. اكتب للمستخدم أولًا.
• استخدم قواعد نحوية وعلامات ترقيم صحيحة. تقوم قارئات الشاشة بتحويل النص إلى كلام، وتؤثر علامات الترقيم على الإيقاع والوضوح. تبدو الجملة الناقصة أقل طبيعية من فكرة مكتملة.

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

أمثلة على الشيفرة: الصحيح والخاطئ

النظرية شيء، ورؤية كيفية تطبيق هذه المبادئ في HTML الفعلي شيء آخر.

صورة معلوماتية — نص بديل ضعيف:

<img src='team-photo.jpg' alt='photo'>

صورة معلوماتية — نص بديل جيد:

<img src='team-photo.jpg' alt='Accsible engineering team gathered around a whiteboard during a product sprint meeting'>

صورة وظيفية (شعار مرتبط) — نص بديل ضعيف:

<a href='/'>
  <img src='logo.svg' alt='logo'>
</a>

صورة وظيفية (شعار مرتبط) — نص بديل جيد:

<a href='/'>
  <img src='logo.svg' alt='Accsible — return to homepage'>
</a>

صورة زخرفية — تطبيق صحيح:

<img src='decorative-wave-divider.svg' alt='' role='presentation'>

صورة معقدة (مخطط) — نهج صحيح مع وصف طويل مرتبط:

<img
  src='q3-revenue-chart.png'
  alt='Bar chart: Q3 revenue up 22% YoY. Full data table below.'
  aria-describedby='chart-description'
>
<div id='chart-description'>
  <!-- Full tabular data or structured text description here -->
</div>

بالنسبة لأزرار الأيقونات التي لا تحتوي على تسمية نصية مرئية، استخدم aria-label على الزر نفسه واضبط alt='' على صورة الأيقونة لتجنب الإعلان المزدوج:

<button aria-label='Close dialog'>
  <img src='close-icon.svg' alt=''>
</button>

التعامل مع أنواع صور محددة

صور المنتجات في التجارة الإلكترونية: هذه من بين أهم سياقات النص البديل على الويب. يعتمد المستخدمون المكفوفون بالكامل على النص البديل لفهم ما يفكرون في شرائه. وصف اسم المنتج فقط غير كافٍ. ضمّن المادة، اللون، السمات البصرية الأساسية، وأي متغيرات يمكن تمييزها بصريًا. على سبيل المثال: alt='Slim-fit wool blazer in navy blue with gold buttons and notched lapels' أكثر فائدة بكثير من alt='Blazer'.

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

الإنفوغرافيك: التعامل معها جيدًا صعب بشكل ملحوظ. لا يمكن لخاصية alt واحدة أن تحمل الوزن المعلوماتي لإنفوغرافيك معقد. النهج الصحيح هو نص بديل قصير على مستوى الملخص (مثل alt='Infographic summarizing five steps of our onboarding process') مقترن بنسخة نصية منظمة لنفس المعلومات مرئية على الصفحة.

صور الأشخاص: تضمين الأسماء عندما يتم التعريف بالأشخاص مفيد، خاصة في السياقات التحريرية أو الإخبارية. صف ما يفعله الشخص أو ما تنقله الصورة، لا مظهره الجسدي فقط. تجنب الأوصاف التي تختزل الشخص إلى خصائصه الديموغرافية.

صور الخلفية وCSS: الصور المطبقة عبر background-image في CSS لا تتوفر لها خاصية alt، لذا يجب استخدامها فقط لأغراض زخرفية فعلية. إذا كانت الصورة تحتاج إلى نقل معنى، فيجب أن تكون في HTML كعنصر <img> مع نص بديل مناسب.

دمج النص البديل في سير عملك

أحد أسباب بقاء النص البديل معطّلًا على نطاق واسع هو أنه يُعامل كفكرة لاحقة في الخطوة الأخيرة — شيء تشير إليه أداة فحص آلية بعد الإطلاق، مما يدفع إلى تصحيح متعجل. الحل هو نقل النص البديل إلى أعلى في سير عمل المحتوى والتطوير.

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

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

بالنسبة لـ مديري ضمان الجودة والامتثال، يمكن لأدوات الفحص الآلي (بما في ذلك حلول تراكب إمكانية الوصول مثل Accsible) اكتشاف الصور ذات خصائص alt المفقودة أو الفارغة على نطاق واسع، والإشارة إليها في الوقت الفعلي. لكن الأدوات الآلية لا يمكنها تقييم ما إذا كان النص البديل الموجود ذا معنى بالفعل — هذا الحكم يتطلب مراجعًا بشريًا. ضمّن عمليات فحص يدوية عشوائية في وتيرة تدقيق إمكانية الوصول لديك، وضمّن مراجعة جودة النص البديل في معايير قبول أي ميزة جديدة تتضمن صورًا.

عندما يُعاد استخدام نفس الصورة عبر صفحات أو سياقات متعددة، تذكّر أن النص البديل المناسب قد يتغير. صورة لمقر شركة مستخدمة في صفحة "اتصل بنا" وعلى صفحة "حول ثقافتنا" قد تستحق أوصافًا مختلفة اعتمادًا على ما تحاول كل صفحة توصيله. تسمح منصات CMS مثل WordPress بتجاوز النص البديل على مستوى المنشور لهذا السبب بالذات.

الأخطاء الشائعة التي يجب تجنبها

حتى الفرق التي تأخذ النص البديل على محمل الجد ترتكب أخطاء متكررة. إليك الأنماط التي تستحق المراقبة النشطة:

• استخدام اسم الملف كنص بديل. نص بديل مثل IMG_4521.jpg أو hero-banner-v3-final.png أسوأ من عديم الفائدة — فهو يشير بشكل فعّال لمستخدمي قارئات الشاشة إلى أن أحدًا لم يفكر بهم.
• جعل النص البديل مطابقًا للتسمية التوضيحية المجاورة. تخدم التسميات التوضيحية والنص البديل جماهير وأغراضًا مختلفة. التسمية التوضيحية سياق تكميلي للمستخدمين المبصرين؛ النص البديل يحل محل الصورة للمستخدمين الذين لا يمكنهم رؤيتها. يمكن أن يتقاطعا، لكن لا ينبغي نسخهما ولصقهما بالتبادل.
• إضافة نص بديل لكل صورة دون تمييز. إعطاء الصور الزخرفية نصًا بديلًا وصفيًا يجبر مستخدمي قارئات الشاشة على الخوض في محتوى غير ذي صلة. انضباط اتخاذ قرار "هل تحتاج هذه الصورة إلى وصف، وإذا كان الأمر كذلك، فما هو؟" مهم بقدر أهمية الكتابة نفسها.
• كتابة أوصاف غامضة وخالية من السياق. نص بديل مثل alt='man smiling' لصورة لرئيسك التنفيذي أثناء إطلاق منتج لا يخبر المستخدم تقريبًا بأي شيء عن سبب وجود الصورة أو ما تعنيه في السياق.
• تجاهل النص البديل في SVGs. تحتاج SVGs المضمّنة إلى أسماء يمكن الوصول إليها أيضًا، عادةً عبر aria-label على عنصر <svg> أو عنصر <title> كأول ابن، مقترنًا بـ role='img'.

<!-- SVG with accessible name -->
<svg role='img' aria-labelledby='svg-title'>
  <title id='svg-title'>Quarterly revenue growth, Q1 to Q4 2024</title>
  <!-- SVG paths -->
</svg>

أهم النقاط

• ليست كل صورة تحتاج إلى وصف نصي. يجب أن تستخدم الصور الزخرفية alt='' لإخبار قارئات الشاشة بتجاوزها — لكن لا تحذف خاصية alt تمامًا أبدًا، وإلا قد يعلن قارئ الشاشة اسم الملف بدلًا منها.
• حافظ على النص البديل تحت 125 حرفًا للصور المعلوماتية؛ قد تقطع قارئات الشاشة السلاسل الأطول، كما أن الإيجاز يحسن استيعاب الاستماع. بالنسبة للصور المعقدة، اقترن ملخصًا قصيرًا في النص البديل بوصف نصي كامل في متن الصفحة.
• صف الوظيفة، لا الشكل فقط. بالنسبة للصور المرتبطة والوظيفية، يجب أن يخبر النص البديل المستخدم بما سيحدث أو إلى أين سيذهب — لا كيف تبدو الصورة. بالنسبة للصور المعلوماتية، انقل المعنى، لا المحتوى البصري فقط.
• ادمج النص البديل في سير عملك مبكرًا، لا كإصلاح بعد الإطلاق. اجعله حقلًا مطلوبًا في نظام إدارة المحتوى، وضمّنه في أدلة أسلوب المحتوى، وأضف مراجعة الجودة إلى عملية ضمان الجودة — تلتقط الأدوات الآلية النص البديل المفقود، لكن يجب على البشر تقييم ما إذا كان ذا معنى.
• الرهانات القانونية والتنظيمية حقيقية ومتزايدة. بلغ عدد الدعاوى القضائية بموجب ADA التي تشير إلى غياب النص البديل الآلاف في عام 2024، وقانون الوصولية في الاتحاد الأوروبي أصبح الآن ساريًا. التعامل مع النص البديل كفكرة لاحقة ليس استراتيجية امتثال قابلة للاستمرار.