HTML وCSS / الأساسيات / الدرس 3
الصور والقوائم وجداول البيانات
مثل البدائل والمعلومات المجمعة وعلاقات الجداول دون الاعتماد على المظهر وحده.
في هذه الصفحة
أهداف الدرس
- البدائل تتبع الغرض
- اختيار بنية القائمة عن قصد
- تقييم المعلومات بطرائق متعددة
البدائل تتبع الغرض
ينقل النص البديل غرض الصورة ضمن السياق. تستخدم الزخرفة alt="" لتجنب معلومات زائدة لدى التقنيات المساعدة. تحتاج الصورة المفيدة مكافئا موجزا يرتبط بالمهمة، وقد يحتاج المخطط شرحا أو جدولا قريبا. لا تصف كل بكسل ولا تبدأ كل بديل بعبارة «صورة لـ». إذا كانت الصورة المحتوى الوحيد لرابط فإن بديلها يسهم في اسم الرابط ويجب أن يوضح الوجهة. لا توفر خلفية CSS بديلا نصيا لعنصر img.
حجز المساحة وربط الشرح
تصف width وheight أبعاد الصورة الأصلية وتتيحان حجز نسبة أبعاد قبل التحميل لتقليل الحركة. تستطيع CSS جعل العرض مرنا. تجمع figure الصورة وfigcaption عندما يشكلان وحدة مستقلة، ولا تلزم كل صورة. يضيف الشرح سياقا دون تكرار البديل كاملا. ميز فشل عنوان المورد عن غياب البديل؛ الأول مشكلة تسليم والثاني مشكلة معلومات. اختبر التحميل وغياب المورد منفصلين.
اختيار بنية القائمة عن قصد
تجمع ul عناصر متكافئة دون ترتيب لازم، وتعبر ol عن تسلسل مهم كالخطوات أو الترتيب. تربط dl المصطلحات بأوصافها وتفيد الملخصات. تبقى البنى مفهومة عند إزالة التعداد البصري. يستخدم المثال تسلسلا لعملية تسجيل لأن عكسه يغير المهمة. ضع قائمة فرعية داخل عنصرها الأب، ولا تنشئها شقيقة غير مرتبطة. لا تستبدل القائمة الحقيقية برموز تعداد داخل فقرات.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ordered process</title>
</head>
<body>
<main><h1>Join the workshop</h1><ol><li>Read the requirements.</li><li>Choose a session.</li><li>Review your registration.</li></ol></main>
</body>
</html>
Three ordered registration steps.تعبر القائمة المرقمة عن تسلسل مطلوب ببنية أصلية، ويمكن تغيير التباعد دون إضاعة العلاقة. النتيجة المتوقعة: ثلاث خطوات تسجيل مرتبة.
توضيح علاقات الجدول
يمثل الجدول علاقات الصفوف والأعمدة لا تخطيط الصفحة. استخدم caption لهوية البيانات وth مع scope للرؤوس البسيطة. لا تصبح td العريضة بصريا رأسا دلاليا. يضم المثال رؤوس أعمدة وجسما بسيطا لربط العدد بالجلسة. تحتاج الجداول متعددة المستويات علاقات أدق وقد يفضل تبسيطها. احفظ العلاقات داخل غلاف تمرير على الشاشة الضيقة، ولا تحول الخلايا إلى بطاقات منفصلة دون معنى مكافئ.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Accessible table</title>
<style>
th, td { padding: .5rem; border: 1px solid #555; } table { border-collapse: collapse; }
</style>
</head>
<body>
<main><h1>Session availability</h1><table><caption>Morning workshop seats</caption><thead><tr><th scope="col">Session</th><th scope="col">Seats remaining</th></tr></thead><tbody><tr><th scope="row">HTML</th><td>8</td></tr><tr><th scope="row">CSS</th><td>5</td></tr></tbody></table></main>
</body>
</html>
HTML has 8 seats; CSS has 5 seats.تربط رؤوس الصفوف والأعمدة كل عدد بموضوعه، وتسمي التسمية مجموعة البيانات وتساعد الحدود في المسح. النتيجة المتوقعة: لـHTML ثمانية مقاعد ولـCSS خمسة.
تقييم المعلومات بطرائق متعددة
افحص الصور دون تحميل والقوائم دون علامات والجداول مع التكبير. اسأل ما المعلومات الباقية لا مدى التشابه بالصورة التصميمية. لا تنسب إلى الجدول قيما غير موجودة، ولتحدد التسمية البيانات دون تكرار زائد. ضع الوحدة في الرأس لتمييز الدقائق من المبالغ. وضح وقت تحديث البيانات ومعناها في المحتوى لا اللون أو اسم الصورة. تحتاج الإتاحة قرارا تحريريا إلى جانب الوسوم، فلا يكفي التحقق الآلي.
الأخطاء الشائعة وإصلاحها
لا تملك صورة مرتبطة اسما مفيدا للرابط
- لماذا يحدث؟
- يصف البديل الزخرفة بدل الوجهة.
- كيف تصلحه؟
- قدم بديلا يحدد غرض الانتقال.
- كيف تتجنب تكراره؟
- راجع البديل في سياق الرابط.
لا تعلن الخلية العريضة رأسا
- لماذا يحدث؟
- استُبدل الترميز بالوزن البصري.
- كيف تصلحه؟
- استخدم th وعلاقات الرؤوس المناسبة.
- كيف تتجنب تكراره؟
- افحص العلاقات لا المظهر وحده.
يقفز المحتوى عند وصول الصورة
- لماذا يحدث؟
- لم تحجز أبعاد أو نسبة مناسبة.
- كيف تصلحه؟
- حدد الأبعاد الصحيحة وتحجيما مرنا.
- كيف تتجنب تكراره؟
- اختبر التحميل البطيء مبكرا.
اختبر فهمك
1. تكرر أيقونة النص المجاور «تنزيل التقرير». ما بديلها عادة؟
اعرض الحل المشروح
إذا سمى النص الرابط وكانت الأيقونة لا تضيف معلومة فاستخدم alt="". يبقى اسم الرابط مفيدا دون تكرار. تحقق من كونها زائدة فعلا؛ فقد تحتاج أيقونة حالة تحمل معلومة إضافية معالجة أخرى.
2. حول مقارنة أسعار بعمودين من فقرات مصطفة إلى جدول بسيط.
اعرض الحل المشروح
أضف caption للمقارنة ورأسي عمود للخطة والسعر الشهري وصفا لكل خطة، وضع العملة أو وحدة الفوترة في الرأس. تمثل البنية العلاقات مباشرة بدلا من فراغات تنهار أو تفقد معناها عند القراءة الخطية.
أهم ما تعلمته
- تصف البدائل الغرض ضمن السياق.
- استخدم القوائم والجداول للعلاقات الحقيقية.
- احجز مساحة الصورة دون فرض تخطيط ثابت.