# فحص النص البديل للصور أدخل عنوان صفحة لتعرض كل صورة فيها مع نصها البديل، كما يُقرأ في متصفح حقيقي بعد تشغيل النصوص البرمجية. واعرف أي الصور بلا نص بديل، وأيها مُعلَّمة كزخرفية، وأيها تحمل نصًا بديلًا لا يصف شيئًا. ## ما تفحصه هذه الأداة - صور بلا نص بديل: كل عنصر img وكل زر صورة بلا سمة alt وبلا أي اسم قابل للوصول آخر، مثل aria-label. - صور مرتبطة بروابط تترك الرابط بلا اسم: الشعارات والأيقونات داخل الروابط أو الأزرار التي لا تحمل نصًا بديلًا ولا أي نص آخر، فلا يستطيع قارئ الشاشة أن يعلن سوى «رابط». - نص بديل يبدو كاسم ملف: قيم مثل IMG_2041.jpg أو DSC0042 أو سلسلة طويلة من الأرقام، تملؤها أنظمة كثيرة تلقائيًا عند الرفع. - كلمات عامة: النص البديل الذي يقتصر على «صورة» أو «صورة فوتوغرافية» أو «شعار» أو «لافتة» لا يخبر أحدًا بما تعرضه الصورة. - نص زائد ومكرر: أوصاف تبدأ بعبارة «صورة لـ»، أو تكرر نص الرابط المجاور لها، أو تُستخدم في ثلاث صور مختلفة أو أكثر. - الصور الزخرفية والمخفية: تُدرَج الصور المُعلَّمة بـ alt="" أو role="presentation"، والصور المخفية عبر aria-hidden أو CSS، بشكل منفصل حتى تتأكد من أن كلًّا منها زخرفية فعلًا. - معاينة لكل صورة: صورة مصغّرة بجانب نصها البديل، حتى تحكم على كل وصف في ثوانٍ. وتتيح المرشِّحات عرض المشكلات فقط أو ما يحتاج إلى تحقّق فقط. ## ما لا يمكنها فحصه - معرفة ما إذا كان النص البديل دقيقًا. فلا يستطيع الحكم على ذلك إلا شخص يرى الصورة ويعرف سبب وجودها في الصفحة. - فحص الصور المضبوطة كخلفيات CSS، أو البدائل النصية لرسومات SVG وcanvas. فهي تسرد عناصر img وأزرار الصور. - فحص الصور داخل الإطارات، مثل مقاطع الفيديو والخرائط والإعلانات المضمّنة. - عرض أكثر من 150 صورة. ففي الصفحات الطويلة جدًا تعرض أول 150 صورة وتذكر عددها الإجمالي. - اختبار صفحات أخرى. أما الفحص المجاني الكامل فيفحص النص البديل مع بقية معايير WCAG في ما يصل إلى خمس صفحات أساسية. ## لماذا يهم ذلك النص البديل هو ما يقرؤه قارئ الشاشة بدلًا من الصورة، وما يعرضه المتصفح عندما يتعذّر تحميلها. ويتطلب معيار النجاح 1.1.1 في WCAG 2.2، من المستوى A، بديلًا نصيًا لكل صورة تحمل معلومات، وبديلًا فارغًا للصور التي لا تحمل معلومات. غياب النص البديل هو ثاني أكثر إخفاقات إمكانية الوصول شيوعًا على الويب: فقد وجده تحليل WebAIM لعام 2026 في 53.1% من الصفحات الرئيسية لأكبر مليون موقع، ولم يكن لـ 16.2% من كل الصور التي فحصها أي نص بديل. ومحركات البحث تقرؤه أيضًا. إذ تقول Google إنها تستخدم النص البديل إلى جانب الرؤية الحاسوبية ومحتوى الصفحة لفهم الصور، وإن النص البديل للصورة المرتبطة برابط يعمل مثل نص الرابط (anchor text). ## كيف تقرأ النتائج - بلا نص بديل: لا تحمل الصورة سمة alt ولا أي اسم آخر. وبحسب البرنامج المستخدم، قد يقرأ قارئ الشاشة اسم الملف أو يتجاوز الصورة. - زخرفية: alt="" أو role="presentation": تتجاوز قارئات الشاشة الصورة. وهذا صحيح للزخرفة، وخاطئ لصورة تحمل معلومات أو تشكّل المحتوى الوحيد لرابط. - تحمل نصًا بديلًا: للصورة وصف. ونحن نشير إلى الأوصاف التي تبدو خاطئة؛ أما البقية فلا تزال تحتاج إلى شخص يتحقق من دقتها. - مسمّاة عبر ARIA أو title: لا توجد سمة alt، لكن يوجد اسم من aria-label أو aria-labelledby أو title. وهذا يجتاز الاختبارات الآلية؛ لكن alt يبقى الخيار الأكثر موثوقية. - مخفية: غير معروضة، أو مخفية عن التقنيات المساعدة عبر aria-hidden. لا شيء يحتاج إلى إصلاح ما لم يكن من المفترض أن تُرى الصورة. - رابط بلا اسم: رابط أو زر محتواه الوحيد صورة بلا بديل نصي. وهذا إخفاق حتى لو كانت الصورة نفسها زخرفية. - للتحقق: نص بديل يبدو كاسم ملف أو كلمة عامة، أو يبدأ بعبارة «صورة لـ»، أو يكرر نص الرابط، أو طويل جدًا، أو مستخدم في عدة صور. ## كيف تصلح أكثر المشكلات شيوعًا - صور المنتجات والمحتوى: صِف ما سيفوت القارئ من دون الصورة، في سياق الصفحة. للمنتج: القطعة ولونها والزاوية المعروضة. ولصورة في مقال: ما تُظهره ولا يذكره النص. - الشعارات التي تربط إلى الصفحة الرئيسية: يجب أن تذكر الصورة المرتبطة برابط وجهةَ هذا الرابط. وللشعار الذي يربط إلى الصفحة الرئيسية، استخدم اسم الشركة، مثل alt="الصفحة الرئيسية لـ Acme"، بدلًا من «شعار». - الأيقونات داخل الروابط والأزرار: امنح الأيقونة نصًا بديلًا يذكر الإجراء، مثل «بحث» أو «السلة»، أو امنح الرابط aria-label وعلّم الأيقونة كزخرفية باستخدام alt="". - الصور الزخرفية: استخدم alt="" (قيمة فارغة، لا سمة مفقودة) للفواصل والزخارف الخلفية والصور التي تكرر نصًا مجاورًا لها مباشرةً. - أسماء الملفات التي تملؤها منصتك: تنسخ منصات كثيرة اسم الملف إلى حقل النص البديل عند الرفع. عدّله حيث تُدار الصورة: في Shopify، ضمن وسائط المنتج؛ وفي WordPress، في حقل النص البديل (Alternative Text) في مكتبة الوسائط. - المخططات والرسوم المعلوماتية: امنح المخطط نصًا بديلًا قصيرًا يذكر ما يعرضه، وضع البيانات أو ملخصًا لها في النص أو في جدول بجانبه. ## الأسئلة الشائعة ### ما هو النص البديل؟ تحمل سمة alt في الصورة بديلها النصي. تقرؤه قارئات الشاشة بصوت عالٍ، وتعرضه المتصفحات عندما يتعذّر عرض الصورة. ### هل يجب أن يكون لكل صورة نص بديل؟ يجب أن يحمل كل عنصر img سمة alt. فإذا كانت الصورة تحمل معلومات، تصفها السمة؛ وإذا كانت زخرفية، فيجب أن تكون فارغة (alt="") كي تتجاوزها قارئات الشاشة. ### ما الطول المناسب للنص البديل؟ لا يحدد WCAG أي حد. والنص البديل الجيد عادةً عبارة قصيرة أو جملة. وإذا احتاجت الصورة إلى أكثر من ذلك، فصِفها في نص الصفحة أو في تعليق توضيحي، وأبقِ النص البديل قصيرًا. ونحن نشير إلى النص البديل الذي يتجاوز 150 حرفًا لإعادة النظر فيه. ### هل يفيد النص البديل في SEO؟ تقول Google إنها تستخدم النص البديل، إلى جانب الرؤية الحاسوبية ومحتوى الصفحة، لفهم الصور، وإن النص البديل للصورة المرتبطة برابط يعمل مثل نص الرابط. وتحذّر أيضًا من أن حشو سمات alt بالكلمات المفتاحية قد يُعامَل كرسائل غير مرغوب فيها (spam). ### هل سمة title مثل alt؟ لا. تظهر title كتلميح عند التمرير بالمؤشر، ولا تعلنها قارئات الشاشة بشكل موثوق، ولا تتوفر على الشاشات اللمسية. وتقبلها الاختبارات الآلية اسمًا عندما تغيب alt، لكن alt هي الخيار الذي يُعتمد عليه. ### هل يمكن للذكاء الاصطناعي كتابة النص البديل؟ يمكنه صياغة مسودات للأوصاف، لكنه لا يعرف سبب وجود الصورة في صفحتك. راجع كل مسودة: فالنص البديل المناسب يعتمد على سياق لا يعرفه سواك. ## المصادر - [W3C: فهم معيار النجاح 1.1.1 Non-text Content في WCAG 2.2](https://www.w3.org/WAI/WCAG22/Understanding/non-text-content) - [W3C Images Tutorial: شجرة قرارات alt (An alt decision tree)](https://www.w3.org/WAI/tutorials/images/decision-tree/) - [W3C Images Tutorial: الصور الوظيفية (Functional images)](https://www.w3.org/WAI/tutorials/images/functional/) - [Google Search Central: أفضل ممارسات SEO للصور](https://developers.google.com/search/docs/appearance/google-images) - [Deque: قاعدة image-alt في axe-core](https://dequeuniversity.com/rules/axe/4.13/image-alt) - [WebAIM: The WebAIM Million (2026)](https://webaim.org/projects/million/)