Οδηγός προσβασιμότητας email για HTML email

Για τους περισσότερους οργανισμούς, το email είναι το πιο συχνό σημείο επαφής που έχουν με τους πελάτες. Μια επιβεβαίωση παραγγελίας, μια επαναφορά κωδικού, μια μηνιαία κατάσταση, ένα ενημερωτικό δελτίο — αυτά τα μηνύματα φτάνουν συχνά πολύ πριν κάποιος επισκεφθεί τον ιστότοπό σας, και φτάνουν πολύ πιο συχνά. Ωστόσο, η προσβασιμότητα email είναι μία από τις πιο παραμελημένες γωνιές της ψηφιακής ένταξης. Ομάδες που επενδύουν σημαντικά σε έναν προσβάσιμο ιστότοπο στέλνουν τακτικά καμπάνιες χτισμένες πάνω σε μπερδεμένο κώδικα, περιεχόμενο μόνο από εικόνες και κουμπιά που διαβάζονται ως «κάντε κλικ εδώ» από έναν αναγνώστη οθόνης.

Ο λόγος είναι εν μέρει ιστορικός και εν μέρει τεχνικός: το HTML email είναι ένας ξεχωριστός κλάδος, με δικούς του περιορισμούς, δικές του μηχανές απόδοσης και δικούς του τρόπους αποτυχίας. Τεχνικές που είναι αυτονόητες στον σύγχρονο ιστό — σημασιολογικά landmarks, διατάξεις flexbox, CSS custom properties — είναι αναξιόπιστες ή εντελώς χαλασμένες σε όλο το πλέγμα των email clients. Το να κάνεις ένα email προσβάσιμο δεν είναι η ίδια δουλειά με το να κάνεις μια ιστοσελίδα προσβάσιμη, και το να τα αντιμετωπίζεις ως πανομοιότυπα είναι ακριβώς ο λόγος που τόσα πολλά email αποτυγχάνουν.

Αυτός ο οδηγός εξετάζει τι πραγματικά απαιτεί η προσβασιμότητα email: πώς να δομήσετε τον κώδικα ώστε η υποστηρικτική τεχνολογία να μπορεί να τον αναλύσει, πώς να χειριστείτε τους πίνακες παρουσίασης που εξακολουθούν να στηρίζουν τη διάταξη email, πώς να γράψετε εναλλακτικό κείμενο και συνδέσμους που βγάζουν νόημα εκτός πλαισίου, πώς να επιβιώσετε από τη σκοτεινή λειτουργία και το ζουμ, και πώς να ελέγξετε το αποτέλεσμα σε Outlook, Gmail, Apple Mail και αναγνώστες οθόνης. Αν προτιμάτε να αναλάβουν ειδικοί αυτό για τα πρότυπά σας, η υπηρεσία αποκατάστασης email καλύπτει ολόκληρη τη στοίβα.

Γιατί το HTML email είναι ξεχωριστός κλάδος

Μια ιστοσελίδα αποδίδεται σε ένα πρόγραμμα περιήγησης. Υπάρχουν λίγα κύρια προγράμματα περιήγησης, ενημερώνονται σε προβλέψιμα χρονοδιαγράμματα και συγκλίνουν στα πρότυπα του ιστού. Το email είναι το αντίθετο. Το μήνυμά σας μπορεί να ανοιχτεί σε δεκάδες clients — Outlook στα Windows, Outlook στον ιστό, το νέο Outlook, Gmail σε πρόγραμμα περιήγησης, την εφαρμογή Gmail, Apple Mail σε macOS και iOS, Yahoo, Samsung Email και πολλά άλλα — καθένα με διαφορετική μηχανή απόδοσης και διαφορετικό, συχνά συρρικνούμενο, υποσύνολο υποστηριζόμενου HTML και CSS.

Το πιο διαβόητο παράδειγμα είναι το desktop Outlook στα Windows, το οποίο ιστορικά απέδιδε email χρησιμοποιώντας τη μηχανή του Microsoft Word αντί για μια πραγματική μηχανή προγράμματος περιήγησης. Αυτό και μόνο αναγκάζει τους προγραμματιστές email να επιστρέψουν σε διατάξεις βασισμένες σε πίνακες, ενσωματωμένα στυλ και αμυντικά μοτίβα που ο ιστός εγκατέλειψε πριν από χρόνια. Πολλοί clients επίσης αφαιρούν μπλοκ <style>, αρνούνται το σύγχρονο CSS και ξαναγράφουν χαρακτηριστικά που θεωρούν μη ασφαλή.

