Πώς να βελτιώσετε την προσβασιμότητα του πίνακα HTML με τη σήμανση

Η προσβασιμότητα στο Web αναφέρεται στο σχεδιασμό εφαρμογών ιστού με τρόπο που να μπορεί να χρησιμοποιηθεί με ευκολία από άτομα με οπτικές αναπηρίες. Μερικοί από αυτούς τους χρήστες βασίζονται αναγνώστες οθόνης για να διαβάσετε το περιεχόμενο στις ιστοσελίδες. Οι αναγνώστες οθόνης να ερμηνεύσει τον κώδικα που υπάρχει στη σελίδα και διαβάστε το περιεχόμενό του στο χρήστη.

είναι ένα ευρέως χρησιμοποιούμενο στοιχείο HTML για την προβολή δεδομένων με δομημένο τρόπο σε ιστοσελίδες. Η σχεδίασή του κυμαίνεται από απλά έως σύνθετα, με κεφαλίδες γραμμών, συγχωνευμένες κεφαλίδες κλπ.

Εάν ένας πίνακας δεν έχει σχεδιαστεί με γνώμονα την προσβασιμότητα, θα είναι δύσκολο για τους αναγνώστες οθόνης να μεταφράζουν τα δεδομένα σε σύνθετους πίνακες με νόημα για τους χρήστες. Ως εκ τούτου, για να καταστούν πιο σύνθετοι πίνακες HTML πιο εύληπτοι, για την προσβασιμότητα, πρέπει βεβαιωθείτε ότι οι κεφαλίδες, οι ομάδες στηλών, οι ομάδες γραμμών κ.λπ. είναι σαφώς καθορισμένες. Θα δούμε παρακάτω πώς είναι αυτό επιτευχθεί κατά τη σήμανση.

Το χαρακτηριστικό εμβέλειας

Ακόμη και για ένα απλό τραπέζι με

σήμανση με πεδίο = "col" βοηθά την βοηθητική τεχνολογία να αναγνωρίσει ότι τα κελιά που ακολουθούν στην ίδια στήλη είναι τα ονόματα των μαθητών.

Ομοίως, τα κύτταρα μοιάζουν

που περιέχει πεδίο εφαρμογής = "colgroup" βοηθά τους χρήστες να αναγνωρίσουν ότι τα δεδομένα στα κελιά που ακολουθούν στην ομάδα στηλών που καλύπτει συνδέονται με αυτό το συγκεκριμένο θέμα.

Στη συνέχεια υπάρχει το

σήμανση με πεδίο = "σειρά" που ορίζει ότι τα κελιά που την ακολουθούν στην ίδια σειρά, που περιέχει το “Βαθμός” πληροφορίες σχετικά με το συγκεκριμένο όνομα φοιτητή.

Ομάδες γραμμών

Τώρα, ας προχωρήσουμε σε ένα άλλο παράδειγμα, το παράδειγμα αυτό θα έχει σχεδόν τον ίδιο πίνακα με το παραπάνω, εκτός από το ότι θα αλλάξουμε τις επικεφαλίδες των γραμμών και των στηλών, έτσι θα μπορέσουμε να συνεργαστούμε με ομάδες γραμμών.

ετικέτα που ορίζει σαφώς τις κεφαλίδες, μπορείτε να βελτιώσετε την προσβασιμότητά της με το πεδίο εφαρμογής αποδίδουν και αποτρέπουν κάθε σύγχυση που μπορεί να προκύψει από παρόμοιους τύπους δεδομένων στα κελιά.

  όνομα υπαλλήλου  Κωδικός Εργαζομένων  Κωδικός έργου  Προσδιορισμός υπαλλήλων  
  John Doe  32456  456789  Διευθυντής  
  Μιριάμ Λούθερ  78902  456789  Αναπληρωτης Διευθυντης

Τι κάνει το χαρακτηριστικό εύρους; Σύμφωνα με το W3C:

Με άλλα λόγια, μας βοηθά να συσχετίσουμε τα κελιά δεδομένων με τα αντίστοιχα κελιά κεφαλίδων.

Σημειώστε ότι στο παραπάνω παράδειγμα μπορείτε να αλλάξετε

Για

. Όσο καιρό του πεδίο εφαρμογής έχει την αξία διάσελο, θα ερμηνευτεί ως η κεφαλίδα της αντίστοιχης στήλης.

ο πεδίο εφαρμογής attribute μπορεί να έχει οποιαδήποτε από αυτές τις τέσσερις τιμές. διάσελο, σειρά, rowgroup, colgroup για να αναφερθεί η κεφαλίδα μιας στήλης, η κεφαλίδα μιας σειράς, η κεφαλίδα της ομάδας των κεφαλίδων και η κεφαλίδα των ομάδων των γραμμών αντίστοιχα.

Σύνθετοι πίνακες

Τώρα ας προχωρήσουμε σε ένα πιο πολύπλοκο τραπέζι.

Πάνω είναι ένας πίνακας που απαριθμεί τους μαθητές σε μια τάξη και τους βαθμούς τους στην πρακτική και τη θεωρία για τρία θέματα.

