Για ποιο λόγο προστέθηκε το χαρακτηριστικό roll…

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

Για παράδειγμα:

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

<div role="button" tabindex="0" aria-pressed="false">
  Πάτησέ με
</div>

Ο ρόλος navigation σε ένα στοιχείο nav (αν και το nav ήδη έχει ενσωματωμένη σημασιολογία πλοήγησης) μπορεί να βελτιώσει περαιτέρω την ερμηνεία του σε ορισμένες περιπτώσεις.

<nav role="navigation">
  <ul>
    <li><a href="/">Αρχική</a></li>
  </ul>
</nav>

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

<div role="tablist">
  <button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1">Καρτέλα 1</button>
  <button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2">Καρτέλα 2</button>
</div>
<div id="panel-1" role="tabpanel" aria-labelledby="tab-1">
  Περιεχόμενο καρτέλας 1.
</div>
<div id="panel-2" role="tabpanel" aria-labelledby="tab-2" hidden>
  Περιεχόμενο καρτέλας 2.
</div>

Το χαρακτηριστικό role ταξινομεί τα στοιχεία σύμφωνα με τη λειτουργία και τον σκοπό τους, διασφαλίζοντας πιο ακριβή και χρήσιμη αλληλεπίδραση για χρήστες που χρησιμοποιούν βοηθητικές τεχνολογίες. Είναι σημαντικό να το χρησιμοποιείτε μαζί με άλλα χαρακτηριστικά ARIA (π.χ., aria-label, aria-expanded, aria-hidden), που μεταφέρουν την κατάσταση και τις ιδιότητες των στοιχείων.

Πρέπει να θυμάστε:

Η προτεραιότητα δίνεται πάντα στη φυσική σημασιολογία HTML5. Αν υπάρχει κατάλληλο στοιχείο HTML, χρησιμοποιήστε το αντί να προσομοιάσετε τη συμπεριφορά του μέσω role και άλλων χαρακτηριστικών ARIA. Για παράδειγμα, χρησιμοποιήστε <button> αντί για <div role="button">.
Η αλλαγή του ρόλου ενός στοιχείου δεν αλλάζει τη ενσωματωμένη συμπεριφορά του. Για παράδειγμα, το role="button" σε ένα div δεν το καθιστά εστιαζόμενο ή ενεργό με Space ή Enter χωρίς πρόσθετο JavaScript.

Για ποιο λόγο προστέθηκε το χαρακτηριστικό roll;