Προσβασιμότητα για προγραμματιστές: Δημιουργήστε συμπεριληπτικό κώδικα
Οι προγραμματιστές είναι οι αρχιτέκτονες της προσβασιμότητας σε επίπεδο υλοποίησης. Ενώ οι σχεδιαστές θέτουν το οπτικό και αλληλεπιδραστικό θεμέλιο, ο κώδικας είναι αυτός που τελικά καθορίζει αν ένας ιστότοπος λειτουργεί με πλοήγηση πληκτρολογίου, επικοινωνεί σωστά με τους αναγνώστες οθόνης και διατηρεί την προσβασιμότητα σε διαφορετικά προγράμματα περιήγησης και συσκευές.
Τα καλά νέα είναι ότι οι περισσότερες βέλτιστες πρακτικές προσβασιμότητας ευθυγραμμίζονται με γενικές βέλτιστες πρακτικές για καθαρό, σημασιολογικό και συμμορφούμενο με πρότυπα κώδικα. Η συγγραφή προσβάσιμου κώδικα δεν σημαίνει προσθήκη πολυπλοκότητας — σημαίνει σωστή συγγραφή κώδικα από την αρχή.
Σημασιολογική HTML πρώτα
Το πιο αποτελεσματικό πράγμα που μπορείτε να κάνετε για την προσβασιμότητα είναι να χρησιμοποιείτε σωστά σημασιολογικά στοιχεία HTML. Ένα στοιχείο <button> είναι αυτόματα εστιάσιμο, ενεργοποιείται με πληκτρολόγιο και ανακοινώνεται ως κουμπί από τους αναγνώστες οθόνης. Ένα <div> με onclick handler δεν έχει καμία από αυτές τις λειτουργίες χωρίς σημαντική πρόσθετη εργασία.
Χρησιμοποιήστε <nav> για περιοχές πλοήγησης, <main> για το κύριο περιεχόμενο, <header> και <footer> για τις αντίστοιχες ενότητες, <h1> έως <h6> για επικεφαλίδες σε σωστή ιεραρχική σειρά, <label> με χαρακτηριστικά for για πεδία φόρμας, και native <button> και <a> στοιχεία για αλληλεπιδραστικά controls.
Δομή επικεφαλίδων
Οι επικεφαλίδες δημιουργούν τη δομική περίληψη της σελίδας σας. Χρήστες αναγνωστών οθόνης πλοηγούνται συχνά μέσω επικεφαλίδων. Κάθε σελίδα πρέπει να έχει ακριβώς μία <h1>, και οι επικεφαλίδες πρέπει να ακολουθούν λογική ιεραρχία χωρίς να παραλείπουν επίπεδα.
Προσβασιμότητα πληκτρολογίου
Κάθε λειτουργία πρέπει να μπορεί να εκτελεστεί αποκλειστικά μέσω πληκτρολογίου. Μην δημιουργείτε ποτέ παγίδες πληκτρολογίου. Τα modal dialogs πρέπει να κρατούν την εστίαση εντός τους ενόσω είναι ανοιχτά και να επιστρέφουν την εστίαση στο στοιχείο ενεργοποίησης όταν κλείνουν.
Διασφαλίστε ότι η σειρά εστίασης ακολουθεί λογική αλληλουχία που αντιστοιχεί στην οπτική διάταξη. Αποφύγετε θετικές τιμές tabindex. Χρησιμοποιήστε tabindex="0" για να κάνετε μη αλληλεπιδραστικά στοιχεία εστιάσιμα όταν χρειάζεται, και tabindex="-1" για στοιχεία που πρέπει να εστιάζονται μόνο μέσω προγραμματισμού.
Γλώσσα σελίδας
Καθορίστε την προεπιλεγμένη γλώσσα σε κάθε σελίδα χρησιμοποιώντας το χαρακτηριστικό lang στο στοιχείο <html>. Αν η γλώσσα αλλάζει μέσα στο περιεχόμενο, σημειώστε την αλλαγή με χαρακτηριστικό lang στο περιβάλλον στοιχείο.
Προσβασιμότητα φορμών
Κάθε πεδίο φόρμας πρέπει να έχει προγραμματικά συσχετισμένη ετικέτα. Ομαδοποιήστε σχετικά πεδία χρησιμοποιώντας <fieldset> και <legend>. Όταν εντοπίζονται σφάλματα εισαγωγής, προσδιορίστε το πεδίο με σφάλμα και περιγράψτε το σφάλμα σε κείμενο. Χρησιμοποιήστε autocomplete για κοινά πεδία. Τα μηνύματα κατάστασης που δεν λαμβάνουν εστίαση πρέπει να ανακοινώνονται μέσω ARIA live regions.
Εναλλακτικό κείμενο
Κάθε μη διακοσμητική εικόνα πρέπει να έχει ουσιαστικό εναλλακτικό κείμενο. Για διακοσμητικές εικόνες, χρησιμοποιήστε κενό χαρακτηριστικό alt (alt="").
WAI-ARIA
Η προδιαγραφή Accessible Rich Internet Applications παρέχει πρόσθετη σημασιολογία σε περιπτώσεις όπου η native HTML είναι ανεπαρκής. Ωστόσο, το ARIA πρέπει να χρησιμοποιείται με φειδώ. Ο πρώτος κανόνας του ARIA είναι: αν μπορείτε να χρησιμοποιήσετε native HTML στοιχείο, κάντε το. Το ARIA δεν προσθέτει λειτουργικότητα — προσθέτει μόνο σημασιολογία.
Responsive σχεδιασμός
Το περιεχόμενο πρέπει να μπορεί να παρουσιαστεί χωρίς απώλεια πληροφοριών σε πλάτος 320 CSS pixels χωρίς να απαιτείται οριζόντια κύλιση.
Skip links
Παρέχετε στους χρήστες πληκτρολογίου μηχανισμό παράκαμψης επαναλαμβανόμενων μπλοκ περιεχομένου, όπως μενού πλοήγησης, ώστε να μεταβαίνουν απευθείας στο κύριο περιεχόμενο.
Λίστα ελέγχου προγραμματιστή
Πριν δημοσιεύσετε ένα χαρακτηριστικό, επαληθεύστε: κάθε λειτουργία δουλεύει μόνο με πληκτρολόγιο· η σειρά εστίασης είναι λογική· η εστίαση είναι ορατή σε όλα τα αλληλεπιδραστικά στοιχεία· όλες οι εικόνες έχουν κατάλληλο alt text· όλα τα πεδία φόρμας έχουν ετικέτες· η γλώσσα σελίδας είναι δηλωμένη· η ιεραρχία επικεφαλίδων είναι σωστή· το ARIA χρησιμοποιείται σωστά· το περιεχόμενο αναδιπλώνεται σε 320px πλάτος· και οι δυναμικές ενημερώσεις ανακοινώνονται στους αναγνώστες οθόνης.
Σε αυτή την ενότητα
Είναι προσβάσιμος ο ιστότοπός σας;
Σαρώστε τον ιστότοπό σας δωρεάν και λάβετε τη βαθμολογία WCAG σας σε λίγα λεπτά.
Σαρώστε τον ιστότοπό σας δωρεάν