الـ Landmarks والعناوين

وصف لي سمير ذات مرة صفحة سيئة البناء بأنها «دليل هاتف مُزّقت منه الأسماء». كل شيء موجود، لكن لا شيء يخبره أين ينتهي جزء ويبدأ التالي. والصفحة الرئيسية في Ticketly هي ذلك بالضبط: كل كتلة فيها div، وأكبر نص فيها div بخط كبير. يرى المستخدم المبصر ترويسة وقائمة وعنوان المهرجان وقائمة الفنانين وتذييلًا. أما قارئ الشاشة فيرى سيلًا واحدًا طويلًا من النص.

الـ Landmarks: مناطق الصفحة

في HTML عناصر تصف دور منطقة كاملة من الصفحة. يربط المتصفّح كلًّا منها بـ landmark (معلم) في ARIA، وتتيح قارئات الشاشة للمستخدمين عرض قائمة بالـ landmarks أو القفز بينها (مفتاح D في NVDA، والـ rotor في VoiceOver).

هذا هيكل Ticketly قبل الإصلاح وبعده:

<div class="top">
  <div class="logo">Ticketly</div>
  <div class="links"><a href="/events">Events</a> <a href="/faq">FAQ</a></div>
</div>
<div class="content">
  <div class="title">Harbour Lights 2026</div>
  …
</div>
<div class="bottom">© 2026 Ticketly · <a href="/terms">Terms</a></div>

<header>
  <a href="/" class="logo">Ticketly</a>
  <nav aria-label="Site">
    <a href="/events">Events</a> <a href="/faq">FAQ</a>
  </nav>
</header>
<main>
  <h1>Harbour Lights 2026</h1>
  …
</main>
<footer>© 2026 Ticketly · <a href="/terms">Terms</a></footer>

لا يتغيّر التصميم المرئي إطلاقًا؛ فهذه العناصر ليس لها تنسيق خاص سوى display: block. الذي يتغيّر هو شجرة إمكانية الوصول: يستطيع سمير الآن أن يضغط D ليصل إلى “main landmark” ويبدأ قراءة محتوى المهرجان، متخطّيًا الترويسة بالكامل.

تسمية المناطق، وكم منها تستخدم

عنصر <section> وحده مجرد حاوية عامة. أعطِه اسمًا فيصبح landmark من نوع region يظهر في قائمة الـ landmarks. وأنظف طريقة هي أن تشير إلى عنوانه هو، فلا يمكن أن يفترق الاسم عن النص المرئي أبدًا:

<section aria-labelledby="tickets-heading">
  <h2 id="tickets-heading">Tickets</h2>
  …
</section>

لكن لا تحوّل كل section إلى region. الـ landmarks تعمل مثل قائمة فصول الكتاب: خمسة إلى ثمانية مداخل مفيدة، أما ثلاثون فلا. القاعدة العملية أن يعيش كل جزء من المحتوى داخل landmark ما (تنبّه أدوات الفحص الآلي إلى النص الذي لا يقع داخل أي landmark)، وألا تحصل على landmark خاص بها إلا المناطق الكبيرة المميّزة التي قد يرغب المستخدم في القفز إليها.

العناوين: المخطّط الذي يتنقّل فيه الناس

الـ landmarks هي غرف الصفحة؛ والعناوين هي اللافتات على أبوابها. يجد معظم مستخدمي قارئ الشاشة المحتوى بالقفز من عنوان إلى عنوان (H في NVDA وJAWS، أو من 1 إلى 6 لمستوى محدّد)، أو بفتح قائمة بكل العناوين والكتابة لتصفيتها. وهذه القائمة لا تفيد إلا إذا شكّلت العناوين مخطّطًا حقيقيًا.

ثلاث قواعد تغطّي الغالبية العظمى من الحالات:

1. عنوان h1 واحد يقول ما هي الصفحة. في Ticketly هو “Harbour Lights 2026”، لا الشعار.
2. المستويات تصف التداخل. الأقسام الفرعية لقسم ما تكون أعمق منه بمستوى واحد. الصعود مقبول (من h3 إلى h2)؛ أما تخطّي المستويات نزولًا (من h2 إلى h4) فيوحي بمستوى مفقود.
3. تحت كل عنوان محتوى، وكل جزء من المحتوى يستحق أن يُعثر عليه له عنوان.

تستخدم منطقة التذاكر في Ticketly العنصرين h4 وh5 لأن مصمّمًا أراد نصًا أصغر. أصلح البنية أولًا، ثم نسّق:

<h2>Tickets</h2>
<h3 class="pass-title">Friday pass</h3>
<h3 class="pass-title">Weekend pass</h3>

.pass-title {
  font-size: 1rem;
  font-weight: 600;
}

ولا تنسَ عنصر <title> للصفحة أيضًا. إنه أول ما يُعلنه قارئ الشاشة حين تُحمَّل الصفحة، وهو ما يظهر في التبويبات وسجلّ التصفّح (2.4.2 Page Titled). ضع الجزء المحدّد أولًا: <title>Harbour Lights 2026 tickets · Ticketly</title>.

بعد أن صار الهيكل في مكانه، يتناول الدرس التالي الأجزاء التي ينقرها المستخدمون فعلًا: الأزرار والروابط، وعناصر الـ div القابلة للنقر التي تتظاهر بأنها هذا وذاك.