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