Για την προσβασιμότητα, αυτό έχει τεράστια σημασία. Το σημασιολογικό HTML στο οποίο βασίζεστε για έναν ιστότοπο — <nav>, <main>, ARIA landmarks — συχνά αφαιρείται ή αγνοείται στο email. Δεν μπορείτε να στηριχθείτε σε έναν μοναδικό στόχο απόδοσης. Η προσβασιμότητα email αφορά επομένως τη δημιουργία μηνυμάτων που υποβαθμίζονται με χάρη: που παραμένουν αναγνώσιμα, πλοηγήσιμα και ουσιαστικά ακόμη και όταν η διάταξη καταρρέει, οι εικόνες αποτυγχάνουν να φορτώσουν ή τα στυλ απορρίπτονται. Αυτή η αμυντική νοοτροπία είναι το θεμέλιο πάνω στο οποίο χτίζονται όλα τα υπόλοιπα σε αυτόν τον οδηγό, και είναι ο λόγος που το email ανήκει σε ένα αφιερωμένο πρόγραμμα υπηρεσιών προσβασιμότητας αντί να εντάσσεται στη γενική εργασία ιστού.

Σημασιολογική δομή και λογική σειρά ανάγνωσης

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

Χρησιμοποιήστε πραγματικά στοιχεία επικεφαλίδας για να καθορίσετε την ιεραρχία. Ένα email θα πρέπει να έχει μία λογική επικεφαλίδα ανώτατου επιπέδου (συνήθως το κύριο θέμα ή την προσφορά) ως <h1>, με τις επόμενες ενότητες να σημειώνονται ως <h2> και <h3>. Οι χρήστες αναγνωστών οθόνης πλοηγούνται ανά επικεφαλίδα για να σαρώσουν ένα μήνυμα, οπότε ένα καλά δομημένο περίγραμμα μετατρέπει έναν τοίχο κειμένου σε κάτι που μπορείτε να ξεφυλλίσετε. Μην πλαστογραφείτε επικεφαλίδες με μεγάλο, έντονο κείμενο <span>· οπτικά μπορεί να μοιάζει με επικεφαλίδα, αλλά η υποστηρικτική τεχνολογία ακούει συνηθισμένο κείμενο σώματος. Παρομοίως, χρησιμοποιήστε γνήσιο κώδικα λίστας (<ul>, <ol>, <li>) για λίστες, και ορίστε τη γλώσσα του εγγράφου με ένα χαρακτηριστικό lang στο στοιχείο <html> ώστε οι αναγνώστες οθόνης να χρησιμοποιούν τη σωστή προφορά και φωνή.

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

Πίνακες παρουσίασης και role=“presentation”

Η διάταξη email χτίζεται με πίνακες. Αυτή δεν είναι μια στιλιστική επιλογή· είναι μια απαίτηση επιβίωσης, επειδή η διάταξη βασισμένη σε πίνακες είναι η μόνη προσέγγιση που αποδίδεται με συνέπεια σε όλο το πλέγμα των clients. Το πρόβλημα είναι ότι οι πίνακες φέρουν σημασιολογική σημασία. Από προεπιλογή, ένας αναγνώστης οθόνης ανακοινώνει έναν <table> ως πίνακα δεδομένων, διαβάζει τον αριθμό γραμμών και στηλών, και προσπαθεί να συσχετίσει κελιά με επικεφαλίδες. Για έναν πίνακα που υπάρχει αποκλειστικά για να τοποθετήσει ένα λογότυπο δίπλα σε μια επικεφαλίδα, αυτή η ανακοίνωση είναι θόρυβος — και σε ένα ένθετο email με πολλούς πίνακες γίνεται μια εξαντλητική, αποπροσανατολιστική εμπειρία.

Η λύση είναι να πείτε στην υποστηρικτική τεχνολογία ότι αυτοί οι πίνακες είναι σκαλωσιά διάταξης, όχι δεδομένα. Προσθέστε role="presentation" σε κάθε πίνακα που χρησιμοποιείται για διάταξη: <table role="presentation">. Αυτό αφαιρεί τη σημασιολογία του πίνακα ώστε οι αναγνώστες οθόνης να παραλείπουν τις ανακοινώσεις γραμμών/στηλών και απλώς να διαβάζουν το περιεχόμενο μέσα με τη σειρά. Είναι μία από τις πιο σημαντικές και πιο συχνά παραλειπόμενες τεχνικές στην προσβασιμότητα email, και πρέπει να εφαρμόζεται σε κάθε πίνακα διάταξης, συμπεριλαμβανομένων των ένθετων, όχι μόνο στον εξωτερικό wrapper.

