ربما تكون صورتك غير زخرفية

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

  
<img alt="" src="/images/cat.jpg" />

  
<img alt=" " src="/images/dog.jpg" />

ماذا تعني كلمة "زخرفي"؟

يشير إلغاء الصورة إلى أنها لأغراض الديكور فقط.

في هذا السياق ، يعني التزيين أن الصورة لا تنقل بصريًا معلومات مهمة لفهم الغرض من الصفحة أو العرض ، وسبب تضمين الصورة كجزء من ذلك.

الزخرفة لا تعني أن الصورة تحتوي على محتوى يعتبر زخرفة.

"

على سبيل المثال ، سيرغب موقع الويب الذي يبيع ورق الحائط في الحصول على أوصاف بديلة لعينات من ورق الحائط:

 <a href="/products/umbrella?variant=73849024783051"> <img alt="Small red and white illustrated umbrellas on a teal background." src="/images/73849024783051.png" /> </a>

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

 <figure role="figure" aria-label="View of Rotterdam, by Cornelis Boumeester. Date: about 1700–20. Accession Number: 2005.1057. In Dutch homes, tiles typically served utilitarian purposes, such as covering the walls of kitchens, utility rooms, passageways, and fireplace surrounds."> <img alt="A tile painting, composed of 33 Delft tiles forming a view of the port of Rotterdam. Set in a modern mahogany frame, with gilded inscription on bottom border." src="/collection/w0895/2005-1057.png" /> <figcaption> View of Rotterdam, by Cornelis Boumeester. Date: about 1700–20. Accession Number: 2005.1057. In Dutch homes, tiles typically served utilitarian purposes, such as covering the walls of kitchens, utility rooms, passageways, and fireplace surrounds. </figcaption> </figure>

تأكد من أن الوصف البديل الخاص بك يتضمن علامات الترقيم أيضًا!

لماذا تريد تزيين صورة؟

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

تقنيات التخطيط القديمة

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

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

تقنيات التصميم القديمة

قبل ظهور خصائص CSS مثل box-shadow ، كان على المطورين استخدام تقنيات تقطع التصميم الزخرفي لجعله يعمل مع محتوى غير محدد الارتفاع أو العرض. كانت هذه التقنية تسمى التحجيم المكون من 9 شرائح ، وهو مصطلح يشير إلى الأقسام التسعة للمحتوى التي قد تحتاج إلى إنشائها.

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

إعلانات زائدة عن الحاجة

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

الرموز التكميلية

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

 <button type="button"> <img src="icon-print.svg" alt="" /> Print </button>

إذا كان المكون يستخدم رمزًا فقط ، فيجب استخدام الصورة نفسها لإنشاء اسم يمكن الوصول إليه:

 <button type="button"> <img src="icon-print.svg" alt="Print." /> </button>

لاحظ أن تسمية النص المرئي هي الأسلوب المفضل. يمكن ترجمة تسمية النص المرئي وتوصيل الغرض بشكل مباشر أكثر.

الاستخدام المعاصر

تقنيات تصميم وتصميم CSS الحديثة تعني أن وضع الصورة أصبح الآن مقصودًا للغاية. هذا يعني أنه إذا تم استخدام صورة ، فستحتاج على الأرجح إلى وصف بديل.

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

طرق أخرى لعرض الصور

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

عنصر picture

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

عنصر picture عبارة عن حاوية لعناصر source و img . استخدم السمة alt لعنصر img لتقديم وصف بديل لعنصر picture الأصل.

 <a href="/product/9091866/color/3"> <picture> <source type="image/avif" /> <img alt="A black ankle-length boot with metal eyelets, yellow stitching, and a padded collar and tongue." src="9091866-3.png" /> </picture> </a>

صور الخلفية

يمكننا استخدام CSS للإعلان عن صورة كخلفية لعنصر HTML. غالبًا ما يستخدم هذا لإضافة إحساس بالملمس إلى التصميم.

ومع ذلك ، هناك أسلوب شائع آخر وهو استخدام صورة background-image لوضع صورة بطريقة لا يتحكم فيها المطور في حجم الصورة التي يقوم شخص ما بتحميلها. ستضمن background-image ، جنبًا إلى جنب مع الخصائص الأخرى مثل background-size عرض محتوى بحجم غير معروف دون كسر التصميم.

في مثل هذا السيناريو ، قد يكون صديقنا القديم spacer.gif مفيدًا مرة أخرى!

SVG مضمن

يمكن عرض SVG إما عن طريق الارتباط بها عبر سمة src في عنصر img ، أو بوضع كود SVG في الصفحة أو العرض.

إذا كنت تستخدم SVG مضمنًا ، فأنت بحاجة إلى استخدام عنصر title SVG (ومن المحتمل desc ) بدلاً من سمة alt .

 <svg role="img" aria-labelledby="icon-bookmark-desc" xmlns="https://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <title>Bookmark.</title> <path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z"/> </svg>

خبرة مكافئة

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

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

مزيد من القراءة على SmashingMag:

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