Τι Είναι το ARIA; Ρόλοι, Ορόσημα και Ζωντανές Περιοχές

Τι είναι το ARIA — και τι δεν είναι

Το ARIA σημαίνει Accessible Rich Internet Applications. Πρόκειται για ένα σύνολο χαρακτηριστικών που ορίζονται από την Πρωτοβουλία Προσβασιμότητας Ιστού (WAI) της W3C και επιτρέπουν στους προγραμματιστές να μεταδίδουν το νόημα και την κατάσταση των στοιχείων της διεπαφής χρήστη σε υποστηρικτικές τεχνολογίες όπως οι αναγνώστες οθόνης.

Ο σημαντικότερος κανόνας για το ARIA είναι και αυτός που αγνοείται συχνότερα: μη χρησιμοποιείτε ARIA όταν ο εγγενής HTML μπορεί να κάνει τη δουλειά. Ένα στοιχείο <button> ανακοινώνεται ήδη ως κουμπί και αποκρίνεται σε συμβάντα πληκτρολογίου. Ένα στοιχείο <nav> μεταδίδει ήδη ένα ορόσημο πλοήγησης στους αναγνώστες οθόνης. Η προσθήκη role="button" σε ένα <div> και στη συνέχεια η συγγραφή κώδικα για τη συμπεριφορά του είναι πιο δύσκολη στη συντήρηση, πιο εύθραυστη και συνήθως χειρότερη για την προσβασιμότητα από τη χρήση του σωστού στοιχείου εξαρχής.

Το ARIA δεν:

Καθιστά το περιεχόμενο ορατό ή διαδραστικό — αλλάζει μόνο αυτό που ανακοινώνει η υποστηρικτική τεχνολογία
Διορθώνει τη χαλασμένη πρόσβαση από πληκτρολόγιο — εξακολουθείτε να χρειάζεστε tabindex και ακροατές συμβάντων
Υποκαθιστά τον καλά δομημένο σημασιολογικό HTML

Εκεί όπου το ARIA βοηθά πραγματικά είναι όταν ο εγγενής HTML δεν διαθέτει στοιχείο για αυτό που κατασκευάζετε: έναν επιλογέα ημερομηνίας, ένα ζωντανό banner ειδοποιήσεων, ένα προσαρμοσμένο combobox, μια προβολή δέντρου. Σε αυτές τις περιπτώσεις, το ARIA σας επιτρέπει να μεταδώσετε τη σημασιολογία που ο HTML δεν μπορεί.

Ρόλοι ARIA

Ένας ρόλος λέει στην υποστηρικτική τεχνολογία με τι είδους στοιχείο έχει να κάνει. Κάθε διαδραστικό στοιχείο έχει έναν έμμεσο ρόλο που προκύπτει από την ετικέτα HTML του. Το στοιχείο <a> έχει τον ρόλο link. Το στοιχείο <input type="checkbox"> έχει τον ρόλο checkbox. Το στοιχείο <h2> έχει τον ρόλο heading.

Όταν κατασκευάζετε ένα προσαρμοσμένο στοιχείο που δεν έχει αντίστοιχο σε HTML, του αναθέτετε έναν ρητό ρόλο:

<!-- Ένας προσαρμοσμένος διακόπτης φτιαγμένος από ένα div -->
<div
  role="switch"
  aria-checked="false"
  tabindex="0"
>
  Σκούρο θέμα
</div>

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

Συνήθεις ρόλοι και πότε να τους χρησιμοποιείτε

Οι ρόλοι widget περιγράφουν διαδραστικά στοιχεία ελέγχου:

Ρόλος	Χρησιμοποιήστε τον όταν
`button`	Ένα προσαρμοσμένο στοιχείο με δυνατότητα κλικ χωρίς καλύτερη ετικέτα HTML
`checkbox`	Προσαρμοσμένος διακόπτης πολλαπλής επιλογής
`combobox`	Ένα πεδίο κειμένου συνδυασμένο με αναπτυσσόμενη λίστα
`dialog`	Μια επικάλυψη modal (μόνο όταν δεν χρησιμοποιείται το εγγενές στοιχείο `<dialog>`)
`listbox`	Μια προσαρμοσμένη αναπτυσσόμενη λίστα
`slider`	Ένα προσαρμοσμένο στοιχείο ελέγχου εύρους
`switch`	Ένας διακόπτης ενεργοποίησης/απενεργοποίησης
`tab`, `tablist`, `tabpanel`	Μια διεπαφή με καρτέλες
`tooltip`	Μια σύντομη περιγραφή που εμφανίζεται με αιώρηση ή εστίαση

