الصور

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

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

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

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

قد تسأل نفسك:

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

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

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

صور زخرفية

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

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

فارغة أو خالية alt

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

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

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

<!-- 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 مُشفَّرة من الناحية الدلالية، سيتخطّاها AT تلقائيًا. إذا كانت لديك صورة زخرفية، لن يشكّل ذلك مشكلة، لأنّ تكنولوجيا التجميع الذكي ستتجاهلها على النحو المطلوب. ولكن إذا كانت لديك صورة غنية بالمعلومات، يجب إضافة role="img" ARIA إلى النمط لكي تتعرّف عليه الخدمة المساعدة (AT) على أنّها صورة.

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

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

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

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

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

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

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

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

<div title="Navigate to the homepage">
   <a href="/">
      <img src=".../Ladybug_Logo.png" alt="Lovely Ladybugs for your Lawn"/>
   </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>. يمكنك ربط الصورة آليًا بمعرّف يحتوي على وصف أطول. تؤدي هذه الطريقة إلى إنشاء ارتباط قوي بين الصورة والوصف الكامل. يمكن عرض الوصف الموسّع على الشاشة أو مخفي بصريًا، ولكن يمكنك إبقاؤه مرئيًا لدعم المزيد من المستخدمين.

هناك طريقة أخرى لتجميع الأوصاف البديلة القصيرة مع وصف أطول، وهي استخدام العنصرَين<figure> و<figcaption>. تعمل هذه العناصر بالطريقة نفسها التي تعمل بها aria-describedby من حيث تجميع العناصر من الناحية الدلالية، ما يؤدي إلى تقوية العلاقة بين الصورة ووصفها.

تضمن إضافة ARIA role="group" التوافق مع الأنظمة القديمة في متصفّحات الويب التي لا تتوافق مع دلالات عنصر <figure>.

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

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

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

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

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

التحقّق من فهمك

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