"Ποιο όνομα αρχείου θα θέλατε ένα πρόγραμμα ανάγνωσης οθόνης να διαβάζει δυνατά στο αυτί σας 40 φορές την ημέρα;" Είναι μια ελαφρώς παράλογη ερώτηση, αλλά αυτό ακριβώς συμβαίνει όταν μια εικόνα με νόημα μένει με alt="image1.jpg" ή, χειρότερα, δεν υπάρχει καθόλου εναλλακτικό κείμενο. Αυτό το άρθρο είναι ένας πρακτικός οδηγός για τη σύνταξη εναλλακτικού κειμένου που πραγματικά βοηθάει — όχι μόνο παρόν, αλλά καλό.

Συνοπτικά — τι καλύπτει αυτός ο οδηγός

  1. Γιατί το κακό εναλλακτικό κείμενο είναι σχεδόν τόσο κακό όσο το εναλλακτικό κείμενο που λείπει
  2. Πώς να γράψετε καλό εναλλακτικό κείμενο
  3. Πότε να αφήσετε το εναλλακτικό κείμενο σκόπιμα κενό
  4. Τι να κάνετε με πολύπλοκα γραφήματα και διαγράμματα

Γιατί το κακό εναλλακτικό κείμενο είναι σχεδόν τόσο κακό όσο το εναλλακτικό κείμενο που λείπει

Σύμφωνα με το WCAG 1.1.1, όλο το περιεχόμενο χωρίς κείμενο πρέπει να έχει εναλλακτικό κείμενο — αλλά η επίσημη απαίτηση είναι μόνο η μισή ιστορία. Τα "image1.jpg", "image" ή "logo" πληρούν τεχνικά την απαίτηση (υπάρχει χαρακτηριστικό alt), αλλά δεν μεταφέρουν πραγματικές πληροφορίες. Ένας χρήστης με πρόγραμμα ανάγνωσης οθόνης που ακούει μια σειρά από "εικόνα... εικόνα... image23.png" δεν είναι λιγότερο απογοητευμένος από έναν διορατικό χρήστη που κοιτάζει μια σειρά από άδεια καρέ.

Πώς να γράψετε καλό εναλλακτικό κείμενο

Ο καθοδηγητικός κανόνας: περιγράψτε την εικόνα μήνυμα στο πλαίσιο όπου εμφανίζεται, όχι μια κυριολεκτική περιγραφή αυτού που βλέπετε. Μια φωτογραφία ανθρώπων γύρω από ένα τραπέζι σε μια συνάντηση ομάδας, που συνοδεύει ένα άρθρο σχετικά με τη συνεργασία, θα μπορούσε να δοθεί "Ομάδα που εργάζεται μαζί γύρω από ένα τραπέζι" — όχι "Φωτογραφία ανθρώπων". Για ένα γράφημα ή γράφημα, περιγράψτε το takeaway το γράφημα παρουσιάζει: "Το γράφημα ράβδων που δείχνει μια αύξηση 40% στις πωλήσεις το τρίτο τρίμηνο" είναι σημαντικά καλύτερο από το "Γράφημα ράβδων".

Ενδεικτικό διάγραμμα Effective vs. ineffective alt text Comparison between generic alt text and precise, descriptive alt text Alt Text: Not Just "Present" — Also "Good" ❌ Not enough Alt: "image1.jpg" A filename means nothing to a user relying on a screen reader ✅ Precise and purposeful Alt: "Bar chart: 40% rise in sales in Q3" Describes the content and message — not just "there's an image" Purely decorative image? Empty Alt "" is better Golden rule: which two or three words would you say to someone on the phone to describe the image?
Χρυσός κανόνας: ποιες δύο ή τρεις λέξεις θα έλεγες σε κάποιον στο τηλέφωνο για να περιγράψεις την εικόνα, αν δεν μπορούσε να τη δει ο ίδιος;

Πότε να αφήσετε το εναλλακτικό κείμενο σκόπιμα κενό

Δεν χρειάζεται περιγραφή κάθε εικόνας. Οι αμιγώς διακοσμητικές εικόνες — γραφικές διαχωριστικές γραμμές, εικονογραφήσεις φόντου, εικονίδια που απλώς επαναλαμβάνουν κοντινό κείμενο — έχουν την καλύτερη επισήμανση alt="" (κενό εναλλακτικό κείμενο, δεν λείπει) ώστε το πρόγραμμα ανάγνωσης οθόνης να τα παραλείπει εντελώς. Η διαφορά μεταξύ του "λείπει" και του "σκόπιμα κενού" είναι κρίσιμη: το ότι λείπει ακούγεται σαν σφάλμα ή διαβάζει το όνομα του αρχείου. σκόπιμα άδειο απλώς το προσπερνάει σιωπηλά.

💡 Πρακτική συμβουλή

Μια γρήγορη δοκιμή: εάν διαγράψατε εντελώς την εικόνα από τη σελίδα, θα έλειπε τίποτα από έναν χρήστη που δεν μπορεί να τη δει; Αν όχι — είναι πιθανώς διακοσμητικό και ταιριάζει σε ένα κενό alt.

Τι να κάνετε με σύνθετα γραφήματα και διαγράμματα

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

Δεν είστε βέβαιοι ποιο εναλλακτικό κείμενο λείπει ή είναι προβληματικό στον ιστότοπό σας;

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

Κάντε τα έγγραφά σας προσβάσιμα δωρεάν ←