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

Rob Dodson

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

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

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

استخدِم عناصر 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 وWikipedia، روابط للتخطّي. حاوِل الانتقال إلى هذه الصفحات والضغط على المفتاح TAB على لوحة المفاتيح بضع مرّات.

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