Μερικές σχετικές πρακτικές ενισχύουν αυτό. Μην προσθέτετε summary, κελιά επικεφαλίδας <th>, scope ή <caption> σε πίνακες παρουσίασης — αυτός είναι κώδικας που φέρει νόημα και προορίζεται για γνήσιους πίνακες δεδομένων. Αν το email σας περιέχει πραγματικά δεδομένα σε μορφή πίνακα, όπως μια αναλυτική απόδειξη, κάντε το αντίθετο: αφήστε το ως πίνακα δεδομένων με σωστές επικεφαλίδες <th> και χαρακτηριστικά scope ώστε να μεταφέρονται οι σχέσεις. Η αρχή είναι η συνέπεια μεταξύ εμφάνισης και σημασιολογίας. Το να το πετύχετε σωστά σε μια βιβλιοθήκη προτύπων είναι λεπτεπίλεπτο και εύκολο να υποτροπιάσει, γι’ αυτό είναι βασικό μέρος της εργασίας μας αποκατάστασης email.

Εικόνες και εναλλακτικό κείμενο

Οι εικόνες φέρουν μεγάλο βάρος στο email, και πολλοί παραλήπτες τις βλέπουν με τις εικόνες απενεργοποιημένες από προεπιλογή — ορισμένοι clients αποκλείουν τις απομακρυσμένες εικόνες μέχρι ο χρήστης να δώσει τη συγκατάθεσή του. Αυτό κάνει το εναλλακτικό κείμενο διπλά σημαντικό: είναι ταυτόχρονα απαίτηση προσβασιμότητας και η εφεδρεία που κρατά το μήνυμά σας κατανοητό όταν οι εικόνες δεν φορτώνουν.

Κάθε στοιχείο <img> χρειάζεται ένα χαρακτηριστικό alt. Το τι μπαίνει μέσα εξαρτάται από τον σκοπό της εικόνας. Για μια ενημερωτική εικόνα — μια φωτογραφία προϊόντος, ένα infographic, ένα γράφημα — το εναλλακτικό κείμενο θα πρέπει να μεταφέρει την ίδια πληροφορία που παρέχει η εικόνα. Το «Μπλε αθλητικό παπούτσι, πλάγια όψη» είναι πιο χρήσιμο από το «image1.png», και το εναλλακτικό κείμενο ενός γραφήματος θα πρέπει να συνοψίζει το συμπέρασμα, όχι απλώς να το χαρακτηρίζει ως γράφημα. Για κείμενο που αποδίδεται ως εικόνα, που ακόμη συμβαίνει με διαφημιστικές επικεφαλίδες, το εναλλακτικό κείμενο πρέπει να αναπαράγει τις λέξεις ακριβώς, γιατί αλλιώς αυτό το περιεχόμενο είναι αόρατο για τους αναγνώστες οθόνης και για όποιον έχει τις εικόνες απενεργοποιημένες.

Για διακοσμητικές εικόνες — spacers, διακοσμήσεις φόντου, διαχωριστικά που δεν προσθέτουν τίποτα στο νόημα — χρησιμοποιήστε ένα κενό χαρακτηριστικό alt, γραμμένο ως alt="". Αυτό λέει ρητά στους αναγνώστες οθόνης να παραλείψουν την εικόνα αντί να ανακοινώσουν ένα όνομα αρχείου. Η πλήρης παράλειψη του χαρακτηριστικού δεν είναι το ίδιο πράγμα· ένα απόν alt συχνά κάνει τους αναγνώστες οθόνης να διαβάζουν τη διεύθυνση URL της εικόνας, που είναι το χειρότερο και των δύο κόσμων. Προσέξτε ιδιαίτερα με το συνηθισμένο μοτίβο χρήσης μιας εικόνας ως κουμπί ή σύνδεσμο: το εναλλακτικό κείμενο αυτής της εικόνας πρέπει να περιγράφει την ενέργεια, όπως «Ολοκληρώστε την αγορά σας», όχι την εικόνα.

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

