Σημείο ελέγχου 1.3.1(a) HTML δομικά στοιχεία για επικεφαλίδες

Οι επικεφαλίδες πρέπει να επισημαίνονται σωστά με τα δομικά στοιχεία HTML h1 έως h6 και να αποκαλύπτουν το περιεχόμενο της σελίδας. Είναι αντικείμενο από το Σημείο ελέγχου 1.3.1(a) HTML δομικά στοιχεία για επικεφαλίδες.

Το περιεχόμενο του ιστότοπου είναι οπτικά δομημένο με επικεφαλίδες. Με τα δομικά στοιχεία της HTML που κάνει διαθέσιμα, δηλ. τα στοιχεία h1 έως h6. Χάρη σε αυτή τη δομή, ο χρήστης γνωρίζει τι ανήκει μαζί, μπορεί εύκολα να επισκόπηση το περιεχόμενο της ιστοσελίδας και να έχει εύκολη πρόσβαση σε περιεχόμενο που τον ενδιαφέρει.

Υπάρχουν χρήστες που δεν μπορούν να χρησιμοποιήσουν αυτήν την οπτική δομή. Για παράδειγμα, τα άτομα με χαμηλή όραση μπορούν να δουν μόνο ένα μικρό τμήμα της σελίδας. Αλλά ιδιαιτέρως για άτομα με τύφλωση είναι σημαντικό. Βασίζονται στο ότι η δομή είναι προσβάσιμη και χρησιμοποιήσιμη ανεξάρτητα από το τι εμφανίζεται στην οθόνη. Η χρήση στοιχείων επικεφαλίδας είναι για αυτό, απαραίτητη προϋπόθεση.

Έτσι μπορούν οι χρήστες να εφαρμόσουν τα στοιχεία επικεφαλίδας:

• Εμφάνιση μόνο των επικεφαλίδων. Ως πίνακα περιεχομένων για γρήγορο προσανατολισμό. Ιδιαίτερα σημαντικό για τυφλά άτομα.
• Μετάβαση από την ενότητα στην επικεφαλίδα (χρήστες πληκτρολογίου).
• Επισημάνετε διαφορετικά τις επικεφαλίδες. Σε μια περίπτωση που η επισήμανση η οποία παρέχεται από τον πάροχο της ιστοσελίδας δεν είναι κατάλληλη. Για παράδειγμα, διαφορετικό χρώμα ή φωνή.

1. Εφαρμογή του σημείου ελέγχου

Το σημείο ελέγχου δηλ. Κριτήριο επιτυχίας 1.3.1(a) ισχύει εάν υπάρχει περιεχόμενο στη σελίδα που μπορεί να δομηθεί χρησιμοποιώντας τα δομικά στοιχεία της HTML για επικεφαλίδες. Αυτό συμβαίνει συνήθως με ιστότοπους που έχουν ως έμφαση την πληροφόρηση.

2. Έλεγχος

1. Ανοίξτε τη σελίδα στον Firefox.
2. Χρησιμοποιήστε το επιπρόσθετο Web Developer Toolbar για να εμφανίσετε τη σελίδα χωρίς φύλλα στυλ (CSS). Keine CSS-Fehler > Styles aktivieren > Alle Styles.
3. Ανοίξτε το Bookmarklet "Δομημένο περιεχόμενο".
4. Κοιτάξτε τις επικεφαλίδες σε σχέση με το περιεχόμενο που δομούν. Ελέγξτε αν έχουν νόημα και δομήστε το περιεχόμενο της σελίδας πλήρως και σωστά. Το παρόμοιο περιεχόμενο ονομάζεται σταθερά με τον ίδιο τρόπο. Η ιεραρχία των στοιχείων για επικεφαλίδες HTML που χρησιμοποιούνται πρέπει να αντιστοιχεί στη δομή του περιεχομένου.
5. Ελέγξτε εάν το περιεχόμενο που μπορεί να αναγνωριστεί οπτικά ως επικεφαλίδες. Επισημαίνεται ως επικεφαλίδες χρησιμοποιώντας τα δομικά στοιχεία HTML <h1> έως <h6>.
6. Ελέγξτε εάν τα δομικά στοιχεία της HTML <h1> έως <h6> χρησιμοποιούνται μόνο για τη δημιουργία διαφορετικών μεγεθών γραμματοσειράς.

