HTML الدلالي: صفحة يفهمها الإنسان والمتصفح
استخدم العناصر الصحيحة لبناء هيكل واضح لقارئ الشاشة ومحرك البحث، بدل تحويل الصفحة كلها إلى div وعلاجها بـ ARIA.
ابدأ بالمعنى قبل التنسيق
HTML ليست حاويات لتطبيق CSS فقط؛ هي وصف لبنية الوثيقة. عندما تستخدم header وnav وmain وarticle وfooter، يستطيع قارئ الشاشة الانتقال بين المناطق، وتفهم محركات البحث أين يوجد المحتوى الأساسي، ويقرأ المطور التالي الشيفرة دون تخمين.
لا تحتاج كل مجموعة إلى section. استخدم section عندما يكون لها موضوع وعنوان يصفها، واستخدم div عندما تكون الحاوية لأغراض تنسيق بلا معنى مستقل. أما article فيمثل قطعة يمكن أن تقف وحدها مثل دليل أو خبر أو تعليق.
العناوين خريطة وليست زخرفة
يجب أن تحتوي الصفحة عادةً على H1 واضح يصف غرضها، ثم H2 للأقسام الرئيسية وH3 للأجزاء التابعة. لا تختر H4 لأن مظهره أصغر؛ عدّل الحجم في CSS. القفز العشوائي بين المستويات يجعل خريطة الصفحة مربكة لمن يتنقل بالعناوين.
اكتب عنوانًا محددًا بدل «مقدمة» كلما أمكن. عنوان مثل «كيف يختار المتصفح العنصر الدلالي» يخبر القارئ بما سيجده ويساعده على تقرير إن كان يحتاج قراءة القسم.
<header>
<nav aria-label="التنقل الرئيسي">...</nav>
</header>
<main>
<article>
<h1>HTML الدلالي</h1>
<section>
<h2>اختيار العنصر المناسب</h2>
<p>...</p>
</section>
</article>
</main>
<footer>...</footer>التفاعل بلوحة المفاتيح
الرابط ينقل المستخدم إلى عنوان، والزر ينفذ فعلًا في الصفحة. كلاهما يحصل على سلوك لوحة مفاتيح وتركيز ودلالات وصول من المتصفح. تحويل div إلى زر عبر onClick يفرض عليك إعادة بناء كل هذا، وغالبًا تنسى Enter أو Space أو حالة التعطيل.
اربط label بكل input، واستخدم fieldset وlegend لمجموعة خيارات مترابطة. اجعل رسالة الخطأ قريبة من الحقل ومحددة، ولا تعتمد على اللون وحده. ثم اختبر الصفحة باستخدام Tab وShift+Tab وEnter دون فأرة.
- •يجب أن ترى مؤشر تركيز واضحًا.
- •يجب أن يكون ترتيب التركيز مطابقًا للترتيب المنطقي للمحتوى.
- •لا تستخدم tabindex موجبًا لإصلاح ترتيب DOM سيئ.
ARIA تكمل HTML ولا تستبدله
القاعدة الآمنة هي استخدام عنصر HTML أصلي أولًا. أضف ARIA عندما لا يوجد عنصر يصف النمط المركب أو عندما تحتاج اسمًا يمكن الوصول إليه لا يظهر بصريًا. استخدام role=button على div أقل متانة من button، وإضافة aria-label غير صحيح قد تستبدل اسمًا واضحًا باسم مربك.
افحص شجرة الوصول في أدوات المطور، لكن لا تكتف بها. جرب قارئ شاشة عند بناء مكوّنات مهمة، واستخدم فحصًا آليًا لاكتشاف الأخطاء البسيطة. الوصول ليس قائمة تنجز مرة واحدة؛ هو جزء من تعريف اكتمال الواجهة.
المراجع ومزيد من القراءة
عن المؤلف
يراجع أسامة زيدان محتوى كود هاب بهدف تقديم شرح عربي واضح يربط المفاهيم البرمجية بالقرارات التي يواجهها المتعلم أثناء التطبيق.
صفحة المؤلف