Προσβασιμότητα για σχεδιαστές: Δημιουργήστε συμπεριληπτικό οπτικό και αλληλεπιδραστικό σχεδιασμό

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

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

Αντίθεση χρωμάτων

Η ανεπαρκής αντίθεση χρωμάτων είναι ένα από τα πιο διαδεδομένα προβλήματα προσβασιμότητας στο διαδίκτυο. Το WCAG απαιτεί ελάχιστη αναλογία αντίθεσης 4,5:1 μεταξύ κειμένου και φόντου για κανονικό κείμενο και 3:1 για μεγάλο κείμενο (ορίζεται ως 18pt κανονικό ή 14pt έντονο). Στο επίπεδο AAA η απαίτηση αυξάνεται σε 7:1 για κανονικό κείμενο και 4,5:1 για μεγάλο κείμενο.

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

Τα μη κειμενικά στοιχεία έχουν επίσης απαιτήσεις αντίθεσης. Τα στοιχεία διεπαφής χρήστη — κουμπιά, πεδία φόρμας, εικονίδια, δείκτες εστίασης — και τα σημαντικά γραφικά αντικείμενα πρέπει να διατηρούν τουλάχιστον αναλογία αντίθεσης 3:1 έναντι γειτονικών χρωμάτων.

Χρησιμοποιήστε εργαλεία ελέγχου αντίθεσης σε όλη τη διαδικασία σχεδιασμού σας, όχι μόνο στο τέλος. Εργαλεία όπως το WebAIM Contrast Checker ή ο Colour Contrast Analyser σας επιτρέπουν να επαληθεύσετε αναλογίες αντίθεσης πριν οριστικοποιήσετε μια χρωματική παλέτα.

Χρώμα ως πληροφορία

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

Τυπογραφία και μέγεθος κειμένου

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

Σχεδιασμός συνδέσμων

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

Πλοήγηση και συνέπεια

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

Δείκτες εστίασης

Όταν ένας χρήστης πλοηγείται τον ιστότοπό σας με πληκτρολόγιο, πρέπει να υπάρχει ένας ορατός δείκτης που δείχνει ποιο στοιχείο έχει αυτή τη στιγμή εστίαση. Το WCAG 2.2 απαιτεί να μην κρύβεται από άλλο περιεχόμενο (SC 2.4.11). Σχεδιάστε δείκτες εστίασης συνειδητά με επαρκή αντίθεση.

Μέγεθος στόχων αφής

Τα αλληλεπιδραστικά στοιχεία πρέπει να είναι αρκετά μεγάλα ώστε να ενεργοποιούνται χωρίς δυσκολία. Το WCAG 2.2 απαιτεί τουλάχιστον 24x24 CSS pixels (SC 2.5.8). Στο επίπεδο AAA η απαίτηση αυξάνεται σε 44x44 pixels (SC 2.5.5).

Σχεδιασμός φορμών

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

Κίνηση και animation

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

Λίστα ελέγχου σχεδιαστή

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