إضافة نص بديل إلى الصور

إضافة وصف منسق إلى الصور والرسوم البيانية لتحسين الفهم

يمكن أن تكون الصور وسيلة رائعة لجذب الزوار ويمكن أن تساعد في توصيل الأفكار المعقدة.

غالبًا ما يُطلق على أوصاف الصور اسم "الأوصاف البديلة" و"النص البديل". توفر أوصاف الصورة بديلاً وصفيًا للصورة يعتمد على النص. بالنسبة للطلاب الذين يعانون من إعاقات بصرية، فإن أوصاف الصور التي تشرح محتوى الصورة تعد أمرًا بالغ الأهمية لتعلمهم. بالنسبة لسائر الطلاب، يمكن أن توفر الأوصاف النصية سياقًا أعمق يساعدهم على الفهم.

يتحقق Ally من أوصاف الصور في أي مكان توجد به صورة. يتحقق Ally من الصور الموجودة على صفحة الويب أو في ملف مرفق.

يرتب Ally المشكلات، فيبدأ بالخطيرة ثم الرئيسية ثم الثانوية.

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

يعتبر النص البديل المفقود للصور مشكلة رئيسية.

استخدام Ally للبحث عن الأوصاف المفقودة للصور

استخدم تقرير إمكانية وصول ذوي الاحتياجات الخاصة في Ally لاكتشاف مشكلات إمكانية وصول ذوي الاحتياجات الخاصة على موقعك وإصلاحها. استخدم الرابط المتوفر للتقرير وسجل الدخول. افتح التقرير وانظر إلى قائمة المشكلات في جدول مشكلات إمكانية وصول ذوي الاحتياجات الخاصة.

يوجد جدول "مشكلات إمكانية وصول ذوي الاحتياجات الخاصة" في كل من علامتي التبويب "نظرة عامة" و"المجال". ابدأ في علامة التبويب "المجال" للاطلاع على المشكلات الخاصة بالمجال. 

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

إذا بدأت في علامة التبويب نظرة عامة، فحدد المشكلة ثم المجال الذي يحتوي على المشكلة.

يمكن أن تبدأ مشكلات وصف الصورة باستخدام الصورة أو المستند أو HTML في القائمة.

من قائمة مشكلات أوصاف الصور في المجال، حدد مؤشر الدرجة بجوار عنصر يحتوي على المشكلة. تظهر لوحة ملاحظات محرر المحتوى.

معاينة الصور بدون أوصاف

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

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

أدوات المعاينة

استخدم أدوات المعاينة لاستكشاف المشكلات في المستند.

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

اتباع الخطوات الإرشادية الخاصة بـ Ally لإضافة أوصاف للصور

يفترض Ally أن لديك معرفة أساسية بـ HTML وكيفية استخدام نظام إدارة المحتوى (CMS). لاتباع الخطوات الإرشادية، تحتاج إلى معرفة كيفية تحرير صفحة ويب في HTML أو التعليمة البرمجية المصدر في نظام إدارة المحتوى.

إلى جانب المعاينة، يمنحك Ally إرشادات تفصيلية حول كيفية إصلاح المشكلة.  ينظم Ally هذه الملاحظات في شجرة قرارات. لذا، فإن كل ما تحتاج فعله هو قراءة التوجيهات والاستجابة للمطالبات. تعرف على ماهية المشكلة، والسبب في أهميتها، وكيفية تصحيحها بشكل مناسب.

حدد كيفية إضافة الأوصاف، لاتباع الخطوات الإرشادية.

Alternative Text on Images

Writing good descriptions

Follow these best practices to write good alternative text descriptions for your images:

  • Describe the image based on the page context. Convey the full meaning of the image.
  • Avoid saying "image of" or "picture of". Screen readers automatically announce images as images.
  • Be concise.
  • Write narratives for complex images like infographics. Put this narrative on the page immediately following the infographic. Include an anchor link at the top of the page to view the text alternative. See an example of an infographic with a text alternative.
  • Avoid images of text. If you can't avoid it, copy the text into the alternative description.
  • Say something new. Don't repeat alternative descriptions on the same page. Don't repeat what is already said on the page.
  • Identify images that don't represent relevant content as decorative.

What is a decorative image?

An image is decorative when it doesn't add to the information on the page. For example, art work used to separate topics or a photo of someone on the phone when discussing communication skills.

They are valuable in their visual appeal but may not need to be read by screen readers.

More on decorative images on the web accessibility initiative website

Why are alternative image descriptions important?

There are many reasons to use alternative descriptions with your images.

  • Alternative descriptions, or text, are in the WCAG 2.2 guidelines
  • Students can search for an image
  • Students with visual impairments have difficulty perceiving images
  • Student with a poor network connection may have difficulty perceiving images
  • Screen readers can't read images
  • Some students learn better from descriptions than images
  • Text scales better than most images when the screen or page is enlarged

طرق لإضافة أوصاف الصور على صفحات الويب

هناك أكثر من طريقة لإضافة أوصاف الصور أو تحريرها على صفحات الويب لديك.

  • HTML: ترشدك خطوات Ally الإرشادية إلى كيفية البحث عن أوصاف الصور في HTML وتحريرها. بصورة أساسية، ابحث عن صفحة الويب التي تحتوي على الصورة. قم بتحرير الصفحة. قم بتحديث تعليمة HTML البرمجية للصورة لتضمين سمة النص البديل. احفظ الصفحة.
  • إعدادات الصورة: توفر معظم أنظمة إدارة المحتوى طريقة لتحرير النص البديل في إعدادات الصورة. ابحث عن الصورة الموجودة في صفحة الويب أو في مستودع ملفات نظام إدارة المحتوى. استخدم أدوات نظام إدارة المحتوى لتحرير الصورة. أضف وصف الصورة في حقل النص البديل. احفظ الصورة.

تفضل بزيارة w3schools لمعرفة المزيد عن HTML وCSS

لماذا لا أرى "img src" في HTML لديَّ؟

تتمثل الطريقة الأكثر شيوعًا لإضافة الصور إلى صفحة الويب في استخدام سمة HTML img src. وتعد Img src سمة HTML التي تستخدم عنوان URL لملف الصورة لوضع الصورة على صفحة الويب. ولكن يختلف كل نظام من أنظمة إدارة المحتوى عن غيره. قد يستخدم موقعك تعليمات برمجية أو سمات مختلفة. 

على سبيل المثال، في Drupal قد ترى شيئًا كهذا بدلاً من ذلك:

<drupal-entity data-embed-button="media_browser" data-entity-embed-display="view_mode:media.embedded" data-entity-type="media" data-entity-uuid="2961e3a2-8fbe-4e3f-baeb-953d69f70750"></drupal-entity>

أضف نصًا بديلاً إلى بداية السمة. على سبيل المثال،

<drupal-entity alt="أضف وصف الصورة هنا" data-embed-button="media_browser" data-entity-embed-display="view_mode:media.embedded" data-entity-embed-display-settings="" data-entity-type="media" data-entity-uuid="2961e3a2-8fbe-4e3f-baeb-953d69f70750"></drupal-entity>

إذا كنت لا ترى img src في HTML، فجرّب استخدام أدوات نظام إدارة المحتوى لتحرير إعدادات الصورة. ابحث عن الصورة الموجودة في صفحة الويب أو في مستودع ملفات نظام إدارة المحتوى. استخدام أدوات نظام إدارة المحتوى لفتح إعدادات الصورة. أضف وصف الصورة في حقل النص البديل. احفظ الصورة.

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