Αντίθεση και σκοτεινή λειτουργία

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

Το email προσθέτει μια επιπλοκή που ο ιστός κυρίως δεν έχει: τη σκοτεινή λειτουργία. Πολλοί clients — Apple Mail, Outlook, Gmail ανάμεσά τους — μετασχηματίζουν αυτόματα τα email όταν ο χρήστης έχει ενεργοποιημένη τη σκοτεινή λειτουργία. Κάποιοι απλώς αλλάζουν το φόντο· άλλοι αντιστρέφουν ή αναχρωματίζουν επιθετικά την παλέτα σας, μερικές φορές μερικώς. Το αποτέλεσμα είναι ότι ένα κουμπί με σκοτεινό κείμενο σε ένα ανοιχτό χρώμα μάρκας μπορεί να καταλήξει με σκοτεινό κείμενο σε ένα σκοτεινό αντεστραμμένο φόντο, ρίχνοντας την αντίθεση στο μηδέν. Το μαύρο κείμενο μέσα σε ένα χρωματιστό πλαίσιο μπορεί να γίνει αόρατο. Λογότυπα με διαφανές φόντο μπορεί να εξαφανιστούν σε έναν σκοτεινό καμβά.

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

Περιγραφικοί σύνδεσμοι και προσβάσιμα κουμπιά

Οι χρήστες αναγνωστών οθόνης συχνά εμφανίζουν μια λίστα με όλους τους συνδέσμους ενός μηνύματος για να πλοηγηθούν ή να αποφασίσουν πού να πάνε. Σε αυτή τη λίστα, το κείμενο του συνδέσμου εμφανίζεται απογυμνωμένο από το γύρω πλαίσιο. Ένα μήνυμα γεμάτο «Κάντε κλικ εδώ», «Διαβάστε περισσότερα» και «Μάθετε περισσότερα» παράγει έναν άχρηστο κατάλογο πανομοιότυπων, ανούσιων καταχωρίσεων. Το κείμενο κάθε συνδέσμου πρέπει να βγάζει νόημα από μόνο του: «Διαβάστε την εαρινή έκθεση βιωσιμότητάς μας» ή «Παρακολουθήστε την παραγγελία σας» λέει στον χρήστη ακριβώς πού οδηγεί ο σύνδεσμος χωρίς καμία περιβάλλουσα πρόταση.

Το ίδιο ισχύει για τα κουμπιά, που στο email είναι συνήθως σύνδεσμοι διαμορφωμένοι ώστε να μοιάζουν με κουμπιά — συχνά χτισμένοι με την τεχνική «bulletproof button» χρησιμοποιώντας ένθετους πίνακες και χρώματα φόντου ώστε να αποδίδονται σε όλους τους clients. Όποια κι αν είναι η κατασκευή, το προσβάσιμο όνομα του κουμπιού πρέπει να περιγράφει την ενέργειά του. Ένα κενό ή ασαφές κουμπί, ή ένα του οποίου το κείμενο ζει μόνο σε μια εικόνα φόντου, είναι αδιέξοδο για την υποστηρικτική τεχνολογία. Αν το κουμπί βασίζεται σε εικόνα, η ενέργεια ανήκει στο εναλλακτικό κείμενο της εικόνας.

Κάντε τους στόχους συνδέσμων και κουμπιών αρκετά μεγάλους ώστε να πατιούνται άνετα — το WCAG 2.2 εισήγαγε ένα ελάχιστο μέγεθος στόχου, και στο κινητό ένας πολύ μικρός στόχος αφής εκνευρίζει τους πάντες, όχι μόνο τους χρήστες με κινητικές αναπηρίες. Βεβαιωθείτε ότι οι σύνδεσμοι διακρίνονται με κάτι περισσότερο από το χρώμα μόνο, αφού οι σύνδεσμοι βασισμένοι μόνο στο χρώμα αποτυγχάνουν για χρήστες με χαμηλή όραση ή αχρωματοψία· η υπογράμμιση είναι η ασφαλέστερη ένδειξη. Και δώστε σε κάθε σύνδεσμο έναν πραγματικό, λειτουργικό προορισμό αντί για ένα placeholder. Το ασαφές κείμενο συνδέσμου είναι μία από τις πιο συχνές αποτυχίες που βλέπουμε, και εμφανίζεται και στον ιστό, όχι μόνο στο email — η σύνοψή μας με τα συνήθη ζητήματα προσβασιμότητας προς αποφυγή καλύπτει το ίδιο μοτίβο σε ένα ευρύτερο πλαίσιο.