3. Σημειώσεις

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

Οι επικεφαλίδες πρέπει να είναι σωστά ένθετες (π.χ. h1 ακολουθεί h2, h2 ακολουθεί h3 και ούτω καθεξής) για να αντικατοπτρίζουν τη δομή του περιεχομένου του κειμένου. Ωστόσο, η παράλειψη των επιπέδων ιεραρχίας δεν χρειάζεται να είναι λάθος εάν δικαιολογείται από τη δομή του περιεχομένου.

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

4. Αξιολόγηση

Ικανοποιείται

• Όλο το περιεχόμενο της σελίδας είναι προσβάσιμο μέσω των επικεφαλίδων.

Δεν ικανοποιείται πλήρως

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

Δεν ικανοποιείται

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

Σύνθεση A11y WCAG 2.0

Προκαταρκτικό κείμενο του A11y WCAG 2.0, προσχέδιο από τον Μάιο του 2010 1.3.1 Πληροφορίες και Σχέσεις

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

2.4.6 Περιγραφές

Οι επικεφαλίδες και οι ετικέτες (λεζάντες) προσδιορίζουν το θέμα ή το σκοπό.

Διαφοροποίηση από άλλα σημεία ελέγχου

Αυτό το σημείο ελέγχου - Κριτήριο επιτυχίας 1.3.1(a) - αφορά τη χρήση επικεφαλίδων για τη δομή του περιεχομένου της σελίδας έτσι ώστε να είναι εύκολο να το κατανοήσετε και να το παραλείψετε χρησιμοποιώντας εργαλεία όπως προγράμματα ανάγνωσης οθόνης.

Στο σημείο ελέγχου - Κριτήριο επιτυχίας 2.4.1 "Παράκαμψη μπλοκ", ωστόσο, πρόκειται για τη δόμηση των περιοχών της σελίδας χρησιμοποιώντας επικεφαλίδες, χαρακτηριστικά WAI-Aria ή συνδέσμους μετάβασης.

Ταξινόμηση του σημείου ελέγχου σύμφωνα με το WCAG 2.0

Κατευθυντήριες γραμμές

• Guideline 1.3 Adaptable: Create content that can be presented in different ways (for example simpler layout) without losing information or structure
• Guideline 2.4 Navigable: Provide ways to help users navigate, find content, and determine where they are

Κριτήρια επιτυχίας

• 1.3.1 Info and Relationships (Level A)
• 2.4.6 Headings and Labels (Level A)

Τεχνικές Γενικές τεχνικές

• G115: Using semantic elements to mark up structure
• G130: Providing descriptive headings
• G140: Separating information and structure from presentation to enable different presentations

Τεχνικές HTML

• H42: Using h1-h6 to identify headings
• H69: Providing heading elements at the beginning of each section of content

Αποτυχία

• F43: Failure of Success Criterion 1.3.1 due to using structural markup in a way that does not represent relationships in the content

Πηγές

Χρήση επικεφαλίδων για την εμφάνιση της δομής

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

Οι ενότητες θα πρέπει να εισάγονται με τα στοιχεία επικεφαλίδας HTML (H1-H6). Άλλη σήμανση μπορεί να συμπληρώνει αυτά τα στοιχεία για τη βελτίωση της παρουσίασης (π.χ. το στοιχείο HR για τη δημιουργία μιας οριζόντιας διαχωριστικής γραμμής), αλλά η οπτική παρουσίαση δεν αρκεί για τον προσδιορισμό των τμημάτων του εγγράφου.

Πηγή: https://www.w3.org/TR/WCAG10-HTML-TECHS/#document-headers Επικεφαλίδες σωστά φωλιασμένες