Οι ρόλοι δομής εγγράφου περιγράφουν μη διαδραστικό περιεχόμενο:

article — ένα αυτοτελές κομμάτι περιεχομένου
figure — μια εικόνα με λεζάντα
list, listitem — όταν χρειάζεται σημασιολογία λίστας σε στοιχεία που δεν είναι λίστες
presentation / none — αφαιρεί τον έμμεσο ρόλο ενός στοιχείου (χρησιμοποιήστε το σπάνια και προσεκτικά)

Ένα κρίσιμο λάθος: προσθήκη ρόλων χωρίς συμπεριφορά

Κάθε ρόλος φέρει ένα συμβόλαιο που οι αναγνώστες οθόνης και οι χρήστες πληκτρολογίου περιμένουν να τηρηθεί. Ένα role="button" πρέπει να αποκρίνεται τόσο στο Enter όσο και στο Space. Ένα role="checkbox" πρέπει να εναλλάσσεται με το Space. Ένα role="link" πρέπει να πλοηγεί με το Enter.

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

Ορόσημα ARIA

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

Ο HTML5 εισήγαγε σημασιολογικά στοιχεία που αντιστοιχούν άμεσα σε ρόλους ορόσημων. Χρησιμοποιήστε τα και τα ορόσημα προκύπτουν χωρίς κόπο:

Στοιχείο HTML	Ρόλος ορόσημου	Σκοπός
`<header>`	`banner`	Κεφαλίδα σε επίπεδο ιστότοπου (μόνο όταν είναι η κεφαλίδα ανώτατου επιπέδου, όχι μέσα σε `<article>`)
`<nav>`	`navigation`	Ένα μενού πλοήγησης
`<main>`	`main`	Το κύριο περιεχόμενο της σελίδας
`<aside>`	`complementary`	Δευτερεύον περιεχόμενο σχετικό με το κύριο περιεχόμενο
`<footer>`	`contentinfo`	Υποσέλιδο σε επίπεδο ιστότοπου
`<form>`	`form`	Μια φόρμα (μόνο όταν έχει προσβάσιμο όνομα)
`<section>`	`region`	Μια ονομασμένη ενότητα (μόνο όταν έχει προσβάσιμο όνομα μέσω `aria-label` ή `aria-labelledby`)

Δεν χρειάζεται να προσθέσετε role="main" σε ένα στοιχείο <main> — είναι περιττό. Οι ρόλοι ορόσημων ARIA χρειάζονται μόνο όταν δεν μπορείτε να χρησιμοποιήσετε το σημασιολογικό στοιχείο HTML, για παράδειγμα σε μια παλιά βάση κώδικα που παράγει <div class="sidebar">:

<div class="sidebar" role="complementary" aria-label="Σχετικά άρθρα">
  <!-- περιεχόμενο πλαϊνής στήλης -->
</div>

Επισήμανση ορόσημων όταν έχετε περισσότερα από ένα

Όταν μια σελίδα έχει πολλαπλές εμφανίσεις του ίδιου ορόσημου — δύο στοιχεία <nav>, δύο στοιχεία <section> με role="region" — καθένα πρέπει να έχει μοναδικό προσβάσιμο όνομα ώστε οι χρήστες να μπορούν να τα ξεχωρίσουν:

<nav aria-label="Κύρια πλοήγηση">...</nav>
<nav aria-label="Πλοήγηση υποσέλιδου">...</nav>

Χωρίς ετικέτες, ο αναγνώστης οθόνης ανακοινώνει και τα δύο απλώς ως «πλοήγηση». Με ετικέτες, οι χρήστες ακούν «Κύρια πλοήγηση, ορόσημο πλοήγησης» και «Πλοήγηση υποσέλιδου, ορόσημο πλοήγησης» και μπορούν να επιλέξουν το σωστό από τη λίστα ορόσημων.

Ζωντανές περιοχές ARIA

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

Το βασικό χαρακτηριστικό είναι το aria-live. Δέχεται τρεις τιμές:

off — οι ενημερώσεις δεν ανακοινώνονται (η προεπιλογή για όλα τα στοιχεία)
polite — οι ενημερώσεις ανακοινώνονται αφού ο χρήστης ολοκληρώσει την τρέχουσα εργασία του
assertive — οι ενημερώσεις διακόπτουν αμέσως ό,τι λέει ο αναγνώστης οθόνης

<!-- Μια περιοχή μηνυμάτων κατάστασης που συμπληρώνεται μετά την υποβολή φόρμας -->
<div aria-live="polite" id="status-message"></div>

<script>
  document.getElementById('status-message').textContent =
    'Το μήνυμά σας εστάλη.';
</script>

Όταν αλλάζει το περιεχόμενο κειμένου, ένας αναγνώστης οθόνης με aria-live="polite" περιμένει μια παύση στην εκφώνηση και στη συνέχεια ανακοινώνει το νέο περιεχόμενο. Χρησιμοποιήστε polite για τη συντριπτική πλειονότητα των δυναμικών ενημερώσεων. Κρατήστε το assertive μόνο για κρίσιμες αστοχίες — ένα σφάλμα πληρωμής, μια προειδοποίηση λήξης συνεδρίας — όπου η πληροφορία είναι αρκετά επείγουσα ώστε να δικαιολογεί τη διακοπή του χρήστη.

Συντομεύσεις ρόλων για ζωντανές περιοχές

Δύο ρόλοι συμπυκνώνουν τη σημασιολογία του aria-live σε ένα μόνο χαρακτηριστικό:

role="status" — ισοδύναμο με aria-live="polite". Χρησιμοποιήστε το για μηνύματα επιτυχίας, καταστάσεις φόρτωσης και μη επείγουσες ενημερώσεις.
role="alert" — ισοδύναμο με aria-live="assertive" και υπονοεί επίσης aria-atomic="true". Χρησιμοποιήστε το για μηνύματα σφάλματος και κρίσιμες αστοχίες.

<!-- Το σφάλμα ανακοινώνεται αμέσως, διακόπτοντας την τρέχουσα εκφώνηση -->
<div role="alert" id="payment-error"></div>

<!-- Η ενημέρωση κατάστασης ανακοινώνεται ευγενικά μετά την τρέχουσα εκφώνηση -->
<div role="status" id="cart-count">3 προϊόντα στο καλάθι</div>

Συνήθη λάθη στις ζωντανές περιοχές

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

Χρήση του assertive για τα πάντα. Οι assertive ζωντανές περιοχές διακόπτουν ό,τι κάνει ο χρήστης, συμπεριλαμβανομένων άλλων ανακοινώσεων. Ένας μετρητής αποτελεσμάτων αναζήτησης που ενημερώνεται καθώς ο χρήστης πληκτρολογεί δεν δικαιολογεί role="alert". Η υπερβολική χρήση του assertive παράγει μια εχθρική εμπειρία για τους χρήστες αναγνωστών οθόνης.

Υπερβολικά συχνή ενημέρωση της ζωντανής περιοχής. Αν ένας δείκτης προόδου ενημερώνει τη ζωντανή του περιοχή κάθε 100 χιλιοστά του δευτερολέπτου, η ουρά εκφώνησης υπερχειλίζει και οι χρήστες δεν ακούν τίποτα χρήσιμο. Ενημερώνετε το ζωντανό κείμενο μόνο σε ουσιαστικά ορόσημα — 25%, 50%, 75%, ολοκλήρωση — ή περιορίστε τη συχνότητα των ενημερώσεων με χρονοδιακόπτη.

Παράλειψη του aria-atomic. Από προεπιλογή, ανακοινώνεται μόνο ο κόμβος κειμένου που άλλαξε μέσα σε μια ζωντανή περιοχή. Αν θέλετε να διαβαστεί ξανά ολόκληρη η περιοχή (όχι μόνο το τμήμα που άλλαξε), προσθέστε aria-atomic="true":

<div aria-live="polite" aria-atomic="true">
  <span id="count">2</span> προϊόντα απομένουν
</div>

Χωρίς το aria-atomic, ένας αναγνώστης οθόνης μπορεί να ανακοινώσει μόνο «2» όταν ο μετρητής αλλάζει από 3 σε 2. Με αυτό, εκφωνείται η πλήρης φράση «2 προϊόντα απομένουν», που είναι σχεδόν πάντα αυτό που θέλετε.