Ο preheader και η εμπειρία προεπισκόπησης

Ο preheader — που μερικές φορές ονομάζεται κείμενο προεπισκόπησης — είναι το απόσπασμα κειμένου που εμφανίζεται δίπλα ή κάτω από τη γραμμή θέματος στα εισερχόμενα, πριν ανοιχτεί το μήνυμα. Πολλά email τον σπαταλούν, αφήνοντάς τον να καταλήξει σε όποιο κείμενο τυχαίνει να έρχεται πρώτο: μια γραμμή «Το email δεν εμφανίζεται σωστά;», έναν σύνδεσμο «διαγραφή» ή μια σειρά από κενό εναλλακτικό κείμενο. Για τους χρήστες αναγνωστών οθόνης που πλοηγούνται στα εισερχόμενά τους, και για όποιον αποφασίζει αν θα ανοίξει, αυτός ο σπαταλημένος preheader είναι μια χαμένη ευκαιρία επικοινωνίας.

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

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

Responsive διάταξη και ζουμ

Τα email διαβάζονται στα κινητά τόσο όσο και στους υπολογιστές, και διαβάζονται από ανθρώπους που κάνουν ζουμ για να μεγεθύνουν το κείμενο. Και τα δύο απαιτούν να προσαρμόζεται η διάταξη. Μια σταθερή, πλατιά διάταξη που αναγκάζει την οριζόντια κύλιση σε μια μικρή οθόνη, ή που σπάει όταν ένας χρήστης αυξάνει το μέγεθος κειμένου, είναι ένα εμπόδιο — και το WCAG 2.2 έχει κριτήρια τόσο για το reflow όσο και για την απόσταση κειμένου που ισχύουν εδώ.

Χτίστε τα email ώστε να είναι responsive: μια διάταξη μίας στήλης σε στενές οθόνες είναι σχεδόν πάντα η πιο στιβαρή και προσβάσιμη επιλογή, επειδή διατηρεί τη σειρά ανάγνωσης και αποφεύγει το περιεχόμενο δίπλα-δίπλα που καταρρέει απρόβλεπτα. Όπου χρησιμοποιείτε media queries για να εναλλάσσετε διατάξεις, θυμηθείτε ότι ορισμένοι clients τα αγνοούν, οπότε η προεπιλεγμένη απόδοση πρέπει να παραμένει χρησιμοποιήσιμη. Ορίστε μεγέθη γραμματοσειράς αρκετά μεγάλα ώστε να διαβάζονται χωρίς ζουμ — το κείμενο σώματος κάτω από περίπου 14 έως 16 pixel είναι δύσκολο για πολλούς ανθρώπους στο κινητό — και αποφύγετε να καθηλώνετε το ύψος γραμμής ή την απόσταση χαρακτήρων τόσο σφιχτά ώστε το μεγεθυμένο κείμενο να επικαλύπτεται ή να αποκόπτεται.

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

Έλεγχος σε clients και αναγνώστες οθόνης

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

Καλύψτε τουλάχιστον τους μεγάλους clients: Outlook (desktop στα Windows, καθώς και τις εκδόσεις ιστού και τις νέες), Gmail (ιστός και η εφαρμογή για κινητά) και Apple Mail (macOS και iOS). Για καθέναν, ελέγξτε την απόδοση τόσο σε φωτεινή όσο και σε σκοτεινή λειτουργία, με τις εικόνες ενεργοποιημένες και απενεργοποιημένες, και σε αυξημένο ζουμ. Στη συνέχεια προσθέστε από πάνω τους αναγνώστες οθόνης — VoiceOver με Apple Mail σε macOS και iOS, NVDA ή JAWS με Outlook και Gmail στα Windows, και TalkBack με την εφαρμογή Gmail στο Android. Ακούστε το email όπως θα το άκουγε ένας χρήστης αναγνώστη οθόνης: ανακοινώνονται οι επικεφαλίδες, είναι λογική η σειρά ανάγνωσης, είναι σιωπηλοί οι πίνακες διάταξης, βγάζουν νόημα οι σύνδεσμοι στη λίστα συνδέσμων, ανακοινώνουν οι εικόνες χρήσιμο εναλλακτικό κείμενο ή παραμένουν σιωπηλές όταν είναι διακοσμητικές;

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

