إتاحة HTML
الدرس السابق datalist ربط اقتراحات بحقل واحد. الإتاحة مهمة أوسع: الصفحة كلها قابلة للاستخدام بلوحة المفاتيح وقارئات الشاشة والتكبير. HTML الجيد — معالم وتسميات وalt وعناوين وأزرار حقيقية — هو الأساس.
لماذا تهم الإتاحة
بعضهم يتصفح بلا فأرة أو يكبّر النص أو يستمع للصفحة. رسم بلا alt صامت؛ بحث بلا تسمية بلا اسم؛ div قابل للنقر قد لا يحصل على تركيز. الوسم الشامل يساعد الجميع. غالباً عادات أثناء كتابة HTML.
إجابة مباشرة
1) مناطق دلالية وعناصر أصلية. 2) label لكل عنصر مع for/id. 3) alt معنوي للصور المفيدة؛ alt فارغ للزينة فقط. 4) h1 واضح وتداخل منطقي بلا قفزات. 5) Tab للروابط والأزرار. 6) ARIA عندما لا يكفي HTML الأصلي — أصلح البنية أولاً.
📊 Accessibility habits beginners use
| Habit | Why it helps | Beginner tip |
|---|---|---|
| Semantic landmarks | Tools jump to regions | Prefer main/nav over anonymous divs |
| Labels on controls | Names fields clearly | for= must match the control id |
| Alt on images | Describes non-text content | Say what the image communicates |
| Logical headings | Outlines the page | Do not jump h1 → h4 for style |
| Keyboard-operable controls | Not everyone uses a pointer | Prefer button/a over clickable divs |
| Native before ARIA | Roles come built-in | Repair HTML; do not wallpaper broken markup |
بحث مسمّى داخل معلم
شريط بحث صغير: nav باسم متاح، حقل مسمّى وزر حقيقي. قارئ الشاشة يعلن المنطقة واسم الحقل؛ Tab يصل للإدخال والزر.
<nav aria-label="Site">
<label for="q">Search</label>
<input id="q" name="q" type="search">
<button type="submit">Search</button>
</nav>
قراءة مثال البحث
- nav معلم تنقل؛ aria-label يميّز عند تعدد nav
- label for وinput id يعطيان اسماً متاحاً
- name للإرسال — منفصل عن الاسم المتاح
- type=search عنصر أصلي
- button حقيقي يُفعَّل بـ Enter/Space
- الدرس السابق للاقتراحات؛ هنا التسمية والوصول
عناوين وalt وزر حقيقي
مقتطف ثانٍ: h1 وh2 متداخل وصورة مفيدة بـ alt وصفي وفعل كـ button. عكس روابط «انقر هنا» والرسوم بلا وصف.
<main>
<h1>Monthly sales</h1>
<h2>Q1 results</h2>
<img src="chart.png" alt="Bar chart: sales rose from 10 to 18">
<p>Sales climbed through March.</p>
<button type="button">Download report</button>
</main>
قراءة مثال البنية
- h1 واحد لموضوع الصفحة؛ h2 تحته بلا قفز إلى h4
- alt الرسم يقول الخلاصة لا مجرد «صورة»
- الزينة فقط تستخدم alt فارغ؛ هذا الرسم مفيد
- الفعل button لا div
- main يعلّم المحتوى الرئيسي
- الدرس التالي JavaScript؛ احتفظ بهذه العادات
ماذا تصلح أولاً
- حقول بلا اسم: أضف label قبل placeholder
- صور مفيدة صامتة: اكتب alt
- عناصر مزيفة: استبدل div القابل للنقر بـ button أو a
- فوضى عناوين: أعد مخططاً منطقياً
- رقع ARIA فقط: استخدم العنصر الأصلي إن وُجد
- طرق مسدودة للكيبورد: كل ما يُنقر يجب أن يصل بـ Tab
تمرين — عادات على مستوى الصفحة
- مثال البحث؛ احذف label ثم أعد for/id
- أضف nav ثانياً وaria-label مميز لكل منهما
- اجعل alt الرسم فارغاً ثم أعد alt ذا معنى
- اقفز عمداً من h1 إلى h4 ثم أصلح إلى h1→h2
- استبدل الزر بـ div ثم أعد button وجرّب Tab
- جملة: الإتاحة تبدأ ببنية HTML لا بورق ARIA
- الدرس التالي يضيف script — احتفظ بالتسميات والأزرار
أخطاء شائعة
- روابط «انقر هنا» بلا سياق
- صور مفيدة بلا alt أو بـ alt فارغ
- div قابل للنقر يتجاهل لوحة المفاتيح
- مستويات عناوين للحجم البصري فقط
- placeholder بدل label
- أدوار ARIA على وسم مكسور
- نسيان أن datalist السابق احتاج label أيضاً
ملخص
- الإتاحة بنية قابلة للاستخدام لمزيد من الناس والأدوات
- المعالم والتسميات وalt والعناوين والأزرار الأصلية مهمة
- الوصول بالكيبورد جزء من العمل
- HTML متين قبل ARIA ثقيل
- datalist كان عنصراً واحداً؛ هذه الصفحة كاملة
- التالي: إضافة JavaScript إلى HTML
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى