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

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

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

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

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

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

Για τα frames, ένας κατανοητός τίτλος είναι σημαντικός για τον προσανατολισμό με προγράμματα ανάγνωσης οθόνης. Τα κοινά προγράμματα ανάγνωσης οθόνης αξιολογούν τα χαρακτηριστικά title και name, τα οποία χρησιμοποιούνται συνήθως στον προγραμματισμό. Το χαρακτηριστικό 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. Ελέγξτε εάν υπάρχουν - επισημαίνονται - ορόσημα WAI-ARIA document landmarks.
4. Εάν χρησιμοποιούνται WAI-ARIA 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

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

Σημείωση για συνδέσμους "άμεσης μετάβασης" και ορόσημων WAI-ARIA 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 επικεφαλίδα πρώτου επιπέδου (h1).

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

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