Εδώ είναι ο κώδικας HTML για αυτό. Ο πίνακας έχει χρησιμοποιηθεί rowspan και colspan για τη δημιουργία συγχωνευμένων κεφαλίδων για τα κελιά δεδομένων.

  Ονομα μαθητή  Βιολογία  Χημεία  Η φυσικη  
  Πρακτικός  Θεωρία  Πρακτικός  Θεωρία  Πρακτικός  Θεωρία  
  John Doe  ΕΝΑ  ΕΝΑ+  σι  ΕΝΑ  ΕΝΑ  ΕΝΑ-  
  Μιριάμ Λούθερ  ΕΝΑ  ΕΝΑ  ντο  ντο+  ΕΝΑ  ΕΝΑ-

Στον παραπάνω πίνακα, κάθε κελί δεδομένων, που είναι κάθε ένα από τα κελιά πίνακα εμφάνιση της βαθμολογίας, συνδέεται με τρία στοιχεία:

Σε ποιον φοιτητή ανήκει αυτός ο βαθμός?
Σε ποιο θέμα ανήκει αυτός ο βαθμός?
Είναι αυτός ο βαθμός για το τμήμα πρακτικής ή θεωρίας?

Αυτές οι τρεις πληροφορίες ορίζονται σε τρεις διαφορετικούς τύπους κυψελών κεφαλίδας δομικά και οπτικά:

Ονομα μαθητή
Όνομα αντικειμένου
Πρακτική ή θεωρία

Ας ορίσουμε το ίδιο για την προσβασιμότητα.

      Ονομα μαθητή  Βιολογία  Χημεία  Η φυσικη  
  Πρακτικός  Θεωρία  Πρακτικός  Θεωρία  Πρακτικός  Θεωρία  
  John Doe  ΕΝΑ  ΕΝΑ+  σι  ΕΝΑ  ΕΝΑ  ΕΝΑ-  
  Μιριάμ Λούθερ  ΕΝΑ  ΕΝΑ  ντο  ντο+  ΕΝΑ  ΕΝΑ-

Στην παραπάνω σήμανση προσθέσαμε πεδίο εφαρμογής σε κελιά που περιέχουν πληροφορίες κεφαλίδας σχετικά με τα κελιά δεδομένων.

Ομάδα στήλης

Τα βιολογικά, χημικά και φυσικά κύτταρα πρέπει να συσχετίζονται με μια ομάδα από δύο στήλες έκαστη (Θεωρία & Πρακτική). Απλά προσθέτοντας colspan = "2" δεν δημιουργεί τις ομάδες στηλών, δείχνει μόνο ότι το συγκεκριμένο κελί πρέπει να καταλαμβάνει χώρο αξίας δύο κελιών.

Για να δημιουργήσετε μια ομάδα στηλών πρέπει να χρησιμοποιήσετε colgroup και στη συνέχεια προσθέστε το σπιθαμή το χαρακτηριστικό του, υποδεικνύοντας πόσες στήλες περιλαμβάνει αυτή η ομάδα στηλών.

Ονομα μαθητή

Βιολογία

John Doe

Θέμα		John Doe	Μιριάμ Λούθερ
Βιολογία	Πρακτικός	ΕΝΑ	ΕΝΑ
Βιολογία	Θεωρία	ΕΝΑ+	ΕΝΑ
Χημεία	Πρακτικός	σι	ντο
Χημεία	Θεωρία	ΕΝΑ	ντο+
Η φυσικη	Πρακτικός	ΕΝΑ	ΕΝΑ
Η φυσικη	Θεωρία	ΕΝΑ-	ΕΝΑ-

Τώρα που έχουμε το δείγμα μας να συνεργαστεί με ας ξεκινήσουμε δημιουργώντας ομάδες σειρών όπως κάναμε για τις ομάδες στηλών στο προηγούμενο παράδειγμα.

Ωστόσο, οι ομάδες γραμμών δεν μπορούν να δημιουργηθούν χρησιμοποιώντας μια ετικέτα όπως colgroup γιατί δεν υπάρχει rowgroup στοιχείο.

Οι γραμμές HTML γενικά ομαδοποιούνται χρησιμοποιώντας , και στοιχεία. Ένα ενιαίο HTML

στοιχείο μπορεί να έχει ένα , ένας και πολλαπλά . Θα χρησιμοποιήσουμε πολλαπλά tbody στο τραπέζι μας για να δημιουργήσουμε τις ομάδες γραμμών και να προσθέσουμε το αντίστοιχο πεδίο στα κελιά κεφαλίδας.

Θέμα		John Doe	Μιριάμ Λούθερ
Βιολογία	Πρακτικός	ΕΝΑ	ΕΝΑ
Βιολογία	Θεωρία	ΕΝΑ+	ΕΝΑ
Χημεία	Πρακτικός	σι	ντο
Χημεία	Θεωρία	ΕΝΑ	ντο+
Η φυσικη	Πρακτικός	ΕΝΑ	ΕΝΑ
Η φυσικη	Θεωρία	ΕΝΑ-	ΕΝΑ-

Έχουμε προσθέσει τις σειρές “Πρακτικός” και “Θεωρία” σε κάθε tbody δημιουργώντας ομάδες γραμμών με δύο σειρές σε κάθε μία. Έχουμε επίσης προσθέσει το πεδίο = "ομάδα συστοιχιών" στα κυψέλες που περιέχουν τις πληροφορίες επικεφαλίδας για αυτές τις δύο σειρές (που είναι το όνομα του αντικειμένου που ανήκουν οι βαθμοί σε αυτή την περίπτωση).

Τώρα διαβάστε: Ίσα Ύψος στήλης με CSS