HTML الدلالي كأساس
استخدم عناصر HTML الأصلية مثل button وnav والعناوين للحصول على إتاحة مضمّنة مجانًا قبل اللجوء إلى ARIA.
HTML الدلالي كأساس درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.
HTML الدلالي يوفّر إمكانية الوصول مجانًا
يمنحك استخدام عنصر HTML المناسب دعم لوحة المفاتيح، وإعلانات قارئ الشاشة، وأدوار ARIA الصحيحة مجانًا. تنشأ معظم مشكلات إمكانية الوصول من استخدام div مع JavaScript بدلًا من العنصر الأصلي.
button مقابل div مع onClick
يمكن التركيز على <button>، ويعلن قارئ الشاشة عن كونه «زرًا»، ويستجيب للنقر عند الضغط على Enter أو Space، ويعمل مع إرسال النموذج. أما <div onClick> فلا يوفّر أيًا من ذلك.
<!-- BAD: not keyboard accessible, not announced -->
<div class="btn" onclick="submit()">Save</div>
<!-- GOOD: full accessibility for free -->
<button type="button" onclick="submit()">Save</button>استخدم button للأزرار وa للروابط
إذا كان الإجراء ينقلك إلى عنوان URL، فاستخدم <a href>. وإذا كان الإجراء ينفّذ شيئًا داخل الصفحة، فاستخدم <button>. لا تستخدم الروابط كأزرار (من دون href وباستخدام onclick فقط) — فهذا يربك التقنيات المساعدة.
العناوين تنشئ مخططًا للوثيقة
استخدم h1 إلى h6 بالترتيب لإنشاء مخطط منطقي. يتنقل مستخدمو قارئات الشاشة عبر العناوين — فتجاوز المستويات (h1 -> h3) ينشئ فجوات مربكة.
<h1>Article Title</h1>
<h2>Section One</h2>
<h3>Subsection</h3>
<h2>Section Two</h2>
<!-- BAD: skipping levels -->
<h1>Title</h1>
<h4>Section</h4>عناصر المعالم
تتيح عناصر المعالم في HTML5 (header وnav وmain وaside وfooter) لمستخدمي قارئات الشاشة الانتقال بين المناطق الرئيسية. استخدم عنصر <main> واحدًا لكل صفحة.
<header>
<nav>
<a href="/">Home</a>
</nav>
</header>
<main>
<h1>Page Title</h1>
<article>...</article>
<aside>Sidebar</aside>
</main>
<footer>...</footer>عناصر القوائم
استخدم <ul> للقوائم غير المرتبة، و<ol> للقوائم المرتبة، و<dl> لقوائم التعريفات. يعلن قارئ الشاشة عن «قائمة من N عناصر» — وهي إشارة تنقّل مفيدة.
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Cherries</li>
</ul>
<!-- Announced: 'list with 3 items' -->النماذج: أضف label لكل حقل إدخال
يحتاج كل حقل إدخال إلى <label> مرتبط به. يربط زوج for/id بينهما — فعند النقر على التسمية ينتقل التركيز إلى حقل الإدخال، ويعلن قارئ الشاشة عن التسمية عند وصول التركيز.
<label for="email">Email</label>
<input id="email" name="email" type="email">
<!-- Or wrap (no for/id needed): -->
<label>
Email
<input name="email" type="email">
</label>fieldset وlegend للمجموعات
اجمع حقول الإدخال المرتبطة (مثل أزرار الاختيار) باستخدام <fieldset> و<legend>. يعلن قارئ الشاشة عن legend في كل مرة ينتقل فيها التركيز إلى أحد الحقول ضمن المجموعة.
<fieldset>
<legend>Choose a plan</legend>
<label><input type="radio" name="plan" value="free"> Free</label>
<label><input type="radio" name="plan" value="pro"> Pro</label>
</fieldset>عناصر table للبيانات الجدولية
استخدم <table> مع <thead> و<tbody> و<th scope="col"> — ولا تستخدم الجداول أبدًا لتنسيق التخطيط. يتنقل قارئ الشاشة بين الخلايا في بُعدين ويعلن عن العناوين.
article وsection وfigure
<article>: محتوى مستقل (منشور مدونة أو تعليق). <section>: تجميع موضوعي له عنوان. <figure> مع <figcaption>: وسائط مصحوبة بتعليق.
استخدم ARIA عند الضرورة فقط
القاعدة الأولى لـ ARIA هي: لا تستخدم ARIA. يفوز HTML الأصلي دائمًا. استخدم ARIA فقط عندما لا يناسب عنصر دلالي أي أداة مخصّصة لديك (مثل combobox أو tabs أو tree).
تحقق سريع
لماذا يُفضَّل استخدام <button onclick="..."> بدلًا من <div onclick="...">؟
مراجعة: HTML الدلالي
استخدم العنصر المناسب: button للإجراءات، وa للتنقّل، وh1-h6 بالترتيب لإنشاء المخطط، وعناصر المعالم (header وnav وmain وfooter)، وul/ol للقوائم، وlabel لكل حقل إدخال، وfieldset/legend لمجموعات أزرار الاختيار، وtable لجداول البيانات. يوفّر HTML الأصلي إمكانية الوصول مجانًا. استخدم ARIA كحل أخير.
الأسئلة الشائعة
هل درس «HTML الدلالي كأساس» مجاني؟
نعم — نص درس «HTML الدلالي كأساس» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.
ماذا ستتعلم في «HTML الدلالي كأساس»؟
استخدم عناصر HTML الأصلية مثل button وnav والعناوين للحصول على إتاحة مضمّنة مجانًا قبل اللجوء إلى ARIA. تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟
لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «HTML الدلالي كأساس»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟
نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.