الإخفاء البصري لقارئات الشاشة | المساعدات البصرية والإتاحة في بوتستراب 5

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

في الواجهات الحديثة كثيراً ما نصادف أيقونة بحث منفردة أو زر إغلاق أو عداد إشعارات تفهمه العين بالسياق البصري، لكن قارئ الشاشة للمكفوفين يقف أمامه صامتاً بلا معنى! استبدل Bootstrap 5 الكلاس القديم .sr-only بالكلاس المعياري الواضح .visually-hidden لإخفاء النص التوضيحي بصرياً مع إبقائه مقروءاً بالكامل للتقنيات المساندة.

أما الكلاس التوأم .visually-hidden-focusable فيُعد الأداة الذهبية لبناء رابط «تخطي إلى المحتوى الرئيسي» في مطلع الصفحة؛ إذ يبقى الرابط مخفياً عن الفأرة ثم يظهر فوراً بوضوح في أعلى الشاشة بمجرد ضغط المستخدم على مفتاح Tab.

الصف 2 كود برمجي

HTML

<a class="visually-hidden-focusable p-2 text-bg-primary
  rounded mb-2 d-inline-block" href="#main-area">
  Skip to main content
</a>
<div id="main-area" class="hstack gap-3 p-3 border rounded">
  <span class="fw-semibold">Status: Online</span>
  <div class="vr"></div>
  <span>Latency: 18ms <span class="visually-hidden">
    within healthy threshold</span></span>
</div>

جرّب بنفسك

الصف 3 ملاحظة هامة

Visually Hidden Helpers الإخفاء البصري لقارئات الشاشة

شرح صفوف ومحتوى الفقرة

جميع فقرات هذا الدرس (المساعدات البصرية والإتاحة في بوتستراب 5)