Για να διευκολυνθεί η πλοήγηση και η κατανόηση της συνολικής δομής του εγγράφου, οι συντάκτες θα πρέπει να χρησιμοποιούν επικεφαλίδες που είναι σωστά ένθετες (π.χ. h1 ακολουθεί h2, h2 ακολουθεί h2 ή h3, h3 ακολουθεί h3 ή h4 κ.λπ.).

Πηγή: WCAG 2.0 Τεχνική G141: Organizing a page using headings Ορθή χρήση των στοιχείων για επικεφαλίδες και της CSS

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

Πηγή: WCAG 2.0 Τεχνική H42: Using h1-h6 to identify headings

Μπορούν να υπάρχουν πολλές επικεφαλίδες h1 σε μια σελίδα;

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

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

Γιατί είναι τόσο γενικές οι απαιτήσεις του σημείου ελέγχου; Υπάρχουν σαφείς επίσημες οδηγίες για τη σωστή δόμηση χρησιμοποιώντας επικεφαλίδες!

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

Ωστόσο, το αντίστροφο δεν είναι δυνατό. Οι τυπικά σωστές δομές επικεφαλίδων δεν είναι απαραίτητα χρήσιμες. Είναι σημαντικό οι επικεφαλίδες να αποκαλύπτουν το περιεχόμενο της σελίδας. Επομένως, πρέπει να δείτε τον πίνακα περιεχομένων που αποτελείται από τις επικεφαλίδες και να σκεφτείτε:

1. Είναι ο πίνακας περιεχομένων ολοκληρωμένος. Μου δείχνει όλο το σημαντικό περιεχόμενο της σελίδας;
2. Είναι ο πίνακας περιεχομένων που μπορεί να χρησιμοποιηθεί; Μπορώ να έχω πρόσβαση σε όλο το σημαντικό περιεχόμενο του ιστότοπου χωρίς μεγάλη προσπάθεια;

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

Πρέπει πάντα να χρησιμοποιείται το h1 για την κορυφαία επικεφαλίδα;

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

Ένας άλλος λόγος για να ξεκινήσετε με χαμηλότερο επίπεδο επικεφαλίδας. Ο ιστότοπος είναι ένα σύνθετο έγγραφο. Οι μεμονωμένες σελίδες (ονομάζονται One pager) είναι, για παράδειγμα, μεμονωμένα κεφάλαια αυτού της σελίδας. Αυτός είναι ένας αποδεκτός λόγος.

Ωστόσο, για τη χρηστικότητα των επικεφαλίδων, δεν είναι σημαντικό το h1 να βρίσκεται στην κορυφή.

Είναι δυνατόν να επισημανθούν κειμενικά γραφικά ως επικεφαλίδες;

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

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

Ποία είναι η διαφορά μεταξύ του τίτλου μιας σελίδας και της επικεφαλίδας h1;

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

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

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

Η κύρια επικεφαλίδα (πρώτου επιπέδου), από την άλλη πλευρά, αφορά περισσότερο την εσωτερική δομή της σελίδας. Από έξω δε βλέπω την κύρια επικεφαλίδα, μου εμφανίζεται μόνο αφού επιλέξω τη σελίδα.

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

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

Τώρα μπορείτε να πείτε: Γιατί χρειάζομαι την κύρια επικεφαλίδα; Γνωρίζω τι επέλεξα μέσω του τίτλου της σελίδας ή του βασικού μενού του εκάστοτε ιστότοπου. Επομένως, ορισμένοι ιστότοποι δεν έχουν την κύρια επικεφαλίδα και ξεκινούν αμέσως με μια λίστα με «παρακάμψεις μπλοκ» που αναφέρονται στα θέματα της σελίδας. Αυτό είναι κατανοητό, αλλά μπορεί κανείς να υποθέσει ότι επαναλαμβάνεται η κύρια επικεφαλίδα στην ίδια τη σελίδα.