Άλλα βασικά χαρακτηριστικά ARIA

aria-label — παρέχει προσβάσιμο όνομα όταν δεν είναι κατάλληλο κανένα ορατό κείμενο:

<button aria-label="Κλείσιμο παραθύρου διαλόγου">✕</button>

aria-labelledby — παραπέμπει σε άλλο στοιχείο του οποίου το κείμενο λειτουργεί ως προσβάσιμο όνομα. Προτιμάται έναντι του aria-label όταν το κείμενο της ετικέτας είναι ήδη ορατό στη σελίδα:

<h2 id="billing-heading">Διεύθυνση χρέωσης</h2>
<form aria-labelledby="billing-heading">...</form>

aria-describedby — παραπέμπει σε συμπληρωματικό κείμενο που περιγράφει ένα στοιχείο πέρα από το όνομά του:

<input type="password" aria-describedby="pwd-hint">
<p id="pwd-hint">Πρέπει να έχει τουλάχιστον 12 χαρακτήρες και να περιλαμβάνει ένα σύμβολο.</p>

aria-expanded — υποδεικνύει αν ένα αναδιπλούμενο στοιχείο (αναπτυσσόμενη λίστα, ακορντεόν, μενού) είναι ανοιχτό ή κλειστό. Ενημερώστε το σε JavaScript κάθε φορά που αλλάζει η κατάσταση:

<button aria-expanded="false" aria-controls="nav-menu">Μενού</button>
<ul id="nav-menu" hidden>...</ul>

aria-hidden="true" — αφαιρεί ένα στοιχείο από το δέντρο προσβασιμότητας. Χρησιμοποιήστε το για διακοσμητικά εικονίδια, διπλότυπο κείμενο ή οπτικά στοιχεία που θα πρόσθεταν θόρυβο για τους χρήστες αναγνωστών οθόνης:

<span aria-hidden="true">★★★★☆</span>
<span class="sr-only">4 στα 5 αστέρια</span>

aria-disabled="true" — επισημαίνει ένα στοιχείο ελέγχου ως απενεργοποιημένο χωρίς να το αφαιρεί από τη σειρά εστίασης. Χρήσιμο όταν θέλετε οι χρήστες να ανακαλύψουν ότι το στοιχείο ελέγχου υπάρχει και να καταλάβουν γιατί δεν είναι διαθέσιμο, αντί να το προσπερνούν σιωπηλά:

<button aria-disabled="true">Υποβολή (συμπληρώστε πρώτα όλα τα πεδία)</button>

Έλεγχος του ARIA στην πράξη

Η συγγραφή χαρακτηριστικών ARIA είναι απλή. Το να τα κάνετε σωστά απαιτεί έλεγχο. Οι αυτοματοποιημένοι σαρωτές εντοπίζουν τα προφανώς χαλασμένα μοτίβα — ένα role="button" χωρίς προσβάσιμο όνομα, ένα aria-labelledby που παραπέμπει σε ανύπαρκτο ID, μια ζωντανή περιοχή με μη έγκυρη τιμή aria-live. Δεν μπορούν να σας πουν αν το κείμενο που ανακοινώνεται βγάζει νόημα μέσα στο πλαίσιό του, ούτε αν ένα σύνθετο προσαρμοσμένο widget συμπεριφέρεται σωστά όταν η πλοήγηση γίνεται μόνο με πληκτρολόγιο.

Για ρεαλιστικό έλεγχο, συνδυάστε τουλάχιστον δύο ζεύγη αναγνώστη οθόνης και προγράμματος περιήγησης:

NVDA + Chrome σε Windows — δωρεάν, ευρέως διαδεδομένο, κοντά στον πραγματικό πληθυσμό χρηστών αναγνωστών οθόνης
VoiceOver + Safari σε macOS ή iOS — ενσωματωμένο, απαραίτητο για τον έλεγχο προσβασιμότητας σε κινητά
JAWS + Chrome ή Edge σε Windows — επί πληρωμή, αλλά ο πιο ευρέως χρησιμοποιούμενος αναγνώστης οθόνης σε εταιρικά περιβάλλοντα

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

Ο κανόνας που τα καλύπτει όλα

Η προδιαγραφή του ARIA περιλαμβάνει πέντε κανόνες συγγραφής. Ο πρώτος είναι ο σημαντικότερος:

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

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

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