القوائم والصور في HTML: أمثلة عملية مع النص البديل

تحسين القوائم والصور من أجل الفهم وإمكانية الوصول

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

كتابة alt مفيد

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

الأبعاد والأداء

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

أخطاء شائعة في القوائم

• استخدام أسطر نصية مع شرطات بدل قائمة HTML عندما تكون العناصر قائمة فعلية.
• وضع فقرات طويلة داخل عنصر قائمة دون تقسيم أو تنظيم.
• استخدام أرقام مكتوبة يدويًا بدل ol عندما يكون الترتيب جزءًا من المعنى.
• ترك صورة معلوماتية بلا alt أو استخدام اسم ملف غير مفهوم كنص بديل.

راجع مرجع القوائم في MDN ودليل WAI للصور لتحديد النص البديل وفق سياق الاستخدام.

قائمة نشر للصور والقوائم في مقالات المحتوى

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

وصف الصور وفق الحاجة

الصورة التي تعرض لقطة شاشة أو مخططًا تقنيًا تحتاج وصفًا يوضح المعلومة المهمة، وليس فقط «صورة توضيحية». وإذا كانت الصورة معقدة، فقدم شرحًا أطول في النص المحيط أو في وصف مستقل. لا تجعل alt يحمل كل تفاصيل المقال؛ الهدف منه توفير بديل مفيد للصورة عند عدم رؤيتها.

التوافق مع الأداء

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

فحص نهائي

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

راجع دليل WAI للصور ومرجع القوائم المرتبة في MDN.

تنظيم القوائم والصور لخدمة القراءة

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

اكتب عناصر قائمة متوازنة

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

اختر النص البديل للصورة وفق وظيفتها

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

راجع الحجم والسياق

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

راجع دليل WAI للصور ومرجع MDN للقوائم. الدلالة الجيدة تجعل المحتوى أوضح للناس والتقنيات التي تقرؤه بطرق مختلفة.

فحص جودة القوائم والصور في صفحات المحتوى

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

افحص الصور في سياقها

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

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