Μια προειδοποίηση: μην μπείτε στον πειρασμό από widgets «overlay» προσβασιμότητας που υπόσχονται άμεση συμμόρφωση. Δεν λειτουργούν για ιστότοπους, και είναι άσχετα για το email, όπου δεν υπάρχει σελίδα για να εισαχθεί ένα script. Η πραγματική προσβασιμότητα email προέρχεται από τη διόρθωση του κώδικα, όχι από ένα προσαρτημένο εξάρτημα.

Αποκατάσταση προτύπων σε επίπεδο ESP

Η διόρθωση ενός email είναι χρήσιμη. Η διόρθωση της πηγής που παράγει κάθε email είναι μετασχηματιστική. Οι περισσότεροι οργανισμοί στέλνουν μέσω ενός παρόχου υπηρεσιών email — Mailchimp, Klaviyo, Salesforce Marketing Cloud, Braze και παρόμοιους — όπου οι καμπάνιες συναρμολογούνται από κύρια πρότυπα, επαναχρησιμοποιήσιμα modules και μπλοκ περιεχομένου με σύρσιμο και απόθεση. Αν αυτά τα υποκείμενα πρότυπα φέρουν τις διορθώσεις προσβασιμότητας, κάθε μελλοντική αποστολή τις κληρονομεί αυτόματα, και η ομάδα μάρκετινγκ δεν χρειάζεται να θυμάται μια λίστα ελέγχου για κάθε καμπάνια.

Αυτό είναι το πιο οικονομικά αποδοτικό σημείο για επένδυση. Αποκαταστήστε το κύριο πρότυπο ώστε οι πίνακες διάταξης να φέρουν role="presentation", το χαρακτηριστικό γλώσσας να είναι ορισμένο, η δομή preheader να υπάρχει και η σκαλωσιά επικεφαλίδων να είναι σωστή. Αποκαταστήστε κάθε επαναχρησιμοποιήσιμο module — το μπλοκ hero, την κάρτα άρθρου, το κουμπί, το υποσέλιδο — ώστε ό,τι σύρει η ομάδα να είναι προσβάσιμο εκ κατασκευής. Καθιερώστε μοτίβα για το εναλλακτικό κείμενο ώστε οι συντάκτες να παροτρύνονται να το γράφουν, και ενσωματώστε χρώματα ασφαλή για την αντίθεση και ευαίσθητα στη σκοτεινή λειτουργία στην παλέτα μάρκας που χρησιμοποιούν τα πρότυπα.

Η παγίδα είναι ότι οι builders σύρσιμο-και-απόθεση μπορούν επίσης να υποβαθμίσουν την προσβασιμότητα: ένας builder μπορεί να αφαιρέσει το role="presentation", να παραμορφώσει τον κώδικα κατά την εξαγωγή, ή να επιτρέψει σε έναν συντάκτη να επικολλήσει ένα μη προσβάσιμο μπλοκ. Έτσι η αποκατάσταση προτύπων πρέπει να συνδυάζεται με διακυβέρνηση — οδηγίες, βήματα ελέγχου και περιοδικό επανέλεγχο καθώς ο ESP και η συμπεριφορά εξαγωγής του αλλάζουν. Εκεί αποδίδει η ενσωμάτωση της προσβασιμότητας στη ροή εργασίας· η υπηρεσία μας βελτίωσης της διαδικασίας προσβασιμότητας βοηθά τις ομάδες να κάνουν το προσβάσιμο email προεπιλογή αντί για μεταγενέστερη σκέψη, και η συμβουλευτική προσβασιμότητας το ευθυγραμμίζει με το ευρύτερο πρόγραμμα συμμόρφωσής σας. Για οργανισμούς υπό την European Accessibility Act, η προσβάσιμη επικοινωνία με πελάτες είναι μέρος της εικόνας, που εκθέτει η επισκόπησή μας για τη συμμόρφωση με την EAA.

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

Συμπέρασμα

