الصور

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

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

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

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

يمكنك طرح الأسئلة التالية على نفسك:

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

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

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

صور زخرفية

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

إذا قررت أنّ إحدى الصور مزخرفة، يجب أن تكون مخفية آليًا. من نظام تتبع مقدم الطلب (ATs). عند برمجة صورة لتكون مخفية، فإنها تشير إلى التقنية المساعدة بأن لا يلزم توفير صورة لفهم محتوى الصفحة أو سياقها أو الإجراء الذي يتم عرضها فيه. هناك العديد من الطرق لإخفاء الصور، بما في ذلك استخدام نص بديل فارغ أو فارغ تطبيق 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 دلاليًا، ستتخطى AT فوقها افتراضيًا. إذا كانت لديك صورة مزخرفة، فلن يشكّل هذا الأمر مشكلة، إذ إنّ التكنولوجيا المساعدة ستتجاهل على النحو المنشود. وإذا توفّرت لديك صورة تتضمن معلومات، يمكنك استخدام 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"></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 من حيث أنّها تجمع العناصر دلاليًا، ما يشكّل ارتباطًا أقوى بين الصورة ووصفها. تضمن إضافة role="group" ARIA التوافق مع متصفّحات الويب القديمة التي لا تتيح استخدام الدلالات الأصلية للعنصر <figure>.

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

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

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

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

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

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

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