Dokumentacija i primjeri za prikaz paginacije za označavanje niza povezanih sadržaja postoje na više stranica.
Pregled
Koristimo veliki blok povezanih poveznica za našu paginaciju, čineći poveznice teško promašenim i lako skalabilnim—a sve dok pružamo velika područja pretraživanja. Paginacija je izgrađena pomoću HTML elemenata popisa kako bi čitači zaslona mogli objaviti broj dostupnih veza. Upotrijebite omotni <nav>element da ga identificirate kao navigacijski odjeljak za čitače zaslona i druge pomoćne tehnologije.
Nadalje, budući da stranice vjerojatno imaju više od jednog takvog odjeljka za navigaciju, preporučljivo je pružiti opis aria-labelkako <nav>bi odražavao njegovu svrhu. Na primjer, ako se komponenta paginacije koristi za navigaciju između niza rezultata pretraživanja, odgovarajuća bi oznaka mogla biti aria-label="Search results pages".
Rad sa ikonama
Želite koristiti ikonu ili simbol umjesto teksta za neke veze na stranice? Obavezno osigurajte odgovarajuću podršku za čitač zaslona s ariaatributima i .sr-onlyuslužnim programom.
Onesposobljena i aktivna stanja
Veze na stranice mogu se prilagoditi različitim okolnostima. Koristite .disabledza poveznice na koje se ne može kliknuti i .activeza označavanje trenutne stranice.
Iako .disabledklasa pokušava onemogućiti funkcionalnost veze za s, to CSS svojstvo još nije standardizirano i ne uzima u obzir navigaciju tipkovnicom pointer-events: none. Kao takvi, uvijek biste trebali dodavati onemogućene veze i koristiti prilagođeni JavaScript kako biste u potpunosti onemogućili njihovu funkcionalnost.<a>tabindex="-1"
Po izboru možete zamijeniti aktivna ili onemogućena sidra za <span>ili izostaviti sidro u slučaju strelica prethodno/sljedeće, kako biste uklonili funkciju klika i spriječili fokus tipkovnice uz zadržavanje željenih stilova.
Dimenzioniranje
Želite li veću ili manju paginaciju? Dodajte .pagination-lgili .pagination-smza dodatne veličine.