علاوه بر این، از آنجایی که صفحات احتمالاً بیش از یک بخش پیمایش دارند، توصیه می‌شود یک برچسب ناحیه توصیفی برای <nav> ارائه دهید تا هدف آن را منعکس کند. برای مثال، اگر جزء صفحه‌بندی برای پیمایش بین مجموعه‌ای از نتایج جستجو استفاده می‌شود، یک برچسب مناسب می‌تواند aria-label="صفحات نتایج جستجو" باشد.

پیوندهای صفحه بندی برای شرایط مختلف قابل تنظیم هستند. از .disabled برای پیوندهایی که غیرقابل کلیک به نظر می رسند و از .active برای نشان دادن صفحه فعلی استفاده کنید..

در حالی که کلاس .disabled از pointer-events: none برای تلاش برای غیرفعال کردن عملکرد پیوند <a>، آن ویژگی CSS هنوز استاندارد نشده است و ناوبری صفحه کلید را در نظر نمی گیرد. به این ترتیب، همیشه باید tabindex="-1" را روی پیوندهای غیرفعال شده اضافه کنید و از جاوا اسکریپت سفارشی برای غیرفعال کردن کامل عملکرد آنها استفاده کنید..

می‌توانید به‌صورت اختیاری لنگرهای فعال یا غیرفعال را با <span> تعویض کنید، یا لنگر را در مورد فلش‌های قبلی/بعدی حذف کنید تا عملکرد کلیک حذف شود و از فوکوس صفحه‌کلید با حفظ سبک‌های مورد نظر جلوگیری شود.

علاوه بر این، از آنجایی که صفحات احتمالاً بیش از یک بخش پیمایش دارند، توصیه می‌شود یک برچسب ناحیه توصیفی برای <nav> ارائه دهید تا هدف آن را منعکس کند. برای مثال، اگر جزء صفحه‌بندی برای پیمایش بین مجموعه‌ای از نتایج جستجو استفاده می‌شود، یک برچسب مناسب می‌تواند aria-label="صفحات نتایج جستجو" باشد.

آیا به دنبال استفاده از نماد یا نماد به جای متن برای برخی از پیوندهای صفحه بندی هستید؟ قطعاً پشتیبانی مناسب از صفحه‌خوان را با ویژگی‌های area ارائه می‌کند.

اندازه صفحه بندی صفحه بندی بزرگتر یا کوچکتر را دوست دارید؟ برای اندازه‌های بیشتر، .pagination-lg یا .pagination-sm را اضافه کنید.

تراز اجزای صفحه بندی را با flexbox خدمات رفاهی.

راست

وسط

چپ