Η προσβασιμότητα email δεν είναι μια μικρότερη εκδοχή της προσβασιμότητας ιστού — είναι ένας συγγενής αλλά διακριτός κλάδος, διαμορφωμένος από ένα κατακερματισμένο τοπίο clients, διατάξεις βασισμένες σε πίνακες και μηχανές απόδοσης που αγνοούν μεγάλο μέρος του σύγχρονου ιστού. Τα καλά νέα είναι ότι οι τεχνικές είναι καλά εδραιωμένες: σημασιολογική δομή και ένα γερό περίγραμμα επικεφαλίδων, role="presentation" σε κάθε πίνακα διάταξης, ουσιαστικό εναλλακτικό κείμενο με κενό alt για διακόσμηση, αντίθεση που επιβιώνει από τη σκοτεινή λειτουργία, σύνδεσμοι και κουμπιά που περιγράφουν τον εαυτό τους, ένας σκόπιμος preheader, responsive διατάξεις που αντέχουν στο ζουμ, και πειθαρχημένος έλεγχος σε clients και αναγνώστες οθόνης. Εφαρμόστε τες σε επίπεδο προτύπου και η προσβασιμότητα παύει να είναι αγγαρεία ανά καμπάνια και γίνεται ιδιότητα του συστήματός σας.

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

Συχνές ερωτήσεις

Χρειάζομαι πραγματικά role="presentation" σε κάθε πίνακα διάταξης; Ναι. Χωρίς αυτό, οι αναγνώστες οθόνης ανακοινώνουν κάθε πίνακα διάταξης ως πίνακα δεδομένων, διαβάζοντας αριθμούς γραμμών και στηλών και διαταράσσοντας τη ροή. Επειδή οι διατάξεις email φωλιάζουν πίνακες, το χαρακτηριστικό πρέπει να βρίσκεται σε κάθε πίνακα διάταξης, όχι μόνο στον εξωτερικό wrapper. Οι γνήσιοι πίνακες δεδομένων, όπως οι αποδείξεις, διατηρούν αντ’ αυτού τη σημασιολογία δεδομένων τους.

Τι πρέπει να βάλω στο εναλλακτικό κείμενο για μια διακοσμητική εικόνα; Χρησιμοποιήστε ένα κενό χαρακτηριστικό alt, γραμμένο alt="", ώστε οι αναγνώστες οθόνης να παραλείπουν την εικόνα. Μην παραλείψετε εντελώς το χαρακτηριστικό, γιατί ένα απόν alt συχνά κάνει το όνομα αρχείου ή τη διεύθυνση URL της εικόνας να διαβάζεται φωναχτά.

Πώς εμποδίζω τη σκοτεινή λειτουργία να σπάει το email μου; Δεν μπορείτε να ελέγξετε πλήρως πώς χειρίζεται κάθε client τη σκοτεινή λειτουργία, αλλά μπορείτε να σχεδιάσετε αμυντικά: αποφύγετε το καθαρό μαύρο και λευκό, δώστε στα λογότυπα ένα φόντο ή περίγραμμα αντίθεσης, κρατήστε την αντίθεση πάνω από τα όρια του WCAG 2.2, και ελέγξτε το αποδιδόμενο αποτέλεσμα σε σκοτεινή λειτουργία σε κάθε μεγάλο client αντί να υποθέτετε ότι ο σχεδιασμός φωτεινής λειτουργίας θα μεταφερθεί.

Μπορεί ένα αυτοματοποιημένο εργαλείο να κάνει το email μου προσβάσιμο; Τα αυτοματοποιημένα εργαλεία εντοπίζουν ορισμένα ζητήματα — χαρακτηριστικά alt που λείπουν, χαμηλή αντίθεση, απόντες ρυθμίσεις γλώσσας — αλλά δεν μπορούν να κρίνουν αν το εναλλακτικό κείμενο είναι ουσιαστικό, αν η σειρά ανάγνωσης βγάζει νόημα, ή αν οι σύνδεσμοι και τα κουμπιά περιγράφουν τον σκοπό τους. Αυτό απαιτεί χειροκίνητο έλεγχο με αναγνώστες οθόνης. Τα widgets overlay προσβασιμότητας δεν είναι λύση και δεν εφαρμόζονται στο email.

Είναι καλύτερο να διορθώνω μεμονωμένα email ή πρότυπα; Πρότυπα. Η αποκατάσταση κύριων προτύπων και επαναχρησιμοποιήσιμων modules στον ESP σας σημαίνει ότι κάθε μελλοντική αποστολή κληρονομεί τις διορθώσεις, που είναι πολύ πιο οικονομικά αποδοτικό από τη διόρθωση καμπανιών μία προς μία. Συνδυάστε το με διακυβέρνηση ώστε οι builders σύρσιμο-και-απόθεση να μην επανεισάγουν προβλήματα.