ARIA (Accessible Rich Internet Applications) είναι ένα σύνολο χαρακτηριστικών που προσθέτει σημασιολογία προσβασιμότητας — ρόλους, καταστάσεις και ιδιότητες — που το native HTML δεν μπορεί να εκφράσει. Αλλά ο πιο σημαντικός κανόνας ARIA είναι: προτίμησε πρώτα το native HTML.
Save
Save
Τα native στοιχεία έρχονται με σωστούς ρόλους, συμπεριφορά πληκτρολογίου και εστίαση δωρεάν. Ανάφερε σε ARIA μόνο όταν κανένα native στοιχείο δεν κάνει τη δουλειά.
<!-- 1. Roles — what an element IS (for custom widgets) -->
<div role="tablist"><div role="tab" aria-selected="true">Tab 1</div></div>
<!-- 2. States — current condition (dynamic) -->
<button aria-expanded="false" aria-controls="menu">Menu</button>
<input aria-invalid="true" aria-describedby="err" />
<!-- 3. Properties — relationships / labels -->
<input aria-label="Search" />
<div aria-labelledby="heading-id"></div>
<div aria-live="polite">3 results found</div> <!-- screen reader announces updates -->
<div aria-live="assertive" role="alert">Error saving!</div> <!-- interrupts -->
Αυτό είναι πραγματικά χρήσιμο ARIA: ενημέρωση των αναγνωστών οθόνης σχετικά με περιεχόμενο που αλλάζει χωρίς ανανέωση σελίδας (αποτελέσματα αναζήτησης, popup ειδοποιήσεις, σφάλματα επαλήθευσης).
Το λανθασμένο ARIA είναι χειρότερο από το καθόλου — δίνει ψευδείς πληροφορίες στους χρήστες αναγνωστών οθόνης. Και το ARIA αλλάζει μόνο σημασιολογία, ποτέ συμπεριφορά: το role="button" σε ένα <div> δεν το κάνει εστιάσιμο ή κλικάρισιμο· πρέπει να προσθέσεις μόνος σου το tabindex και τους χειριστές πλήκτρων.
Χρησιμοποίησε σημασιολογικό HTML για την περίπτωση 95%. χρησιμοποίησε ARIA για να γεμίσεις τα κενά για προσαρμοσμένα widgets (καρτέλες, σύνθετα πλαίσια, μενού) και για να ανακοινώσεις δυναμικές ενημερώσεις μέσω live περιοχών.
Ακολούθησε τους κανόνες — προτίμησε τα native στοιχεία, μην αλλάζεις τη σημασιολογία του native HTML χωρίς λόγο, κράτα τις καταστάσεις συγχρονισμένες, και ποτέ μην εφαρμόσεις έναν ρόλο που δεν εφαρμόζεις πλήρως.