#Σημείο ελέγχου 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). CSS > Disable all styles.
3. Ανοίξτε το Bookmarklet "Δομημένο περιεχόμενο".
4. Κοιτάξτε τις επικεφαλίδες σε σχέση με το περιεχόμενο που δομούν. Ελέγξτε αν έχουν νόημα και δομήστε το περιεχόμενο της σελίδας πλήρως και σωστά. Το παρόμοιο περιεχόμενο ονομάζεται σταθερά με τον ίδιο τρόπο. Η ιεραρχία των στοιχείων για επικεφαλίδες HTML που χρησιμοποιούνται πρέπει να αντιστοιχεί στη δομή του περιεχομένου.
5. Ελέγξτε εάν το περιεχόμενο που μπορεί να αναγνωριστεί οπτικά ως επικεφαλίδες. Επισημαίνεται ως επικεφαλίδες χρησιμοποιώντας τα δομικά στοιχεία HTML <h1> έως <h6>.
6. Ελέγξτε εάν τα δομικά στοιχεία της HTML <h1> έως <h6> χρησιμοποιούνται μόνο για τη δημιουργία διαφορετικών μεγεθών γραμματοσειράς.

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

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

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

Τα 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> για τη δημιουργία μιας οριζόντιας διαχωριστικής γραμμής), αλλά η οπτική παρουσίαση δεν αρκεί για τον προσδιορισμό των τμημάτων του εγγράφου.

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

Για να διευκολυνθεί η πλοήγηση και η κατανόηση της συνολικής δομής του εγγράφου, οι συντάκτες θα πρέπει να χρησιμοποιούν επικεφαλίδες που είναι σωστά ένθετες (π.χ. 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 πολύ μεγάλη και δεν ήξερε πώς να αλλάξει το μέγεθός της. Αυτός δε θα ήταν αποδεκτός λόγος, διότι το περιεχόμενο και η παρουσίαση (Layout) πρέπει να διαχωριστούν.

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

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

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

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

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

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

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

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

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

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

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

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

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