العناوين ومعالم الصفحة
البنية هي التنقل
يمسح المبصرون الصفحة بحسب الحجم والتخطيط، أما مستخدمو قارئات الشاشة فيمسحونها بحسب البنية: يمكنهم فتح قائمة العناوين أو القفز بين مناطق المعالم. وإذا غابت البنية صارت الصفحة كتلة طويلة واحدة.
قواعد العناوين
- استخدم h1 واحدًا يسمّي الصفحة.
- لا تتخطَّ المستويات. يتبع h2 العنوانَ h3 لا h4.
- صِف القسم. تطلب WCAG 2.4.6 (العناوين والتسميات، AA) عناوين تصف الموضوع أو الغرض. «خيارات التوصيل» أفضل من «المزيد».
- لا تختر المستوى بحسب الحجم. اختره بحسب البنية ثم نسّقه بـ CSS.
في ملف التصميم سمِّ أنماط النص بحسب الدور (Heading 2) لا الحجم، ليصل المستوى الصحيح إلى المطورين.
معالم الصفحة
تُنشئ عناصر HTML البنيوية مناطق معالم يمكن للتقنيات المساعدة سردها.
ترويسة الموقع وتذييله: header وfooter
ترويسة الموقع ومعلومات الختام عند وضعها في المستوى الأعلى للصفحة.
عنصر nav
كتلة من روابط التنقل.
عنصر main
المحتوى الرئيسي. استخدم واحدًا في الصفحة.
محتوى جانبي: عنصر aside
محتوى مرتبط بالمحتوى الرئيسي لكنه منفصل عنه.
عند وجود أكثر من <code>;nav<;/code>; في الصفحة سمِّ كلًا منها بـ <code>;aria-label<;/code>;، مثل «الرئيسية» و«التذييل»، ليميز المستخدم بينها.
روابط التخطي
تشترط WCAG 2.4.1 (تجاوز الكتل، A) وسيلة لتخطي المحتوى المتكرر. والحل الشائع رابط «تخطَّ إلى المحتوى الرئيسي» يكون أول عنصر قابل للتركيز ويشير إلى عنصر <code>;main<;/code>;. ويمكن إخفاؤه حتى يحصل على التركيز.
- افحص مخطط العناوين بإضافة متصفح أو بشجرة إمكانية الوصول في أدوات المطوّر.
- اقرأ العناوين وحدها بصوت عالٍ. هل تحكي قصة الصفحة؟
تبدأ البنية في ملف التصميم. خطّط المخطط العام قبل الأسلوب البصري، فالمخطط الواضح يسهّل بناء التخطيط ومسحه.
- اكتب مخطط العناوين كقائمة متداخلة قبل رسم الصفحة.
- أضف إلى التصميم ملاحظات بمستوى العنوان والمعلم المقصود لكل كتلة.
- استخدم عناوين حقيقية لا فقرات عريضة لعناوين الأقسام.
- اجعل عنوان الصفحة في عنصر <code>;title<;/code>; فريدًا ومعبّرًا أيضًا.
المعالم والعناوين يكمل بعضها بعضًا: المعالم تعطي المناطق الكبيرة والعناوين التفاصيل داخلها.
المصادر
- W3C WAI. Page Structure Tutorial. https://www.w3.org/WAI/tutorials/page-structure/
- W3C. Understanding SC 2.4.1 Bypass Blocks. https://www.w3.org/WAI/WCAG22/Understanding/bypass-blocks.html
صيغ هذا الدليل بمساعدة الذكاء الاصطناعي اعتمادًا على معايير ومراجع عامة. وللنص الدقيق لأي معيار، ارجع إلى المصادر المذكورة أعلاه.