Οι λίστες HTML είναι βαρετές. Δεν το κάνουν do πολύ, επομένως δεν τα σκεφτόμαστε πραγματικά παρά το πόσο ευρέως χρησιμοποιούνται. Και είμαστε ακόμα σε θέση να κάνουμε τα ίδια πράγματα που κάναμε πάντα για να τα προσαρμόσουμε, όπως αφαίρεση δεικτών, αντιστροφή σειράς και δημιουργία προσαρμοσμένων μετρητών.
Υπάρχουν, ωστόσο, μερικά «νεότερα» πράγματα - συμπεριλαμβανομένων των κινδύνων - που πρέπει να γνωρίζετε όταν χρησιμοποιείτε λίστες. Οι κίνδυνοι είναι ως επί το πλείστον μικροί, αλλά πολύ πιο συνηθισμένοι από ό,τι νομίζετε. Θα φτάσουμε σε αυτά, καθώς και μερικά νέα πράγματα που μπορούμε να κάνουμε με λίστες, ακόμη και νέους τρόπους προσέγγισης παλιών λύσεων.
Για να διευκρινίσουμε, αυτά είναι τα στοιχεία HTML για τα οποία μιλάμε:
- Παραγγελθείσες λίστες
- Μη ταξινομημένες λίστες
- Περιγραφή λίστες
- Διαδραστικές λίστες
Οι ταξινομημένες λίστες, οι μη ταξινομημένες λίστες και οι διαδραστικές λίστες περιέχουν στοιχεία λίστας (
) τα οποία εμφανίζονται ανάλογα με το είδος της λίστας που έχουμε να κάνουμε. Μια ταξινομημένη λίστα (
) εμφανίζει αριθμούς δίπλα στα στοιχεία της λίστας. Μη ταξινομημένες λίστες (
) και στοιχεία μενού (
) εμφανίζει κουκκίδες δίπλα σε στοιχεία λίστας. Αυτά τα ονομάζουμε «δείκτες λίστας» και μπορούν ακόμη και να είναι στυλιζαρισμένα χρησιμοποιώντας τα ::σημάδι ψευδοστοιχείο. Οι λίστες περιγραφής χρησιμοποιούν όρους περιγραφής (
) και λεπτομέρειες περιγραφής (
) αντί
και δεν έχουν δείκτες λίστας. Υποτίθεται ότι χρησιμοποιούνται για την εμφάνιση μεταδεδομένων και γλωσσαρίων, αλλά δεν μπορώ να πω ότι τα έχω δει ποτέ στη φύση.
Ας ξεκινήσουμε με τα εύκολα πράγματα — πώς να επαναφέρετε σωστά (τουλάχιστον κατά τη γνώμη μου) τα στυλ λίστας. Μετά από αυτό, θα ρίξουμε μια ματιά σε μερικά ζητήματα προσβασιμότητας προτού ρίξουμε φως στα άπιαστα
στοιχείο, το οποίο μπορεί να εκπλαγείτε να μάθετε… είναι στην πραγματικότητα ένας τύπος λίστας, επίσης!
Επαναφορά στυλ λίστας
Τα προγράμματα περιήγησης εφαρμόζουν αυτόματα τα δικά τους στυλ παράγοντα χρήστη για να βοηθήσουν στην οπτική δομή των λιστών αμέσως. Αυτό μπορεί να είναι υπέροχο! Αλλά αν θέλουμε να ξεκινήσουμε με μια κενή πλάκα χωρίς απόψεις για το στυλ, τότε πρέπει πρώτα να επαναφέρουμε αυτά τα στυλ.
Για παράδειγμα, μπορούμε να αφαιρέσουμε τους δείκτες δίπλα στα στοιχεία λίστας πολύ εύκολα. Τίποτα νέο εδώ:
/* Zap all list markers! */
ol, ul, menu {
list-style: none;
}Αλλά το σύγχρονο CSS έχει νέους τρόπους για να μας βοηθήσει να στοχεύσουμε συγκεκριμένες παρουσίες λίστας. Ας υποθέσουμε ότι θέλουμε να διαγράψουμε τους δείκτες από όλες τις λίστες, εκτός εάν αυτές οι λίστες εμφανίζονται περιεχόμενο μεγάλης μορφής, όπως ένα άρθρο. Αν συνδυάσουμε τις δυνάμεις νεότερων συναρτήσεων ψευδο-κλάσης CSS :where() και :not(), μπορούμε να απομονώσουμε αυτές τις περιπτώσεις και να επιτρέψουμε τους δείκτες σε αυτές τις περιπτώσεις:
/* Where there are lists that are not articles where there are lists... */
:where(ol, ul, menu):not(article :where(ol, ul, menu)) {
list-style: none;
}Γιατί να χρησιμοποιήσετε :where() αντί του :is()? Η ιδιαιτερότητα του :where() είναι πάντα μηδέν, ενώ :is() παίρνει την ιδιαιτερότητα του πιο συγκεκριμένου στοιχείου στη λίστα επιλογέων του. Έτσι, χρησιμοποιώντας :where() είναι ένας λιγότερο ισχυρός τρόπος υπέρβασης πραγμάτων και μπορεί εύκολα να παρακαμφθεί ο ίδιος.
Τα στυλ UA εφαρμόζουν επίσης padding για να διαχωρίσουν το περιεχόμενο ενός στοιχείου λίστας από το δείκτη του. Και πάλι, αυτή είναι μια πολύ καλή τιμή σε ορισμένες περιπτώσεις, αλλά αν ήδη αφαιρούμε τους δείκτες της λίστας όπως κάναμε παραπάνω, τότε μπορεί επίσης να εξαλείψουμε και αυτό το γέμισμα. Αυτή είναι μια άλλη περίπτωση για :where():
:where(ol, ul, menu) {
padding-left: 0; /* or padding-inline-start */
}Εντάξει, αυτό θα αποτρέψει τα στοιχεία λίστας χωρίς δείκτες από το να εμφανίζονται να επιπλέουν στο κενό. Αλλά πετάξαμε το μωρό με το νερό του μπάνιου και αφαιρέσαμε την επένδυση σε όλες τις περιπτώσεις, συμπεριλαμβανομένων αυτών που απομονώσαμε προηγουμένως σε
. Έτσι, τώρα αυτές οι λίστες με δείκτες κρέμονται από την άκρη του πλαισίου περιεχομένου.
Παρατηρήστε ότι τα στυλ UA εφαρμόζουν ένα επιπλέον 40px στο
στοιχείο.
Επομένως, αυτό που θέλουμε να κάνουμε είναι να αποτρέψουμε τους δείκτες της λίστας να «κρέμονται» έξω από το δοχείο. Μπορούμε να το διορθώσουμε με το list-style-position ιδιοκτησία:
Ή όχι… μήπως οφείλεται στη στιλιστική προτίμηση;
Νεότερα προβλήματα προσβασιμότητας με λίστες
Δυστυχώς, υπάρχουν μερικές ανησυχίες σχετικά με την προσβασιμότητα όταν πρόκειται για λίστες — ακόμη και σε αυτούς τους πιο σύγχρονους καιρούς. Μια ανησυχία είναι αποτέλεσμα της αίτησης list-style: none; όπως κάναμε κατά την επαναφορά των στυλ UA.
Με λίγα λόγια, Safari δεν ανάγνωση ταξινομημένων και μη ταξινομημένων λιστών με στυλ list-style: none ως πραγματικές λίστες, όπως κατά την πλοήγηση σε περιεχόμενο με πρόγραμμα ανάγνωσης οθόνης. Με άλλα λόγια, η αφαίρεση των δεικτών αφαιρεί και το σημασιολογικό νόημα της λίστας. ο διόρθωση για αυτήν την επιδιόρθωση να εφαρμόσει ένα ARIA list ρόλο στη λίστα και α listitem ρόλο στα στοιχεία της λίστας έτσι οι αναγνώστες οθόνης θα τα πάρουν:
- ...
- ...
- ...
- ...
- ...
- ...
Παράδοξα, Το Safari θεωρεί ότι αυτό είναι ένα χαρακτηριστικό παρά ένα σφάλμα. Βασικά, οι χρήστες θα ανέφεραν ότι οι αναγνώστες οθόνης ανακοίνωναν πάρα πολλές λίστες (επειδή οι προγραμματιστές τείνουν να τις χρησιμοποιούν υπερβολικά), οπότε τώρα, μόνο όσοι έχουν role="list" ανακοινώνονται από τους αναγνώστες οθόνης, κάτι που στην πραγματικότητα δεν είναι και τόσο περίεργο τελικά. Σκοτ Ο'Χάρα έχει αναλυτική μείωση για το πώς έπεσαν όλα.
Μια δεύτερη ανησυχία για την προσβασιμότητα δεν είναι δική μας δημιουργία (ούρα!). Λοιπόν, ξέρετε πώς υποτίθεται ότι προσθέσετε μια aria-label προς την
στοιχεία χωρίς επικεφαλίδες; Λοιπόν, μερικές φορές έχει νόημα να κάνουμε το ίδιο με μια λίστα που δεν περιέχει στοιχείο επικεφαλίδας που βοηθά στην περιγραφή της λίστας.
Grocery list
Εσείς απολύτως δεν πρέπει να χρησιμοποιήσετε οποιαδήποτε μέθοδο. Η χρήση μιας επικεφαλίδας ή μιας ετικέτας ARIA είναι απλώς προστιθέμενο πλαίσιο, όχι απαίτηση — φροντίστε να δοκιμάσετε τους ιστότοπούς σας με προγράμματα ανάγνωσης οθόνης και να κάνετε αυτό που προσφέρει την καλύτερη εμπειρία χρήστη για την περίσταση.
Σε κάπως σχετικές ειδήσεις, ο Eric Bailey έγραψε ένα εξαιρετικό κομμάτι γιατί και πώς θεωρεί aria-label να είναι μια μυρωδιά κωδικού.
Περιμένετε,
είναι και λίστα;
Εντάξει, λοιπόν, πιθανότατα αναρωτιέστε για όλα αυτά
στοιχεία που έχω διολισθήσει στα παραδείγματα κώδικα. Είναι πραγματικά πολύ απλό. Τα μενού είναι μη ταξινομημένες λίστες εκτός από το ότι προορίζονται για διαδραστικά στοιχεία. Εκτίθενται ακόμη και στο δέντρο προσβασιμότητας ως μη ταξινομημένες λίστες.
Στις πρώτες μέρες του σημασιολογικού ιστού, λανθασμένα πίστευα ότι τα μενού ήταν σαν
s πριν πιστέψουμε ότι ήταν για μενού περιβάλλοντος (ή "γραμμές εργαλείων" όπως λέει η προδιαγραφή) γιατί αυτό έλεγαν οι πρώτες εκδόσεις της προδιαγραφής HTML. (Το MDN έχει μια ενδιαφέρουσα γραφή σε όλα τα καταργημένα στοιχεία που σχετίζονται με
αν σε ενδιαφέρει καθόλου.)
Σήμερα, ωστόσο, αυτός είναι ο σημασιολογικός τρόπος χρήσης των μενού:
Προσωπικά, νομίζω ότι υπάρχουν κάποιες καλές περιπτώσεις χρήσης
. Αυτό το τελευταίο παράδειγμα δείχνει μια λίστα με κουμπιά κοινής χρήσης κοινωνικών δικτύων τυλιγμένα σε μια ετικέτα
στοιχείο, η αξιοσημείωτη πτυχή είναι ότι η ετικέτα "Κοινή χρήση άρθρου" συνεισφέρει ένα σημαντικό μέρος του περιβάλλοντος που βοηθά στην περιγραφή του τι κάνουν τα κουμπιά.
Είναι απολύτως απαραίτητα τα μενού; Όχι Ορόσημα HTML? Σιγουρα οχι. Αλλά είναι εκεί αν απολαμβάνετε λιγότερο
s και νιώθετε ότι το εξάρτημα θα μπορούσε να χρησιμοποιήσει ένα aria-label για πρόσθετο πλαίσιο.
Τίποτα άλλο;
Ναι, υπάρχει και το προαναφερθέν
στοιχείο (λίστα περιγραφής), ωστόσο, Το MDN δεν φαίνεται να τα θεωρεί λίστες με τον ίδιο τρόπο — είναι μια λίστα ομάδων που περιέχει όρους — και δεν μπορώ να πω ότι τους έχω δει πραγματικά να χρησιμοποιούνται. Σύμφωνα με το MDN, υποτίθεται ότι χρησιμοποιούνται για μεταδεδομένα, γλωσσάρια και άλλους τύπους ζευγών κλειδιών-τιμών. Απλώς θα τα απέφευγα με το σκεπτικό ότι όλοι οι αναγνώστες οθόνης τα ανακοινώνουν διαφορετικά.
Αλλά ας μην τελειώνουμε με αρνητική νότα. Ακολουθεί μια λίστα με εξαιρετικά ωραία πράγματα που μπορείτε να κάνετε με λίστες:
