نمونه ای از صفحه بندی
از آنجایی که صفحات احتمالاً بیش از یک بخش دارند، توصیه می‌شود یک aria-label توضیحی برای <nav> ارائه دهید تا هدف آن را نمایش دهد. . برای مثال، اگر صفحه‌بندی برای پیمایش بین مجموعه‌ای از نتایج جستجو استفاده شود، میتوان یک برچسب مناسب مثل aria-label="صفحات نتایج جستجو" را استفاده کرد.
حالت فعال و غیرفعال
پیوندهای صفحه بندی برای شرایط مختلف قابل تنظیم هستند. از .disabled برای پیوندهایی که غیرقابل کلیک به نظر می رسند و از .active برای نشان دادن صفحه فعلی استفاده کنید.
در حالی که کلاس .disabled برای غیرفعال کردن عملکرد پیوند <a> از pointer-events: none استفاده میکند، این ویژگی CSS هنوز استاندارد نشده است و پیمایش صفحه کلید را در نظر نمی گیرد. به این ترتیب، همیشه باید tabindex="-1" را روی پیوندهای غیرفعال شده اضافه کنید و از جاوا اسکریپت سفارشی برای غیرفعال کردن کامل عملکرد آنها استفاده کنید.
می‌توانید به‌صورت اختیاری کلید های فعال یا غیرفعال را با <span> تعویض کنید، یا کلیدهای موجود را در مورد فلش‌های قبلی/بعدی حذف کنید تا عملکرد کلیک را حذف کنید و از فوکوس صفحه‌کلید در عین حفظ سبک های در نظر گرفته شده جلوگیری کنید.
صفحه بندی با رنگ
از کلاس های رنگی برای تغییر رنگ صفحه بندی ها استفاده کنید
استفاده از آیکن ها
اگر دنبال استفاده از نماد به جای متن برای برخی پیوندهای صفحه بندی هستید، پشتیبانی مناسب از صفحه خوان را با aria پشتیبانی کنید
سایز صفحه بندی ها
صفحه بندی بزرگتر یا کوچکتر را دوست دارید؟ .pagination-lg یا .pagination-sm را برای تغییر اندازه استفاده کنید.