#ARIA Landmark roles - A11y WCAG Τεστ

Εισαγωγή

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

Όλες οι τεχνικές ήταν τελικά «μπαστούνια» μέχρι που η HTML 4.01 αντικαταστάθηκε από το πρότυπο HTML5. Η HTML5 μπορεί να χρησιμοποιηθεί για τον προσδιορισμό περιοχών ενός ιστότοπου και οι βοηθητικές τεχνολογίες μπορούν καλύτερα να τις ελέγχουν.

Η «κλασική» δομική πλοήγηση

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

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

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

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

Ρόλοι ορόσημων ARIA (Landmark roles) για περιοχές ιστοσελίδας

Το ARIA (Accessible Rich Internet Application) είναι μια προδιαγραφή του W3C που σημαίνει «Προσβάσιμες Πλούσιες Εφαρμογές Διαδικτύου». Τώρα, μία από τις πιο εύκολες λειτουργίες του ARIA για εφαρμογή που παρέχει σημαντικά άμεσα οφέλη στους χρήστες του προγράμματος ανάγνωσης οθόνης, είναι οι ρόλοι ορόσημο.

Οι ρόλοι ορόσημων ARIA (Landmark roles) παρέχουν έναν ισχυρό τρόπο αναγνώρισης της δομής μιας ιστοσελίδας. Με την ταξινόμηση τμημάτων μιας σελίδας, επιτρέπουν την προγραμματική αναπαράσταση δομικών πληροφοριών που μεταφέρονται οπτικά μέσω της διάταξης.

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

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

Στοιχεία της HTML για τμηματοποίηση του περιεχομένου

Πολλά στοιχεία της HTML για την δόμηση του περιεχομένου δημιουργούν αυτόματα περιοχές ορόσημων ARIA (Landmark roles). Έτσι, για να παρέχουμε στους χρήστες βοηθητικών τεχνολογιών μια λογική δομή μιας σελίδας, είναι σημαντικό να κατανοήσουμε τα αποτελέσματα της χρήσης των στοιχείων δομής στη HTML. Το ARIA περιέχει περισσότερες πληροφορίες σχετικά με την αντιστοίχιση ρόλων στοιχείων στη HTML.

Ο ακόλουθος πίνακας παρουσιάζει τα στοιχεία της HTML για τη δόμηση μιας ιστοσελίδας και τον προκαθορισμένο ρόλο ορόσημο σχετικά της τεχνολογίας ARIA.

Αρχές και συστάσεις σχεδιασμού ορόσημων

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

Βήμα 1: Καθορίστε τη λογική δομή της ιστοσελίδας

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

Βήμα 2: Εκχωρήστε ρόλους ορόσημα σε κάθε περιοχή της ιστοσελίδας

• Εκχωρήστε ρόλους ορόσημο με βάση τον τύπο περιεχομένου στην περιοχή.
• banner, main, complementary και contentinfo τα ορόσημα πρέπει να είναι ορόσημα ανώτατου επιπέδου (top level role).

Βήμα 3: Επισημάνετε τις περιοχές της ιστοσελίδας

• Εάν ένας συγκεκριμένος ρόλος ορόσημου χρησιμοποιείται περισσότερες από μία φορές σε μια σελίδα, παρέχετε σε κάθε εμφάνιση αυτού του ορόσημου μια μοναδική ετικέτα.
• Εάν ένα ορόσημο χρησιμοποιείται μόνο μία φορά στη σελίδα, ενδέχεται να μην απαιτείται ετικέτα.
• Εάν μια περιοχή ξεκινά με ένα στοιχείο επικεφαλίδας (π.χ. h1-h6) μπορεί να χρησιμοποιηθεί ως ετικέτα για την περιοχή χρησιμοποιώντας το χαρακτηριστικό aria-labelledby.
• Εάν μια περιοχή απαιτεί ετικέτα και δεν έχει στοιχείο επικεφαλίδας, δώστε μια ετικέτα χρησιμοποιώντας το χαρακτηριστικό aria-label.

Παράδειγμα ARIA Landmarks

Ένα (main) ορόσημο προσδιορίζει το κύριο περιεχόμενο της σελίδας. ARIA 1.2 Προδιαγραφή: main ορόσημο

Γενικές αρχές σχεδίασης

• Κάθε σελίδα πρέπει να έχει ένα main ορόσημο.
• Το main ορόσημο πρέπει να είναι ορόσημο ανώτατου επιπέδου (top level role).
• Όταν μια σελίδα περιέχει φωλιασμένους document ή/και application ρόλους (π.χ. συνήθως με τη χρήση των στοιχείων iframe και frame), καθένας document ή application ρόλος μπορεί να έχει ένα main ορόσημο.
• Εάν μια σελίδα περιλαμβάνει περισσότερα από ένα main ορόσημα, το καθένα θα πρέπει να έχει μια μοναδική ετικέτα.

Χρησιμοποιήστε το στοιχείο HTML <main> για να ορίσετε ένα main ορόσημο.

1.Παράδειγμα HTML: Ένα κύριο ορόσημο

Όταν υπάρχει μόνο ένα κύριο ορόσημο σε μια σελίδα, η ετικέτα είναι προαιρετική.

2.Παράδειγμα HTML: Πολλά κύρια ορόσημα

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