تحتوي برامج قراءة الشاشة على أوامر للانتقال بسرعة بين العناوين أو إلى مناطق محدّدة للمعالم. في الواقع، أظهرت استطلاعات أجريناها على مستخدمي قارئ الشاشة أنّهم يميلون إلى التنقّل في الصفحة غير المألوفة من خلال استكشاف العناوين.
من خلال استخدام عناصر العناوين والمعالم الصحيحة، يمكنك تحسين تجربة التنقّل على موقعك الإلكتروني بشكل كبير لمستخدمي التكنولوجيات المساعِدة.
استخدام العناوين لتحديد محتوى الصفحة
استخدِم عناصر 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 في التحقّق مما إذا كانت صفحتك تحتوي على رابط للتخطّي. شغِّل فحص الصعوبة في الاستخدام مرة أخرى وابحث عن نتائج فحص تحتوي الصفحة على عنوان أو رابط تخطٍ أو منطقة معالم.