محلل وسوم العناوين
هيكل H1 إلى H6

ما فائدة هيكل العناوين

العناوين ليست نصًا كبيرًا. إنها الفهرس الذي تبنيه الصفحة لنفسها، وفي الواقع هناك فئتان تقرآن ذلك الفهرس بدل الصفحة.

يقفز مستخدمو قارئات الشاشة بين العناوين للوصول إلى الجزء الذي يريدونه. وكذلك تقرأ الزواحف البنية نفسها لتعرف ما تغطيه الصفحة الطويلة.

لذلك يُقرأ الهيكل الخالي من H1، أو الذي يقفز من H2 إلى H4، كفهرس تنقصه فصول.

وتقول مبادرة إمكانية الوصول إلى الويب في W3C الشيء نفسه في دليلها عن بنية الصفحة: العناوين تصف الأقسام، والمستويات تصف كيف تتداخل تلك الأقسام.

H1 واحد، ولماذا

يقول H1 عمّ تتحدث الصفحة كلها. واحد فقط، في الأعلى، يطابق موضوع الصفحة.

يسمح HTML5 تقنيًا بعدة وسوم، لأن الأقسام كان يُفترض أن تنشئ هياكلها الخاصة. لكن المتصفحات لم تطبّق ذلك الهيكل قط، لذلك يبقى H1 الواحد هو القاعدة عمليًا.

لذلك ففاحص H1 أسرع تدقيق للصفحة على الإطلاق. فغياب H1 أو وجود ثلاثة وسوم H1 يشيران كلاهما إلى مشكلة في القالب لا في الكتابة.

لماذا يهم تخطي المستوى

القفز من H2 إلى H4 يخبر التقنيات المساعدة أن قسمًا فرعيًا يقع داخل شيء لم يفتحه أحد قط.

الإصلاح بصري في الغالب دائمًا. أراد أحدهم نصًا أصغر فاستخدم مستوى أدنى، لكن مرجع عناصر العناوين واضح في أن الحجم مكانه CSS.

نسّق H3 بالشكل الذي تريده. وعندها يبقى الهيكل صادقًا وتبقى الصفحة بمظهر صحيح.

العناوين الفارغة

عنوان يحيط بصورة أو أيقونة أو لا شيء إطلاقًا. عندها يعلن قارئ الشاشة "عنوان، فارغ"، وهذا أسوأ من غياب العنوان، لذلك يعلّم هذا المحلل كل واحد منها.

طريقتان لقراءة الصفحة

يجلب وضع العنوان صفحة مباشرة عبر هذا الخادم، لأن متصفحك لا يُسمح له بقراءة موقع آخر نيابة عنك.

أما وضع الترميز فيقرأ ما تلصقه، كليًا داخل علامة التبويب. وبذلك يغطي موقع اختبار محميًا بكلمة مرور، أو صفحة ما زالت في المحرر، أو جزءًا من قالب.

يوضح سطر الحالة الوضع العامل. كما لا يغادر شيء علامة التبويب في وضع الترميز، والتذييل يذكر الفرق.

كيف يستخدم الناس الهيكل فعلًا

يستطيع قارئ الشاشة سرد كل عناوين الصفحة والقفز مباشرة إلى أحدها. وتلك القائمة هي الهيكل الذي ترسمه هذه الأداة، بالترتيب نفسه.

ويفعل القراء المبصرون شيئًا مشابهًا بأعينهم. فهم يمسحون الصفحة بحثًا عن عنوان يطابق ما جاء بهم، ثم يقرؤون من تلك النقطة.

يكافئ السلوكان الشيء نفسه: عناوين تصف أقسامها وتقع في المستوى الصحيح. أما الكلمة المفتاحية المحشورة في H2 فلا يكافئها أي منهما.

لذلك اكتب الهيكل أولًا ثم املأه. فالصفحة التي تُقرأ جيدًا كقائمة عناوين تُقرأ عادةً جيدًا كنثر.

العناوين والصفحات الطويلة

الصفحة الطويلة تحيا أو تموت بهيكلها. فبعد نحو ألف كلمة لا يقرأ أحد من الأعلى إلى الأسفل، لذلك تصبح العناوين وسيلة التنقل.

كما تستخرج Google روابط أقسام من البنية الواضحة في بعض النتائج، وهذا يمنح الصفحة الطويلة أكثر من نقطة دخول.

لذلك تحتاج صفحة من خمسة عشر قسمًا إلى خمسة عشر عنوانًا صادقًا، لا خمسة عناوين وعشرة أسطر عريضة.

قراءة الشجرة التي ترسمها هذه الأداة

تزيح الشجرة كل عنوان تحت الذي فوقه، لذلك يظهر القفز من H2 إلى H4 كفجوة مرئية بدل تحذير عليك قراءته.

يعلّم الأحمر العريض وسم H1 الثاني إن وُجد في الصفحة. وهذا هو الخلل الذي يستحق الإصلاح أولًا.

تظهر العناوين الفارغة كشرطة. في الواقع العنوان الذي لا يحتوي إلا أيقونة لا يخبر قارئ الشاشة بشيء.

كما يوضح العدد في الأعلى كم عنوانًا من كل مستوى تستخدم الصفحة. وتسعة وسوم H3 تحت H2 واحد تعني عادةً أن القسم كان يحتاج إلى تقسيم.

العناوين ليست حيلة للترتيب

حشو الكلمات المفتاحية في H2 توقف عن العمل منذ زمن. فالبنية الواضحة للعناوين تساعد الزاحف على فهم الصفحة الطويلة، والأهم أنها تساعد القارئ أكثر بكثير، وهذا هو السبب الأفضل.