الصور

قد تبدو الصور التي يمكن الوصول إليها موضوعًا بسيطًا للوهلة الأولى - تضيف بعض "النص البديل" إلى الصورة، وتكون قد انتهيت. لكن، الموضوع أكثر دقة مما يعتقد بعض الناس. في هذا القسم، سنراجع ما يلي:

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

الغرض من الصورة وسياقها

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

ننصحك بطرح الأسئلة التالية:

  • هل الصورة ضرورية لفهم سياق الميزة أو الصفحة؟
  • ما هو نوع المعلومات التي تحاول الصورة نقلها؟
  • هل الصورة بسيطة أم معقدة؟
  • هل تثير الصورة مشاعر أو تطلب من المستخدم اتخاذ إجراء؟
  • أم هل الصورة المرئية هي مجرد "حلوى العين" بدون هدف حقيقي؟

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

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

مثال على شجرة قرارات الصور

صور زخرفية

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

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

قيمة العمود "alt" فارغة.

تختلف سمة النص البديل الفارغ/الفارغ عن سمة النص البديل المفقودة. في حال عدم توفّر سمة النص البديل، قد تقرأ التكنولوجيا المساعدة اسم الملف أو المحتوى المحيط به لمنح المستخدم مزيدًا من المعلومات حول الصورة.

تم ضبط الدور على presentation أو none.

يؤدي ضبط الدور على presentation أو none إلى إزالة دلالات العنصر من التعرض لشجرة تسهيل الاستخدام. وفي الوقت نفسه، سيزيل aria-hidden= "true" العنصر بأكمله وجميع عناصره الثانوية من واجهة برمجة التطبيقات Accessibility API.

<!-- All of these choices lead to the same result. -->
<img src=".../Ladybug.jpg" role="presentation">
<img src=".../Ladybug.jpg" role="none">
<img src=".../Ladybug.jpg" aria-hidden="true">

استخدِم aria-hidden بحذر لأنها قد تخفي العناصر التي لا تريد إخفاءها.

الصور في CSS

عند إضافة صورة خلفية باستخدام CSS، لن يكتشف قارئ الشاشة ملف الصورة. تأكّد من رغبتك في إخفاء الصورة قبل تطبيق هذه الطريقة.

صور إعلامية

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

إذا كانت صورتك مفيدة، يجب تضمين نص بديل آلي يصف الغرض من الصورة. تمنح أوصاف الصور البديلة - التي يتم اختصارها غالبًا كـ "نص بديل" - للمستخدمين سياقًا إضافيًا حول الصورة وتساعدهم في فهم رسالة الصورة أو الغرض منها بشكل أفضل.

يمكن تحقيق الأوصاف البديلة البسيطة باستخدام عناصر <img> من خلال تضمين السمة alt، بغض النظر عن نوع الملف الذي تشير إليه، مثل .jpg و.png و.svg وغيرها.

<img src=".../Ladybug_Swarm.jpg" alt="A swarm of red ladybugs is resting on the leaves of my prize rose bush.">

وعند استخدام عناصر <svg> بشكل مضمّن، عليك الانتباه إلى تسهيل الاستخدام.

أولاً، نظرًا لترميز الرسومات الموجّهة التي يمكن تغيير حجمها (SVG) دلاليًا، ستتخطّاها الأداة تلقائيًا. إذا كانت لديك صورة زخرفية، فهذه ليست مشكلة - وستتجاهل التكنولوجيا المساعدة على النحو المنشود. ولكن إذا كانت لديك صورة تتضمن معلومات، يجب إضافة ARIA role="img" إلى النمط حتى يتمكن نظام المساعدة الآلية من التعرّف عليها كصورة.

ثانيًا، لا تستخدم عناصر <svg> السمة alt، وبالتالي يجب استخدام طرق ترميز مختلفة بدلاً من ذلك لإضافة أوصاف بديلة إلى الصور الإعلامية.

  <svg role="img"...>
     <title>Cartoon drawing of a red, black, and gray ladybug.</title>
  </svg>

