ينقر الزائر رابط قسم داخل الصفحة، فيتحرك المحتوى لكن عنوان القسم يختفي وراء الهيدر الثابت. وقد ينتقل مستخدم Tab إلى زر تحجبه اللوحة نفسها. تشابه العرض لا يجعل الحالتين اختبارًا واحدًا: وصول رابط إلى قسم يختلف عن وصول تركيز لوحة المفاتيح إلى عنصر تفاعلي.
احجز مسافة للهدف المقصود
توضح وثائق MDN للتمرير إلى عنصر استخدام scroll-margin-top أو scroll-margin-bottom لتخصيص المسافة عند المحاذاة، وهو مفيد مع هيدر ثابت. حدد الهدف الصحيح والجزء الذي يمرر الصفحة قبل إضافة هامش ثابت إلى كل عناصرها.
في نموذج افتراضي، يختلف ارتفاع الهيدر بين عرض الهاتف وسطح المكتب، ويزداد مع تكبير النص. قيمة تنجح في لقطة واحدة قد لا تكفي لبقية الأوضاع. راجع المسافة بعد اكتمال تحميل الخط وظهور أي شريط إضافي، بدل تثبيت رقم بناء على مساحة فارغة مؤقتة.
نفذ رحلتين منفصلتين
- افتح الصفحة من رابط يحمل fragment لقسم موجود، ثم اختبر الرابط الداخلي إلى القسم نفسه والعودة في التاريخ.
- تحرك بـTab وShift مع Tab بين عناصر أعلى منطقة الهيدر وأسفلها، وراجع ما يظهر عند كل انتقال.
لا تعتبر تحرك الصفحة نقلًا للتركيز تلقائيًا. وإذا كان التصميم يحتاج نقل التركيز عند فعل معين، فراجعه كقرار مستقل يحافظ على ترتيب التنقل ولا يضع المستخدم في عنصر غير مناسب.
افهم الحد الأدنى ثم اختبر الوضوح
يوضح شرح WCAG 2.2 لمعيار Focus Not Obscured Minimum أن العنصر عند تلقي التركيز لا يكون مخفيًا بالكامل بسبب محتوى أنشأه الموقع. ولجودة الاستخدام يمكن أن يستهدف التصميم ظهور العنصر بوضوح كامل؛ لا تخلط هذا الهدف الأقوى بالنص المحدد للحد الأدنى.
| وضع الفحص | ما قد يتغير |
|---|---|
| هاتف رأسي أو أفقي | ارتفاع الشريط ومساحة الرؤية |
| تكبير النص والصفحة | التفاف العناوين وعناصر التنقل |
| شريط إضافي ظاهر | مساحة تغطية الهدف أو العنصر المركَّز |
| حاوية تمرير داخلية | أي جزء يستجيب للتمرير فعليًا |
احتفظ بقائمة أهداف صغيرة للقبول
ضمن تصميم الواجهات اختر عنوانًا وزرًا قريبًا من أعلى الشاشة وآخر أسفلها، ثم راجع هذه الأهداف بعد تعديل الهيدر. وسلّم للفحص التقني تسجيلًا للرحلتين وقياسات العرض. معيار القبول وصول واضح ومستقر للمحتوى والتركيز؛ إضافة خاصية CSS واحدة لا تثبت وحدها توافق الصفحة كلها.
