الصور

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

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

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

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

قد تسأل نفسك:

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

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

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

الصور الزخرفية

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

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

قيمة alt فارغة أو غير متوفّرة

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

تم ضبط الدور على 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 بشكل دلالي، لذا تتجاهلها التكنولوجيات المساعدة تلقائيًا.

إذا كانت SVG صورة زخرفية، لا بأس في ذلك، إذ ستتجاهلها التكنولوجيا المساعدة كما هو متوقّع. أما إذا كان ملف SVG عبارة عن صورة معلوماتية، فأضِف ARIA role="img" إلى العنصر، لكي تتعرّف عليه التكنولوجيات المساعدة كصورة.

ثانيًا، لا تستخدم عناصر <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 أو &) واستخدِم شرطات بين الكلمات بدلاً من الشرطات السفلية في أسماء الصور أو النص البديل.
• استخدِم علامات الترقيم الصحيحة كلّما أمكن. بدون ذلك، ستظهر أوصاف الصور وكأنّها جملة طويلة جدًا لا تنتهي.
• اكتب النص البديل كما لو كنت إنسانًا وليس روبوتًا. لا يفيد ازدحام الكلمات الرئيسية أي شخص، بل ستزعج المستخدمين الذين يستعينون بقارئات الشاشة، وستفرض عليك خوارزميات محركات البحث عقوبات.