أزرار السابق والتالي بالرموز | ترقيم الصفحات في بوتستراب 5

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

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

تستعيض الواجهات المدمجة كثيراً عن كلمتي السابق والتالي برموز الأسهم المزدوجة مثل « و» أو بأيقونات متجهة. غير أن ترك الرمز وحده داخل .page-link يجعل قارئات الشاشة تنطق اسم علامة الترقيم بدلاً من وظيفة الزر.

يعالج النمط القياسي للإتاحة هذه المشكلة عبر خطوتين متكاملتين: إسناد aria-label="Previous" إلى وسم الرابط <a class="page-link"> ليقرأه القارئ الصوتي بوضوح، وتغليف الرمز البصري داخل <span aria-hidden="true"> لإخفائه صوتياً.

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

HTML

<ul class="pagination">
  <li class="page-item">
    <a class="page-link" href="#" aria-label="Previous">
      <span aria-hidden="true">&laquo;</span>
    </a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#">1</a>
  </li>
</ul>

جرّب بنفسك

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

Icon Page Navigation Links أزرار السابق والتالي بالرموز

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

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