الصور الوظيفية

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

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

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

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

من خلال مقتطف الرمز، يمكنك أن ترى أنّ "الانتقال إلى الصفحة الرئيسية" هو عنوان برنامج تضمين، والنص البديل للصورة هو "Lovely Ladybugs for your Lawn". عندما تستمع إلى رمز الشعار باستخدام قارئ شاشة، فإنك تسمع كلاً من العنصر المرئي والإجراء الذي يتم نقله في صورة واحدة.

<div title="Navigate to the homepage">
   <a href="/">
      <img src=".../Ladybug_Logo.png" alt="Lovely Ladybugs for your Lawn"></img>
   </a>
</div>

الصور المعقدة

في كثير من الأحيان، تتطلب الصورة المعقدة تفسيرًا أكثر من الصورة الزخرفية أو المعلوماتية أو العملية. يتطلب كلاً من وصف قصير وبديل طويل لنقل الرسالة الكاملة. تتضمن الصور المعقدة الرسوم البيانية، والخرائط، والرسوم البيانية/المخططات، والرسوم التوضيحية المعقدة. كما هو الحال مع أنواع الصور الأخرى، هناك طرق مختلفة يمكنك استخدامها لإضافة أوصاف بديلة إلى صورك المعقدة.

<img src=".../Ladybug_Anatomy.svg" alt="Diagram of the anatomy of a ladybug."><a href="ladybug-science.html">Learn more about the anatomy of a ladybug</a>

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

ويمكنك أيضًا إلحاق السمة aria-describedby بالعنصر <img>. ويمكنك ربط الصورة آليًا بمعرّف يحتوي على وصف أطول. تنشئ هذه الطريقة ارتباطًا قويًا بين الصورة والوصف الكامل. يمكن عرض الوصف الموسع على الشاشة أو إخفاؤه مرئيًا، ولكن احرص على إبقائه مرئيًا لمساعدة المزيد من الأشخاص.

إحدى الطرق الأخرى لتجميع أوصاف بديلة قصيرة مع وصف أطول هي استخدام عنصرَي HTML5 <figure> و<figcaption>. تعمل هذه العناصر بالطريقة نفسها المتّبَعة مع aria-describedby، لأنّها تجمّع العناصر دلاليًا، ما يشكّل رابطًا أقوى بين الصورة ووصفها. إنّ إضافة ARIA role="group" تضمن التوافق مع الأنظمة القديمة مع متصفحات الويب القديمة التي لا تتيح استخدام دلالات الألفاظ الأصلية للعنصر <figure>.

أفضل الممارسات المتعلقة بالنص البديل

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

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

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

  • تجنَّب استخدام كلمات مثل "صورة" أو "صورة" في الوصف، لأنّ قارئ الشاشة سيتعرّف على أنواع الملفات هذه نيابةً عنك.
  • عند تسمية صورك، كن متسقًا ودقيقًا قدر الإمكان. وتكون أسماء الصور إجراء احتياطي في حال كان النص البديل غير متوفّر أو متجاهل.
  • تجنَّب استخدام أحرف ليست ألفا (على سبيل المثال، # و9 و&) واستخدِم الشرطات بين الكلمات بدلاً من الشرطات السفلية في أسماء الصور أو في النص البديل.
  • استخدِم علامات الترقيم الصحيحة كلما أمكن ذلك. بدونه، ستبدو أوصاف الصور كجملة طويلة متواصلة لا تنتهي.
  • اكتب نصًا بديلاً، مثل نص الإنسان وليس نص الروبوت. لن يفيد ازدحام الكلمات الرئيسية أي شخص - سينزعج الأشخاص الذين يستخدمون برامج قراءة الشاشة، وستفرض عليك خوارزميات محرك البحث عقوبات على حسابك.

التحقّق من استيعابك

اختبر معلوماتك حول ARIA وHTML

كيف يمكنك تسهيل الوصول إلى الصور المعقدة؟

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