صور SVG التي يمكن الوصول إليها: أنماط مثالية لمستخدمي قارئ الشاشة

بينما تم تقديم Scalable Vector Graphics (SVGs) لأول مرة في أواخر التسعينيات ، فقد شهدوا انتعاشًا هائلاً في شعبيتها في العقد الماضي بسبب مرونتها الشديدة ودقتها العالية وخفتها النسبية في عالم يكون فيه النطاق الترددي والأداء مهمين أكثر من أي وقت مضى . أدت التطورات في JavaScript وإدخال استعلامات وسائط CSS مثل @ preferers-color-chart و @ preferers-low-motion إلى توسيع وظائف SVGs إلى ما هو أبعد من حالة استخدامها الأولية المتمثلة في عرض الصور المتجهية على موقع ويب.

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

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

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

أوصاف بديلة أساسية باستخدام علامة <img>

تستخدم المجموعة الأولى المكونة من أربعة أنماط علامة <img> المرتبطة بملف SVG. يعد هذا اختيارًا جيدًا للصور الأساسية غير المعقدة على موقع الويب أو التطبيق أو أي منتج رقمي آخر. في حين أن عيب استخدام هذا النمط هو أنه لا يمكنك التحكم بسهولة في العديد من العناصر المرئية أو الرسوم المتحركة باعتبارها SVG مضمنة ، يجب أن يعرض هذا النمط صورًا أخف وأسرع بشكل عام ويسمح بصيانة أسهل على SVGs التي تستخدمها في مواقع متعددة.

النمط رقم 1: <img> + alt="[words]"

 <img class="fox" alt="What does the fox say?" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg">

النمط رقم 2: <img> + role="img" + alt="[words]"

 <img role="img" class="fox" alt="What does the fox say?" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg">

النمط رقم 3: <img> + role="img" + aria-label="[words]"

 <img role="img" class="fox" aria-label="What does the fox say?" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg">

النمط رقم 4: <img> + role="img" + aria-labelledby="[ID]"

 <p class="visually-hidden">What does the fox say?</p> <img role="img" aria-labelledby="caption1" class="fox" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg">

أوصاف بديلة أساسية باستخدام علامة <svg>

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

النمط رقم 5: <svg> + role="img" + <title>

 <svg role="img" ...> <title>What does the fox say?</title> [design code] </svg>

النمط رقم 6: <svg> + role="img" + <text>

 <svg role="img" ...> <text class="visually-hidden" font-size="0">What does the fox say?</text> [design code] </svg>

النمط رقم 7: <svg> + role="img" + <title> + aria-describedby="[ID]"

 <svg role="img" ...> <title>What does the fox say?</title> [design code] </svg>

النمط رقم 8: <svg> + role="img" + <title> + aria-labelledby="[ID]"

 <svg role="img" aria-labelledby="fox8" ...> <title>What does the fox say?</title> [design code] </svg>

الأوصاف البديلة الموسعة باستخدام العلامة <svg>

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

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

اعتمادًا على نوع وكمية المعلومات التي تحتاج إلى إضافتها إلى SVG ، قد تفكر في اتباع نهج مختلف تمامًا.

النمط رقم 9: <svg> + role="img" + <title> + <text>

 <svg role="img" ...> <title>What does the fox say?</title> <text class="visually-hidden" font-size="0">Will we ever know?</text> [design code] </svg>

النمط رقم 10: <svg> + role="img" + <title> + <desc>

 <svg role="img" ...> <title>What does the fox say?</title> <desc>Will we ever know?</desc> [design code] </svg>

النمط رقم 11: <svg> + role="img" + <title> + <desc> + aria-labelledby="[ID]"

 <svg role="img" aria-labelledby="fox11 description11" ...> <title>What does the fox say?</title> <desc>Will we ever know?</desc> [design code] </svg>

النمط رقم 12: <svg> + role="img" + <title> + <desc> + aria-describedby="[ID]"

 <svg role="img" ...> <title>What does the fox say?</title> <desc>Will we ever know?</desc> [design code] </svg> 

الفائزون والخاسرون في نمط SVG

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

الأوصاف الأساسية البديلة باستخدام علامة <img> (المجموعة 1)

الأفضل في العرض

• النمط 2 : <img> + role="img" + alt="[words]"
• النمط 3 : <img> + role="img" + aria-label="[words]"

توخي الحذر

• النمط 4 : <img> + role="img" + aria-labelledby="[ID]"

لا ينصح

• النمط 1 : <img> + alt="[words]"

الأوصاف الأساسية البديلة باستخدام العلامة <svg> (المجموعة 2)

الأفضل في العرض

• النمط 5 : <svg> + role="img" + <title>
• النمط 8 : <svg> + role="img" + <title> + aria-labelledby="[ID]"

توخي الحذر

• النمط 7 : <svg> + role="img" + <title> + aria-describedby="[ID]"

لا ينصح

• النمط 6 : <svg> + role="img" + <text>

الأوصاف البديلة الموسعة باستخدام العلامة <svg> (المجموعة 3)

الأفضل في العرض

• النمط 11 : <svg> + role="img" + <title> + <desc> + aria-labelledby="[ID]"

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

توخي الحذر

• النمط 9 : <svg> + role="img" + <title> + <text>
• النمط 10 : <svg> + role="img" + <title> + <desc>
• النمط 12 : <svg> + role="img" + <title> + <desc> + aria-describedby="[ID]"

لا ينصح

• لم يفشل أي من الأنماط في هذه المجموعة تمامًا في الاختبارات.

نتائج الاختبار

تغليف

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

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

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

إذا كنت بحاجة إلى مساعدة إضافية لتحديد النمط الذي يجب استخدامه لبيئتك ، فراجع مقالة Good، Better، Best: Untangling The Complex of Accessible Patterns لمساعدتك على التنقل في المياه الصعبة للأنماط التي يمكن الوصول إليها. مسلحًا بكل هذه المعلومات وبقليل من الجهد ، فإن SVGs الخاصة بك في طريقها لتكون أكثر شمولاً للجميع.

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