Τεκμηρίωση και παραδείγματα για την εμφάνιση σελιδοποίησης για την ένδειξη μιας σειράς σχετικού περιεχομένου υπάρχουν σε πολλές σελίδες.
ΣΦΑΙΡΙΚΗ ΕΙΚΟΝΑ
Χρησιμοποιούμε ένα μεγάλο μπλοκ συνδεδεμένων συνδέσμων για τη σελιδοποίησή μας, καθιστώντας τους συνδέσμους δύσκολο να τις χάσουμε και να κλιμακωθούν εύκολα—όλα αυτά παρέχοντας παράλληλα μεγάλες περιοχές επισκέψεων. Η σελιδοποίηση είναι κατασκευασμένη με στοιχεία HTML λίστας, ώστε οι αναγνώστες οθόνης να μπορούν να ανακοινώνουν τον αριθμό των διαθέσιμων συνδέσμων. Χρησιμοποιήστε ένα <nav>στοιχείο αναδίπλωσης για να το προσδιορίσετε ως τμήμα πλοήγησης σε προγράμματα ανάγνωσης οθόνης και άλλες βοηθητικές τεχνολογίες.
Επιπλέον, καθώς οι σελίδες έχουν πιθανώς περισσότερες από μία τέτοιες ενότητες πλοήγησης, συνιστάται να παρέχετε ένα περιγραφικό aria-labelγια <nav>να αντικατοπτρίζει το σκοπό του. Για παράδειγμα, εάν το στοιχείο σελιδοποίησης χρησιμοποιείται για πλοήγηση μεταξύ ενός συνόλου αποτελεσμάτων αναζήτησης, μια κατάλληλη ετικέτα θα μπορούσε να είναι aria-label="Search results pages".
Εργασία με εικονίδια
Θέλετε να χρησιμοποιήσετε ένα εικονίδιο ή σύμβολο στη θέση του κειμένου για ορισμένους συνδέσμους σελιδοποίησης; Φροντίστε να παρέχετε την κατάλληλη υποστήριξη ανάγνωσης οθόνης με ariaχαρακτηριστικά.
Αναπηρία και ενεργές καταστάσεις
Οι σύνδεσμοι σελιδοποίησης είναι προσαρμόσιμοι για διαφορετικές περιστάσεις. Χρησιμοποιήστε .disabledτο για συνδέσμους που εμφανίζονται χωρίς κλικ και .activeγια να υποδείξετε την τρέχουσα σελίδα.
Ενώ η .disabledκλάση χρησιμοποιεί pointer-events: noneγια να προσπαθήσει να απενεργοποιήσει τη λειτουργία συνδέσμου του <a>s, αυτή η ιδιότητα CSS δεν είναι ακόμη τυποποιημένη και δεν λαμβάνει υπόψη την πλοήγηση με πληκτρολόγιο. Ως εκ τούτου, θα πρέπει πάντα να προσθέτετε tabindex="-1"απενεργοποιημένους συνδέσμους και να χρησιμοποιείτε προσαρμοσμένη JavaScript για να απενεργοποιείτε πλήρως τη λειτουργικότητά τους.
Μπορείτε προαιρετικά να ανταλλάξετε ενεργές ή απενεργοποιημένες άγκυρες για <span>, ή να παραλείψετε την άγκυρα στην περίπτωση του προηγούμενου/επόμενου βέλους, για να καταργήσετε τη λειτουργία κλικ και να αποτρέψετε την εστίαση του πληκτρολογίου διατηρώντας τα επιδιωκόμενα στυλ.
Κόλλα
Θέλετε μεγαλύτερη ή μικρότερη σελιδοποίηση; Προσθέστε .pagination-lgή .pagination-smγια επιπλέον μεγέθη.