العناوين والمعالم

روب دودسون

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

باستخدام عناصر العناوين والمعالم السياحية الصحيحة، يمكنك تحسين تجربة التنقل على موقعك الإلكتروني بشكل كبير لمستخدمي التكنولوجيا المساعِدة.

استخدام العناوين لتخطيط الصفحة

استخدام العناصر من h1 إلى h6 لإنشاء مخطط تفصيلي هيكل لصفحتك الهدف هو إنشاء هيكل عظمي أو ساق للصفحة بحيث يمكن لأي شخص يتنقل عبر العناوين أن يكوّن صورة عقلية.

من الممارسات الشائعة استخدام h1 واحد للعنوان الرئيسي أو الشعار الأساسي على الصفحة، وعناصر h2 لتحديد الأقسام الرئيسية، وعناصر h3 في الأقسام الفرعية الداعمة:

<h1>Company name</h1>
<section>
  <h2>Section Heading</h2>
  …
  <h3>Sub-section Heading</h3>
</section>

عدم تخطّي مستويات العناوين

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

بدلاً من الاعتماد على ضبط حجم الخط التلقائي للعناوين في المتصفح، استخدِم لغة CSS الخاصة بك ولا تتخطى المستويات.

على سبيل المثال، يتضمن هذا الموقع قسمًا بعنوان "أخبار الأخبار" يتبعه عنوانان رئيسيان:

موقع إخباري يحتوي على عنوان رئيسي وصورة رئيسية وأقسام فرعية.

يمكن أن يكون عنوان القسم، "في الأخبار"، h2 بينما يمكن أن تكون كل من العناوين الرئيسية الداعمة h3.

بما أنّ السمة font-size لعبارة "في الأخبار" أصغر من العنوان الرئيسي، قد يكون من المغري جعل العنوان الرئيسي للخبر الأول h2 وكذلك جعل "في الأخبار" h3. على الرغم من أن هذا قد يتطابق مع التصميم الافتراضي للمتصفح، إلا أنه قد يكسر المخطط الذي يتم إرساله إلى مستخدم قارئ الشاشة!

يمكنك استخدام Lighthouse للتحقق مما إذا كانت الصفحة تتخطى أي مستويات للعناوين. شغِّل تدقيق إمكانية الوصول (Lighthouse > الخيارات > تسهيل الاستخدام) وابحث عن نتائج التدقيق عدم تخطي المستويات.

استخدام المعالم للمساعدة في التنقّل

عناصر HTML5، مثل main وnav وaside، بمثابة معالم أو مناطق خاصة على الصفحة يمكن لقارئ الشاشة الانتقال إليها.

استخدِم علامات المعالم لتحديد الأقسام الرئيسية لصفحتك، بدلاً من الاعتماد على علامات div. احرص على عدم الإفراط في استخدام المعالم لأن وجود عدد كبير جدًا من المعالم قد يكون مربكًا. على سبيل المثال، التزم بعنصر main واحد فقط بدلاً من 3 أو 4.

تنصح أداة Lighthouse بتدقيق موقعك الإلكتروني يدويًا للتأكّد من أنّه "يتم استخدام عناصر مَعلَم HTML5 لتحسين التنقّل". يمكنك استخدام قائمة عناصر المعالم هذه للتحقق من صفحتك.

تخطّي المحتوى المتكرّر باستخدام روابط التخطّي

تحتوي العديد من المواقع الإلكترونية على تنقل متكرّر في عناوينها، ما قد يكون مزعجًا عند التنقّل باستخدام التكنولوجيا المساعدة. استخدِم رابط التخطّي للسماح للمستخدمين بتجاوز هذا المحتوى.

رابط التخطّي هو علامة ارتساء خارج الشاشة وتكون دائمًا أول عنصر يمكن التركيز عليه في نموذج العناصر في المستند (DOM). وتتضمن عادةً رابطًا في الصفحة يؤدي إلى المحتوى الرئيسي لها. ولأنه العنصر الأول في DOM، فلا يتطلب الأمر سوى إجراء واحد من التكنولوجيا المساعدة للتركيز عليه وتجاوز التنقل المتكرر.

<!-- index.html -->
<a class="skip-link" href="#main">Skip to main</a>
…
<main id="main">
  [Main content]
</main>

/* style.css */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000000;
  color: white;
  padding: 8px;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}

إنّ العديد من المواقع الإلكترونية الرائجة، مثل GitHub وThe NY Times وويكيبيديا تحتوي جميعها على روابط للتخطي. جرب الانتقال إليها والضغط على مفتاح TAB في لوحة المفاتيح عدة مرات.

يمكن أن تساعدك أداة Lighthouse في التحقّق مما إذا كانت صفحتك تحتوي على رابط التخطّي. نفِّذ عملية تدقيق إمكانية الوصول مرة أخرى وابحث عن نتائج التدقيق تحتوي الصفحة على عنوان أو رابط تخطٍ أو منطقة مَعلم.