Σημείο ελέγχου 2.4.1 Παράκαμψη μπλοκ

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

• Χρησιμοποιούνται επικεφαλίδες χρήσιμων περιοχών (δομικά στοιχεία HTML h1 έως h6).
• Διατίθενται σύνδεσμοι μετάβασης.
• Τα στοιχεία HTML5 για τη σήμανση περιοχών (header, nav, main, aside, footer) δίνουν νόημα στη δομή της σελίδας.
• WAI-ARIA document landmarks δομούν λογικά τις περιοχές της σελίδας.

Τα πλαίσια και τα iframe χρειάζονται ένα χαρακτηριστικό title με νόημα.

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

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

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

Η χρήση στοιχείων HTML5 για περιοχές υποστηρίζεται πλέον καλά από υποστηρικτικές τεχνολογίες. Ωστόσο, η πρόσθετη εξέταση ενός χαρακτηριστικού ρόλου (WAI-ARIA document landmarks) μπορεί να βελτιώσει την υποστήριξη της περιοχής.

Δείτε πώς οι χρήστες μπορούν να εφαρμόσουν τις επικεφαλίδες περιοχής, τους συνδέσμους μετάβασης, τα στοιχεία περιοχής HTML5 ή τα WAI-ARIA document landmarks:

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

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

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

2. Έλεγχος

2.1 Έλεγχος επικεφαλίδων των περιοχών

1. Ανοίξτε τη σελίδα στον Firefox.
2. Χρησιμοποιήστε το επιπρόσθετο Web Developer Bar για να εμφανίσετε τη σελίδα χωρίς διαδοχικά φύλλα στυλ, μέσω (CSS > Styles disabled > All Styles disabled) απενεργοποίηση των διαδοχικών φύλλων στυλ.
3. Ανοίξτε το Bookmarklet "Δομημένο περιεχόμενο".
4. Κοιτάξτε τις επικεφαλίδες των ενοτήτων σε σχέση με το περιεχόμενο που δομούν. Επίσης, ελέγξτε εάν έχουν νόημα. Χρησιμοποιήστε τα δομικά στοιχεία για επικεφαλίδες και δομήστε τις περιοχές περιεχομένου της σελίδας πλήρως και σωστά.

2.2 Έλεγχος σύνδεσης μετάβασης

Εάν υπάρχουν σύνδεσμοι μετάβασης. Ελέγξτε ότι πληρούνται οι ακόλουθες απαιτήσεις:

1. Οι σύνδεσμοι μετάβασης μετακινούν την εστίαση του πληκτρολογίου στην καθορισμένη περιοχή όταν ενεργοποιούνται. Επίσης, δυνατόν, εάν αμέσως στο περιεχόμενο μετά την περιοχή που πρέπει να παραβλεφθεί. Βέβαια, κατά την παράβλεψη μπλοκ περιεχομένου.
2. Οι σύνδεσμοι μετάβασης είναι πάντα ορατοί ή εμφανίζονται όταν το στοιχείο εστιάζεται.
3. Οι σύνδεσμοι μετάβασης στο επάνω μέρος της σελίδας είναι τα πρώτα στοιχεία. Η σειρά στην ακολουθία είναι λογική. Έτσι, το νόημα του περιεχομένου δεν αλλοιώνεται και υπάρχει νοηματική αλληλουχία.
4. Οι σύνδεσμοι μετάβασης για παράβλεψη μπλοκ περιεχομένου είναι το τελευταίο στοιχείο με δυνατότητα εστίασης πριν από το μπλοκ περιεχομένου που πρέπει να παραλειφθεί ή πρώτος σύνδεσμος του.

2.3 Έλεγχος των στοιχείων HTML5 για περιοχές και WAI-ARIA document landmarks

1. Ανοίξτε τη σελίδα στον Firefox.
2. Ανάλυση πηγαίου κώδικα: Ελέγξτε εάν οι διάφορες περιοχές της σελίδας είναι ουσιαστικά προσβάσιμες. Επισημαίνονται με τα στοιχεία header, nav, main, aside, footer.
3. Ανοίξτε το Landmarks bookmarklet. Εάν υπάρχουν τα document landmarks, επισημαίνονται.
4. Εάν χρησιμοποιούνται document landmarks, ελέγξτε εάν οι καθορισμένοι ρόλοι (π.χ. nav, main) είναι σωστοί και αντιστοιχούν στη δομή της σελίδας.
5. Εάν πολλές περιοχές πλοήγησης επισημαίνονται μόνο με nav ή role="navigation", τότε ελέγξτε εάν έχουν σημανθεί με χαρακτηριστικά όπως aria-label ή aria-labelledby.

2.4 Έλεγχος τίτλων πλαισίων

1. Ανοίξτε τη σελίδα στον Firefox.
2. Με το επιπρόσθετο Web Developer Bar, καλέστε τη συνάρτηση Outline > Outline Frames.
3. Στη συνέχεια, καλέστε επίσης τη συνάρτηση Information > Display Element Information με το επιπρόσθετο Web Developer Bar. Ο κέρσορας εμφανίζεται τώρα ως σταυρόνημα.
4. Χρησιμοποιήστε το σταυρόνημα για να κάνετε κλικ στην άκρη των επισημασμένων πλαισίων και ελέγξτε εάν υπάρχει ένα ουσιαστικό κείμενο τίτλου για όλα τα frames.

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

Ανεξάρτητες περιοχές

Οι ανεξάρτητες περιοχές περιλαμβάνουν, για παράδειγμα:

