Κέρδη:
- Δυνατότητα ελέγχου και βελτίωσης της χρωματικής αντίθεσης, εναλλακτικού κειμένου, πρόσβασης πληκτρολογίου και κριτηρίων WCAG με υποστήριξη τεχνητής νοημοσύνης
- Δυνατότητα δημιουργίας και επαλήθευσης κειμένων προσβασιμότητας, όπως εμπειρία ανάγνωσης οθόνης, εναλλακτικό κείμενο και ετικέτες φόρμας με τεχνητή νοημοσύνη
- Κατανόηση του ορίου επικύρωσης των προτάσεων προσβασιμότητας του AI με πραγματική υποστηρικτική τεχνολογία και δοκιμές χρηστών
Προσβασιμότητα (a11y για συντομία) είναι η ικανότητα ενός προϊόντος να χρησιμοποιείται από όλους, συμπεριλαμβανομένων των ατόμων με αναπηρία: ένας χρήστης με προβλήματα όρασης μπορεί να πλοηγηθεί με πρόγραμμα ανάγνωσης οθόνης (βοηθητικό λογισμικό που μετατρέπει κείμενο σε ομιλία), ένα άτομο με κινητικές δυσκολίες μπορεί να κάνει οτιδήποτε με ένα πληκτρολόγιο, ένα άτομο με αχρωματοψία μπορεί να λάβει πληροφορίες χωρίς να βασίζεται στο χρώμα. Ο σχεδιασμός χωρίς αποκλεισμούς είναι ευρύτερος: θέτει την ανθρώπινη ποικιλομορφία στο επίκεντρο του σχεδιασμού, συμπεριλαμβανομένης της ηλικίας, της γλώσσας, του πολιτισμού, της προσωρινής αναπηρίας (σπασμένο χέρι) ή της αναπηρίας με βάση τα συμφραζόμενα (οθόνη στον ήλιο). Η προσβασιμότητα δεν είναι «έξτρα» αλλά θεμελιώδης ευθύνη και νομική απαίτηση στις περισσότερες χώρες. Η τεχνητή νοημοσύνη είναι μια ισχυρή συσκευή προεξόφλησης και δημιουργίας ρεύματος σε αυτόν τον τομέα. αλλά η πραγματική προσβασιμότητα επιβεβαιώνεται μόνο από την πραγματική υποστηρικτική τεχνολογία και τις δοκιμές χρηστών.
WCAG και βασικοί τομείς ελέγχου
Το WCAG (Οδηγίες Προσβασιμότητας Περιεχομένου Ιστού) είναι ένα σύνολο διεθνώς αποδεκτών κριτηρίων προσβασιμότητας. Το επίπεδο ΑΑ είναι γενικά στοχευμένο. Έχει τέσσερις αρχές: το περιεχόμενο πρέπει να είναι αντιληπτό, η διεπαφή πρέπει να είναι χρησιμοποιήσιμη, οι πληροφορίες πρέπει να είναι κατανοητές και τεχνικά ορθές. Οι πιο συνηθισμένοι τομείς ελέγχου στην πράξη είναι:
- Αντίθεση χρώματος: Είναι επαρκής η διαφορά μεταξύ κειμένου και φόντου; (Για AA, αναλογία τουλάχιστον 4,5:1 σε κανονικό κείμενο.)
- Εναλλακτικό κείμενο (εναλλακτικό κείμενο): Έχουν οι εικόνες ισοδύναμο κείμενο που τις εξηγεί στο πρόγραμμα ανάγνωσης οθόνης;
- Πρόσβαση πληκτρολογίου: Μπορεί να γίνει οτιδήποτε χωρίς ποντίκι; Έχει νόημα η σειρά εστίασης;
- Πληροφορίες μόνο για τα χρώματα: Φράσεις όπως "Συμπληρώστε τα κόκκινα πεδία" εξαιρούν τον αχρωματοψία.
- Ετικέτες φόρμας: Κάθε πεδίο εισαγωγής έχει μια ετικέτα που θα διαβάσει το πρόγραμμα ανάγνωσης οθόνης;
- Στόχος αφής: Είναι τα κουμπιά αρκετά μεγάλα για να πιέζονται άνετα με τα δάχτυλα;
Η τεχνητή νοημοσύνη μπορεί να κάνει μια γρήγορη προκαταρκτική σάρωση σε πολλές από αυτές τις περιοχές: μπορείτε να δώσετε λίγο κείμενο και να ρωτήσετε "είναι επαρκής η αντίθεση;", να δώσετε μια περιγραφή εικόνας και να ρωτήσετε "πρότεινε εναλλακτικό κείμενο", να δώσετε μια περιγραφή διεπαφής και να ρωτήσετε "ποια είναι τα προβλήματα πρόσβασης στο πληκτρολόγιο".
Προσοχή: Ακριβώς επειδή το AI δηλώνει "φαίνεται προσβάσιμο" δεν αποτελεί εγγύηση προσβασιμότητας. Ο αυτόματος έλεγχος εντοπίζει μόνο μερικά από τα σφάλματα WCAG. Τα υπόλοιπα θα προκύψουν με την πραγματική χρήση.
Alt text: το μυστικό του καλού εναλλακτικού κειμένου
Το εναλλακτικό κείμενο αντικαθιστά την εικόνα για τον χρήστη με προβλήματα όρασης. Το καλό εναλλακτικό κείμενο μεταφέρει τη λειτουργία και το νόημα της εικόνας, όχι τις διακοσμητικές λεπτομέρειες. Το εναλλακτικό κείμενο για ένα εικονίδιο "προσθήκη στο καλάθι" πρέπει να είναι "Προσθήκη στο καλάθι" και όχι "εικόνα καλαθιού αγορών", επειδή είναι η ενέργεια που έχει σημασία για τον χρήστη. Η τεχνητή νοημοσύνη είναι καλή στο να δημιουργεί περιγράμματα υποκειμένου, αλλά επειδή δεν γνωρίζει το πλαίσιο, μπορεί να παράγει υπερβολικά περιγραφικό ή άσχετο κείμενο. Ρωτάτε κάθε εναλλακτικό κείμενο "γιατί είναι αυτή η εικόνα εδώ;" Περικοπή με την ερώτηση.
οπτική
Αδύναμο υποκείμενο
Δυνατό υποκείμενο
Εικονίδιο καλαθιού (κουμπί)
"Εικονίδιο καλαθιού, γκρι χρώμα"
"Προσθήκη στο καλάθι"
φωτογραφία προϊόντος
"εικόνα"
"Μπλε χειμωνιάτικο παλτό, μπροστινή όψη"
διακοσμητική γραμμή
"Στολίδι γραμμή"
(αφήστε κενό - διακοσμητικό)
Γραφικά
"Γραφική εικόνα"
"Πωλήσεις 2024: αύξηση κάθε τρίμηνο"
Περιεκτική γλώσσα και πεδίο εφαρμογής
Η προσβασιμότητα δεν περιορίζεται σε τεχνικούς ελέγχους. Η γλώσσα είναι επίσης περιεκτική. Κείμενο που υποθέτει το φύλο («χρήστης και ο/η σύζυγός του»), εξαιρείται βάσει ικανότητας («ματιά», «ακούει εύκολα») ή περιέχει πολιτιστικές υποθέσεις θα αποκλείει ορισμένους χρήστες. Το AI μπορεί να σαρώσει το κείμενο από αυτήν την οπτική γωνία, αλλά πρέπει να διασφαλίσετε ότι η «ουδέτερη» γλώσσα που προτείνει παραμένει φυσική και κατανοητή. Η υπερδιόρθωση μπορεί να κάνει το κείμενο άβολο.
τρεις μίνι θήκες
Περίπτωση 1 — Τα σφάλματα αντίθεσης εντοπίστηκαν νωρίς. Μια ομάδα έκανε AI σάρωση των χρωμάτων κειμένου 20 οθονών και διαπίστωσε ότι η αντίθεση ήταν κάτω από το όριο AA σε 7 σημεία. Οι διορθώσεις έγιναν χωρίς να προχωρήσουμε στην ανάπτυξη. αποφεύχθηκε το κόστος της επακόλουθης διόρθωσης. Αλλά η ομάδα και πάλι δεν παρέλειψε την πραγματική δοκιμή του προγράμματος ανάγνωσης οθόνης.
Περίπτωση 2 — Διορθώθηκαν μόνο οι πληροφορίες που σχετίζονται με το χρώμα. Μία φόρμα εμφάνιζε πεδία σφάλματος μόνο με κόκκινο περίγραμμα. Το AI το επισήμανε αυτό. Η ομάδα πρόσθεσε επίσης κείμενο και εικονίδια σε κάθε σφάλμα. Οι χρήστες με αχρωματοψία μπορούσαν πλέον να δουν το σφάλμα. Μάθημα: το χρώμα από μόνο του δεν μπορεί να μεταφέρει πληροφορίες.
Περίπτωση 3 — Η AI παραπλανήθηκε την έγκριση. Ένας σχεδιαστής παρέλειψε τη δοκιμή του αναγνώστη οθόνης επειδή αποκάλεσε το AI «προσβάσιμο». Στην πραγματική δοκιμή, αποδείχθηκε ότι η σειρά εστίασης ήταν μπερδεμένη και ορισμένα κουμπιά δεν διαβάστηκαν καθόλου. Μάθημα: η αυτόματη επιβεβαίωση είναι η αρχή. η πραγματική υποστηρικτική τεχνολογία είναι υποχρεωτική.
Αντιγράψιμα μηνύματα
Σαρώστε εκ των προτέρων αυτήν την περιγραφή διεπαφής για προσβασιμότητα:1) υπάρχουν πληροφορίες που βασίζονται αποκλειστικά στο χρώμα;2) υπάρχει ετικέτα κειμένου για κάθε στοιχείο με δυνατότητα κλικ;3) υπάρχουν στοιχεία στα οποία δεν είναι δυνατή η πρόσβαση μέσω πληκτρολογίου;4) έχει νόημα η σειρά εστίασης; Καταχωρίστε κάθε πρόβλημα και πρόταση. Προσθέστε τη σημείωση "Απαιτείται πραγματική δοκιμή". Συνταγή: <<κείμενο>>
Προτείνετε εναλλακτικό κείμενο για αυτές τις εικόνες. Κανόνας: μεταφέρετε τη ΛΕΙΤΟΥΡΓΙΑ/ νόημα της εικόνας, όχι τη διακοσμητική λεπτομέρεια. Γράψτε την ενέργεια για τα εικονίδια κουμπιών. Για διακοσμητικές εικόνες, πείτε "το εναλλακτικό κείμενο πρέπει να μείνει κενό". Περιγραφές περιβάλλοντος και εικόνων: <<λίστα>>
Ελέγξτε αυτά τα κείμενα για γλώσσα χωρίς αποκλεισμούς: υπάρχουν υποθέσεις φύλου, γλώσσα αποκλεισμού που βασίζεται σε ικανότητες (όπως «βλέπω», «ακούω»), πολιτιστικές υποθέσεις; Προτείνετε εναλλακτικές λύσεις που παραμένουν φυσικές. μην υπερδιορθώνετε.Κείμενα: <<λίστα>>
Γράψτε προσβάσιμο σφάλμα και κείμενο ετικέτας για αυτήν τη φόρμα: ορατή ετικέτα για κάθε πεδίο, περιγραφή για το πρόγραμμα ανάγνωσης οθόνης και μήνυμα που περιγράφει το σφάλμα, ανεξάρτητα από το χρώμα (κείμενο + εικονίδιο). Φωνή και τόνος: <<κάρτα>>Πεδία φόρμας: <<λίστα>>
Αδύναμη προτροπή / Ισχυρή προτροπή
Αδύναμο: "Γράψτε εναλλακτικό κείμενο για αυτήν την εικόνα."
Το αποτέλεσμα: "Μια εικόνα" ή υπερβολικά περιγραφικό κείμενο που χάνει τη λειτουργία.
Ισχυρό: "Προτείνετε εναλλακτικό κείμενο για αυτές τις εικόνες, μεταφέρετε τη λειτουργία/το νόημα της εικόνας, γράψτε την ενέργεια για τα εικονίδια κουμπιών, σημειώστε τα διακοσμητικά ως "πρέπει να μείνουν κενά".
Το αποτέλεσμα: Συμφραζόμενα, προσανατολισμένα στη λειτουργία, ακριβή υποκείμενα.
Διαφορά: η ισχυρή προτροπή φέρνει λειτουργική εστίαση + σύμβαση κουμπιών + διακοσμητική διάκριση.
Συνήθη λάθη
- Λάθος έγκριση της τεχνητής νοημοσύνης ως εγγύηση προσβασιμότητας. Δεν είναι υποκατάστατο των πραγματικών δοκιμών.
- Απλώς φόρτωση πληροφοριών σε χρώμα. Οι χρήστες με αχρωματοψία χάνουν πληροφορίες.
- Εξήγηση της εικόνας, όχι της λειτουργίας, στο εναλλακτικό κείμενο. Πρέπει να γραφτεί μια ενέργεια για το εικονίδιο του κουμπιού.
- Αφήνοντας την προσβασιμότητα για το τέλος. Εάν δεν ξεκινήσει στο στάδιο wireframe, θα είναι ακριβό να το διορθώσετε αργότερα.
- Υπερδιορθωμένη γλώσσα. Η συμπεριληπτική γλώσσα που χάνει τη φυσικότητα βλάπτει επίσης την κατανόηση.
Συνοπτικά
Προσβασιμότητα σημαίνει ότι το προϊόν είναι διαθέσιμο σε όλους. Δεν είναι επιπλέον, είναι ουσιαστική και, στα περισσότερα σημεία, νομική ευθύνη. Η τεχνητή νοημοσύνη είναι πολύτιμη ως γρήγορη προκαταρκτική πτήση και γεννήτρια πρόχειρων για αντίθεση, εναλλακτικό κείμενο, πρόσβαση στο πληκτρολόγιο και σάρωση γλώσσας χωρίς αποκλεισμούς. Αλλά η αυτόματη έγκριση συλλαμβάνει μόνο μερικά από τα σφάλματα WCAG. Η πραγματική προσβασιμότητα επιβεβαιώνεται με δοκιμές με προγράμματα ανάγνωσης οθόνης και πραγματικούς χρήστες υποστηρικτικής τεχνολογίας. Χρησιμοποιήστε το μοντέλο ως μπροστινό πρόγραμμα περιήγησης, λάβετε την απόδειξη από πραγματικές δοκιμές.
Εργασία εφαρμογής
- Σαρώστε εκ των προτέρων μια περιγραφή διεπαφής για προσβασιμότητα με την πρώτη ερώτηση.
- Διορθώστε μόνο πληροφορίες που βασίζονται σε χρώμα ή στοιχεία χωρίς ετικέτα.
- Δημιουργήστε εναλλακτικά κείμενα προσανατολισμένα στη λειτουργία για τα γραφικά στην οθόνη σας με τη δεύτερη προτροπή.
- Ελέγξτε τα κείμενά σας για γλώσσα χωρίς αποκλεισμούς με την τρίτη προτροπή.
- Εάν είναι δυνατόν, δοκιμάστε την πραγματική δοκιμή με ένα πρόγραμμα ανάγνωσης οθόνης και σημειώστε τι χάνει η αυτόματη σάρωση.
λίστα ελέγχου
- [ ] Έκανα σάρωση αντίθεσης, πρόσβασης πληκτρολογίου και ετικετών.
- [ ] Δεν άφησα πληροφορίες βασισμένες αποκλειστικά στο χρώμα.
- [ ] Έγραψα τα υποκείμενα λειτουργικά και τα διακοσμητικά τα άφησα κενά.
- [ ] Έκανα έναν περιεκτικό γλωσσικό έλεγχο, διατήρησα τη φυσικότητα.
- [ ] Δεν θεώρησα την αυτόματη έγκριση εγγύηση προσβασιμότητας.
- [ ] Σχεδίασα/υλοποίησα πραγματικές δοκιμές υποστηρικτικής τεχνολογίας.