Ο πλήρης οδηγός για την προσβασιμότητα ιστού

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

Τι σημαίνει πραγματικά η προσβασιμότητα

Η διεθνής αναφορά είναι οι Οδηγίες για την Προσβασιμότητα του Περιεχομένου του Ιστού, γνωστές ως WCAG. Η τρέχουσα έκδοση είναι το WCAG 2.2, και οι περισσότεροι οργανισμοί στοχεύουν στο επίπεδο AA, το επίπεδο στο οποίο παραπέμπουν νόμοι όπως η Ευρωπαϊκή Πράξη για την Προσβασιμότητα. Δεν χρειάζεται να απομνημονεύσετε τις οδηγίες, αλλά βοηθά να γνωρίζετε τις τέσσερις αρχές στις οποίες στηρίζονται. Μια σελίδα πρέπει να είναι:

• Αντιληπτή. Οι άνθρωποι μπορούν να προσλάβουν το περιεχόμενο, είτε το βλέπουν, είτε το ακούν, είτε το αισθάνονται. Οι εικόνες έχουν εναλλακτικά κείμενα, το βίντεο έχει υπότιτλους, και το κείμενο έχει αρκετή αντίθεση.
• Λειτουργική. Οι άνθρωποι μπορούν να χρησιμοποιήσουν τη σελίδα με ό,τι διαθέτουν, ένα ποντίκι, μόνο ένα πληκτρολόγιο, έναν διακόπτη ή τη φωνή. Τίποτα δεν τους παγιδεύει και τίποτα δεν εξαρτάται από μια αίσθηση ή μια ενέργεια που δεν μπορούν να εκτελέσουν.
• Κατανοητή. Το περιεχόμενο διαβάζεται καθαρά και η διεπαφή συμπεριφέρεται προβλέψιμα, ώστε οι άνθρωποι να μην αιφνιδιάζονται ούτε να μπερδεύονται.
• Εύρωστη. Η σελίδα είναι χτισμένη έτσι ώστε οι περιηγητές και οι υποστηρικτικές τεχνολογίες, τώρα και στο μέλλον, να μπορούν να την ερμηνεύουν αξιόπιστα.

Σχεδόν καθετί πρακτικό σε αυτόν τον οδηγό αντιστοιχεί σε μία από αυτές τις τέσσερις ιδέες.

Ποιους αφορά

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

Τα θεμέλια που μετράνε περισσότερο

Τα καλά νέα είναι ότι η δουλειά με τον μεγαλύτερο αντίκτυπο είναι δομική, όχι διακοσμητική. Κάντε σωστά αυτά τα θεμέλια και έχετε διανύσει το μεγαλύτερο μέρος του δρόμου προς το AA.

Χρησιμοποιήστε το σωστό στοιχείο HTML

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

Κάντε τα πάντα να λειτουργούν από το πληκτρολόγιο

Πολλοί άνθρωποι δεν χρησιμοποιούν ποτέ ποντίκι. Κάθε στοιχείο ελέγχου πρέπει να είναι προσβάσιμο και λειτουργικό μόνο με το πληκτρολόγιο, σε λογική σειρά, με ένα περίγραμμα εστίασης που πραγματικά φαίνεται. Είναι επίσης το πιο γρήγορο χειροκίνητο τεστ που μπορείτε να τρέξετε στον δικό σας ιστότοπο. Δείτε πλοήγηση με πληκτρολόγιο, το τεστ που αποτυγχάνουν οι περισσότεροι ιστότοποι.

Επιλέξτε χρώματα που μπορούν όλοι να διαβάσουν

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

Γράψτε πραγματικά εναλλακτικά κείμενα

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

Χτίστε φόρμες που οι άνθρωποι μπορούν να ολοκληρώσουν

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

Γιατί συμφέρει την επιχείρησή σας

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

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

Μια σημείωση για το ηλεκτρονικό εμπόριο

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

Πώς να δοκιμάσετε

Δεν χρειάζεστε εργαστήριο για να ξεκινήσετε. Μια σύντομη, επαναλήψιμη ρουτίνα πιάνει τα περισσότερα προβλήματα:

1. Αφήστε το ποντίκι στην άκρη και διασχίστε ολόκληρη τη σελίδα με το πλήκτρο Tab. Μπορείτε να φτάσετε και να χρησιμοποιήσετε τα πάντα, και βλέπετε πάντα πού βρίσκεστε;
2. Τρέξτε έναν αυτοματοποιημένο ελεγκτή όπως το axe ή το Lighthouse. Δεν θα πιάσει τα πάντα, αλλά επισημαίνει γρήγορα τις προφανείς αποτυχίες.
3. Ελέγξτε την αντίθεση των χρωμάτων σας με βάση τους στόχους του AA.
4. Δοκιμάστε έναν αναγνώστη οθόνης για δέκα λεπτά. Στα περισσότερα συστήματα υπάρχει ήδη ένας ενσωματωμένος.

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

Από πού να ξεκινήσετε

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

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