• Πλοήγηση και περιεχόμενο
• Στήλες με διαφορετικό περιεχόμενο
• Περιοχές που επισημαίνονται ότι ανήκουν μεταξύ τους από ένα πλαίσιο
• Frames ή Iframes

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

Σημείωση για συνδέσμους μετάβασης και document landmarks

Η έλλειψη συνδέσμων μετάβασης και η μη χρήση των WAI-ARIA document landmarks δεν βαθμολογείται αρνητικά.

Σημείωση για πολλά χρησιμοποιημένα ορόσημα ή στοιχεία HTML5 για περιοχές

Εάν ένα WAI-ARIA document landmarks ή ένα στοιχείο HTML5 χρησιμοποιείται πολλές φορές για περιοχές (π.χ. role="navigation" ή navigation), θα πρέπει να ονομαστεί με νόημα χρησιμοποιώντας aria-label ή aria-labelledby.

Σημείωση σχετικά με τις πλοηγήσεις "βρίσκεστε εδώ"

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

Σημείωση για τα πλαίσια και τα iframes

Το χαρακτηριστικό title θα πρέπει να υποδεικνύει τον σκοπό ή το περιεχόμενο, αλλά όχι τη θέση του πλαισίου στην οθόνη (βλέπε κριτήριο επιτυχίας 2.4.2 "Κατανοητός τίτλος σελίδας"). Τα κατάλληλα χαρακτηριστικά title περιλαμβάνουν "πλοήγηση" και "περιεχόμενο", αλλά όχι "επάνω" ή "δεξιά". Τα άδεια πλαίσια περιλαμβάνονται συχνά στα σύνολα πλαισίων και χρησιμοποιούνται αποκλειστικά για σκοπούς διάταξης. Για τέτοια πλαίσια, θα πρέπει να επιλεχθεί το "Empty" ως ετικέτα.

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

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

• Μπορείτε να προσεγγίσετε όλες τις περιοχές της σελίδας και να τις παραλείψετε μέσω επικεφαλίδων, συνδέσμων μετάβασης, στοιχείων HTML5 για περιοχές ή/και WAI-ARIA document landmarks
• Τα πλαίσια και τα iframe έχουν τίτλους με νόημα

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

• Οι επικεφαλίδες των ενοτήτων είναι μη ενημερωτικές ή παραπλανητικές
• Η χρήση στοιχείων HTML5 για περιοχές δεν ανοίγει πλήρως τις περιοχές της σελίδας
• Η εκχώρηση WAI-ARIA document landmarks είναι εσφαλμένη ή παραπλανητική
• Οι επικεφαλίδες περιοχών ή οι σύνδεσμοι μεταπήδησης κρύβονται χρησιμοποιώντας το display:none
• Η διαδρομή σελίδας (breadcrumb) επισημαίνεται ως λίστα, αλλά δεν έχει προηγούμενη σημείωση (π.χ. header)
• Αρκετές σημαντικές περιοχές πλοήγησης επισημαίνονται με WAI-ARIA document landmarks ή στοιχεία HTML5 για περιοχές και δεν διακρίνονται με aria-label ή aria-labelledby.

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

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

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

• Αυτό το σημείο ελέγχου αφορά την επισήμανση των περιοχών της σελίδας με επικεφαλίδες, συνδέσμους μετάβασης και χαρακτηριστικά WAI-ARIA document landmarks. Η δόμηση περιεχομένου του περιεχομένου σελίδας ελέγχεται στο κριτήριο επιτυχίας 1.3.1a «Δομικά στοιχεία HTML για επικεφαλίδες».
• Αυτό το σημείο ελέγχου ελέγχει εάν τα frames και τα iframes (εάν υπάρχουν) έχουν λογικούς τίτλους. Τα περιεχόμενα των iframes ελέγχονται με τον ίδιο τρόπο όπως και άλλο περιεχόμενο σελίδας, για παράδειγμα στο κριτήριο επιτυχίας 1.3.1d «Δομημένο περιεχόμενο».

Πηγές WCAG 2.1 Σημείωση σχετικά με τη διαφορά μεταξύ name και title

Το χαρακτηριστικό title δεν είναι ανταλλάξιμα με το χαρακτηριστικό name. Title επισημαίνει το πλαίσιο για τους χρήστες. Το όνομα το χαρακτηρίζει για δέσμες ενεργειών και στόχευση παραθύρων. Το όνομα δεν παρουσιάζεται στο χρήστη, μόνο ο τίτλος.
Πηγή: (H64: Χρήση του χαρακτηριστικού title εντός frame και των στοιχείων iframe)

WCAG 2.1 Σύνδεση WAI-ARIA document landmarks και κειμένου εγγράφου

Ο σκοπός αυτής της τεχνικής είναι να παρέχει ονόματα για περιοχές μιας σελίδας που μπορούν να διαβαστούν με βοηθητική τεχνολογία. Το χαρακτηριστικό aria-labelledby παρέχει έναν τρόπο συσχέτισης μιας ενότητας της σελίδας που έχει επισημανθεί ως region ή landmarks με το κείμενο που βρίσκεται στη σελίδα που το επισημαίνει.
Πηγή: (ARIA13: Χρήση aria-labelledby για την ονομασία περιοχών και landmarks)

Προσθήκη σήμανσης στην HTML5 μεσω της WAI ARIA

Σενάριο που προσθέτει αυτόματα ρόλους ARIA σε στοιχεία HTML5: Polyfill accessifyhtml5.js by Yatil

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

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

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

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