Harbour Lights 2026
\nTwo nights of music on the old harbour wall, 12 and 13 June.
\nLine-up
\n- \n
- Nour Quartet \n
- The Saltmarsh Band \n
Tickets
\nFriday pass
\nSAR 180, standing.
\nWeekend pass
\nSAR 320, both nights.
\nوصف لي سمير ذات مرة صفحة سيئة البناء بأنها «دليل هاتف مُزّقت منه الأسماء». كل شيء موجود، لكن لا شيء يخبره أين ينتهي جزء ويبدأ التالي. والصفحة الرئيسية في Ticketly هي ذلك بالضبط: كل كتلة فيها div، وأكبر نص فيها div بخط كبير. يرى المستخدم المبصر ترويسة وقائمة وعنوان المهرجان وقائمة الفنانين وتذييلًا. أما قارئ الشاشة فيرى سيلًا واحدًا طويلًا من النص.
في HTML عناصر تصف دور منطقة كاملة من الصفحة. يربط المتصفّح كلًّا منها بـ landmark (معلم) في ARIA، وتتيح قارئات الشاشة للمستخدمين عرض قائمة بالـ landmarks أو القفز بينها (مفتاح D في NVDA، والـ rotor في VoiceOver).
\n| العنصر | \nدور الـ landmark | \nملاحظات | \n
|---|---|---|
<header> | \nbanner | \nفقط حين يكون جزءًا مباشرًا من الصفحة، لا داخل article أو aside أو main أو nav أو section | \n
<nav> | \nnavigation | \nسمِّه حين يوجد أكثر من واحد | \n
<main> | \nmain | \nواحد مرئي بالضبط في كل صفحة | \n
<aside> | \ncomplementary | \nمحتوى ذو صلة مثل الشريط الجانبي | \n
<footer> | \ncontentinfo | \nقاعدة النطاق نفسها التي تنطبق على header | \n
<form>، <section> | \nform، region | \nفقط حين يكون لها اسم متاح | \n
<search> | \nsearch | \nيلفّ نموذج البحث في الموقع | \n
هذا هيكل Ticketly قبل الإصلاح وبعده:
\n<div class=\"top\">\n <div class=\"logo\">Ticketly</div>\n <div class=\"links\"><a href=\"/events\">Events</a> <a href=\"/faq\">FAQ</a></div>\n</div>\n<div class=\"content\">\n <div class=\"title\">Harbour Lights 2026</div>\n …\n</div>\n<div class=\"bottom\">© 2026 Ticketly · <a href=\"/terms\">Terms</a></div><header>\n <a href=\"/\" class=\"logo\">Ticketly</a>\n <nav aria-label=\"Site\">\n <a href=\"/events\">Events</a> <a href=\"/faq\">FAQ</a>\n </nav>\n</header>\n<main>\n <h1>Harbour Lights 2026</h1>\n …\n</main>\n<footer>© 2026 Ticketly · <a href=\"/terms\">Terms</a></footer>لا يتغيّر التصميم المرئي إطلاقًا؛ فهذه العناصر ليس لها تنسيق خاص سوى display: block. الذي يتغيّر هو شجرة إمكانية الوصول: يستطيع سمير الآن أن يضغط D ليصل إلى “main landmark” ويبدأ قراءة محتوى المهرجان، متخطّيًا الترويسة بالكامل.
عنصر <section> وحده مجرد حاوية عامة. أعطِه اسمًا فيصبح landmark من نوع region يظهر في قائمة الـ landmarks. وأنظف طريقة هي أن تشير إلى عنوانه هو، فلا يمكن أن يفترق الاسم عن النص المرئي أبدًا:
<section aria-labelledby=\"tickets-heading\">\n <h2 id=\"tickets-heading\">Tickets</h2>\n …\n</section>لكن لا تحوّل كل section إلى region. الـ landmarks تعمل مثل قائمة فصول الكتاب: خمسة إلى ثمانية مداخل مفيدة، أما ثلاثون فلا. القاعدة العملية أن يعيش كل جزء من المحتوى داخل landmark ما (تنبّه أدوات الفحص الآلي إلى النص الذي لا يقع داخل أي landmark)، وألا تحصل على landmark خاص بها إلا المناطق الكبيرة المميّزة التي قد يرغب المستخدم في القفز إليها.
\nالـ landmarks هي غرف الصفحة؛ والعناوين هي اللافتات على أبوابها. يجد معظم مستخدمي قارئ الشاشة المحتوى بالقفز من عنوان إلى عنوان (H في NVDA وJAWS، أو من 1 إلى 6 لمستوى محدّد)، أو بفتح قائمة بكل العناوين والكتابة لتصفيتها. وهذه القائمة لا تفيد إلا إذا شكّلت العناوين مخطّطًا حقيقيًا.
\nثلاث قواعد تغطّي الغالبية العظمى من الحالات:
\nh1 واحد يقول ما هي الصفحة. في Ticketly هو “Harbour Lights 2026”، لا الشعار.تستخدم منطقة التذاكر في Ticketly العنصرين h4 وh5 لأن مصمّمًا أراد نصًا أصغر. أصلح البنية أولًا، ثم نسّق:
<h2>Tickets</h2>\n<h3 class=\"pass-title\">Friday pass</h3>\n<h3 class=\"pass-title\">Weekend pass</h3>.pass-title {\n font-size: 1rem;\n font-weight: 600;\n}ولا تنسَ عنصر <title> للصفحة أيضًا. إنه أول ما يُعلنه قارئ الشاشة حين تُحمَّل الصفحة، وهو ما يظهر في التبويبات وسجلّ التصفّح (2.4.2 Page Titled). ضع الجزء المحدّد أولًا: <title>Harbour Lights 2026 tickets · Ticketly</title>.
بعد أن صار الهيكل في مكانه، يتناول الدرس التالي الأجزاء التي ينقرها المستخدمون فعلًا: الأزرار والروابط، وعناصر الـ div القابلة للنقر التي تتظاهر بأنها هذا وذاك.
\n","toc":[{"id":"sec-1","text":"الـ Landmarks: مناطق الصفحة","level":2},{"id":"sec-2","text":"تسمية المناطق، وكم منها تستخدم","level":2},{"id":"sec-3","text":"العناوين: المخطّط الذي يتنقّل فيه الناس","level":2}],"takeaways":["العناصر header وnav وmain وaside وfooter تُنشئ landmarks يستطيع مستخدمو قارئ الشاشة عرض قائمة بها والقفز بينها.","للصفحة landmark واحد من نوع main؛ وحين توجد عدة مناطق nav أو aside، أعطِ كلًّا منها اسمًا متاحًا مميّزًا.","العناوين تشكّل مخطّط الصفحة؛ اختر المستوى بحسب البنية، لا بحسب حجم الخط، واضبط الحجم بـ CSS.","ابدأ بعنوان h1 واحد يسمّي الصفحة، ولا تتخطَّ أي مستوى وأنت تنزل في التسلسل."],"further":[{"title":"W3C WAI: Page Structure Tutorial","url":"https://www.w3.org/WAI/tutorials/page-structure/"},{"title":"MDN: The HTML section heading elements","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements"},{"title":"W3C APG: Landmark Regions","url":"https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/"}],"quiz":[{"q":"في Ticketly قائمتا تنقّل: قائمة الموقع في الأعلى وقائمة «أيام المهرجان» في الشريط الجانبي. يعرض قارئ الشاشة الـ landmarks هكذا: “navigation, navigation”. ما أفضل إصلاح؟
\n","options":[{"text":"أعطِ كل nav اسمًا متاحًا، مثلًاaria-label="Site" وaria-label="Festival days"","why":"صحيح. عندها تُعلن قارئات الشاشة “Site navigation” و"Festival days navigation"، فيستطيع المستخدمون التمييز بينهما."},{"text":"حوّل قائمة الشريط الجانبي إلى div حتى لا يبقى إلا navigation واحد","why":"هذا يحذف landmark مفيدًا بدلًا من تسميته. ويخسر المستخدمون طريقة سريعة للوصول إلى قائمة الأيام."},{"text":"أضف role="navigation" إلى عنصري nav كليهما","why":"لعنصر nav دور navigation أصلًا؛ وتكراره لا يغيّر شيئًا في الإعلان المكرّر."}],"answer":0},{"q":"أرادت مصمّمة أن يبدو عنوان «تذكرة الجمعة» صغيرًا، فاستخدم المطوّر h5 مباشرة بعد h2. ما الخطأ، وما الإصلاح؟
","options":[{"text":"لا خطأ؛ أي مستوى عنوان مقبول ما دام النص وصفيًا","why":"النص الوصفي مهم، لكن المستويات تنقل التسلسل الهرمي. القفز من h2 إلى h5 يوحي بأقسام مفقودة ويربك التنقّل عبر المخطّط."},{"text":"استخدم فقرة بخط عريض بدلًا منه، لأن العناوين لا ينبغي أن تكون صغيرة","why":"الفقرة العريضة ليست عنوانًا أصلًا، فتختفي من التنقّل بين العناوين. ويمكن أن تكون العناوين بأي حجم مرئي."},{"text":"استخدم h3 للبنية واجعله صغيرًا بـ CSS","why":"صحيح. المستوى يصف موقع المحتوى في المخطّط؛ وحجم الخط قرار تنسيقي مكانه CSS."}],"answer":2},{"q":"أيّ عنصر لا يُنشئ landmark إلا حين يكون له اسم متاح؟
","options":[{"text":"<main>","why":"عنصر main هو دائمًا الـ landmark الرئيسي؛ ولا يحتاج إلى اسم."},{"text":"<nav>","why":"عنصر nav هو دائمًا landmark من نوع navigation. والاسم يساعد فقط على التمييز بين عدة عناصر nav."},{"text":"<footer> مباشرة داخل body","why":"الـ footer غير المتداخل داخل article أو aside أو main أو nav أو section هو دائمًا landmark من نوع contentinfo."},{"text":"<section>","why":"صحيح. لا يصبح section منطقةً من نوع region إلا حين يُسمّى، مثلًا بـ aria-labelledby تشير إلى عنوانه."}],"answer":3},{"q":"في صفحة طويلة من Ticketly، ما أول ما يفعله مستخدم قارئ الشاشة في الغالب ليجد قسم «سياسة الاسترداد»؟
","options":[{"text":"يستمع إلى الصفحة كلها من الأعلى","why":"هذه أبطأ استراتيجية، وقليل من المستخدمين المتمرّسين يتّبعونها في الصفحات الطويلة."},{"text":"يضغط Tab مرارًا حتى يصل إليه","why":"مفتاح Tab يزور العناصر التفاعلية فقط مثل الروابط والحقول، فيتخطّى العناوين والفقرات تمامًا."},{"text":"يقفز بين العناوين، مثلًا بمفتاح H في NVDA","why":"صحيح. في استطلاع WebAIM لعام 2026، يتنقّل 67.8% من مستخدمي قارئ الشاشة في الصفحات الطويلة عبر العناوين أولًا."}],"answer":2}],"exercise":{"kind":"web","mode":"dom","starter":{"html":"\nTwo nights of music on the old harbour wall, 12 and 13 June.
\nSAR 180, standing.
\nSAR 320, both nights.
\nTwo nights of music on the old harbour wall, 12 and 13 June.
\nSAR 180, standing.
\nSAR 320, both nights.
\nالصفحة الرئيسية في Ticketly مبنية من عناصر div مجهولة الهوية، وعناوينها اختيرت بحسب حجم خطّها. أعد هيكلة الكود دون تغيير النص:
\n<header>، واجعل القائمة عنصر <nav> (أعطِها اسمًا مثل aria-label="Site").<main> واحد.<footer> خارج main.<h1> الوحيد، وأصلح بقية العناوين حتى لا يتخطّى المخطّط أي مستوى: Line-up وTickets قسمان؛ والتذكرتان تنتميان إلى Tickets.عناصر الـ landmarks لا تكلّف شيئًا بصريًا لكنها تمنح مستخدمي قارئ الشاشة خريطة: header (banner)، وnav (navigation)، وmain، وfooter (contentinfo). صارت مستويات العناوين تصف التداخل لا الحجم: h1 واحد للصفحة، وh2 لقسميها، وh3 للتذكرتين داخل Tickets. ويُبقي الـ CSS التذكرتين صغيرتين، لأن الحجم قرار تنسيقي. والتنقّل عبر العناوين صار يُقرأ كفهرس محتويات: Harbour Lights 2026، Line-up، Tickets، Friday pass، Weekend pass.
\n","checkLabels":{"one-main":"يوجد landmark واحد بالضبط من نوع main يضمّ محتوى المهرجان","banner-nav":"عنصر header في المستوى الأعلى يحتوي nav فيه روابط القائمة","footer":"عنصر footer في المستوى الأعلى يحتوي رابط Terms","one-h1":"“Harbour Lights 2026” هو عنصر h1 الوحيد في الصفحة","heading-order":"العناوين تبدأ من h1 ولا تتخطّى أي مستوى؛ والتذكرتان أعمق من Tickets بمستوى واحد"}},"words":624,"readMinutes":4}