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

Σε τι χρησιμεύει το εναλλακτικό κείμενο

Το εναλλακτικό κείμενο είναι η εναλλακτική σε κείμενο μιας εικόνας, γραμμένη στο χαρακτηριστικό alt. Οι αναγνώστες οθόνης το διαβάζουν φωναχτά, οι οθόνες braille το εμφανίζουν, και το πρόγραμμα περιήγησης το δείχνει όταν η εικόνα δεν φορτώνει. Μπορούν να το χρησιμοποιούν και οι μηχανές αναζήτησης. Το πρότυπο ιστού για την προσβασιμότητα, το WCAG, ζητά μια εναλλακτική σε κείμενο που κάνει την ίδια δουλειά με την εικόνα (κριτήριο επιτυχίας 1.1.1, επίπεδο A).

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

Τέσσερα είδη εικόνων

• Οι πληροφοριακές εικόνες προσθέτουν νόημα: μια φωτογραφία, ένα εικονίδιο δίπλα σε έναν αριθμό τηλεφώνου, ένα διάγραμμα. Γράψε ένα σύντομο εναλλακτικό κείμενο που μεταφέρει αυτό το νόημα.
• Οι λειτουργικές εικόνες βρίσκονται μέσα σε συνδέσμους και κουμπιά. Το εναλλακτικό κείμενο ονομάζει την ενέργεια ή τον προορισμό, όχι την εικόνα: «Αναζήτηση» για έναν μεγεθυντικό φακό, «Εκτύπωση αυτής της σελίδας» για ένα εικονίδιο εκτυπωτή.
• Οι διακοσμητικές εικόνες δεν προσθέτουν τίποτα: ένα περίγραμμα, ένα διαχωριστικό, ένα στολίδι ή μια εικόνα που απλώς επαναλαμβάνει το κείμενο δίπλα της. Δώσε τους κενό χαρακτηριστικό alt (alt=""), ώστε οι αναγνώστες οθόνης να τις παραλείπουν, ή βάλε τες στο φύλλο στυλ ως φόντο.
• Οι εικόνες κειμένου είναι η τελευταία λύση. Αν χρειάζεσαι μία, το εναλλακτικό κείμενο επαναλαμβάνει τις λέξεις της εικόνας. Ένα λογότυπο που δεν είναι σύνδεσμος παίρνει το όνομα του οργανισμού.

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

1. 1Ρώτα γιατί βρίσκεται η εικόνα στη σελίδα. Τι θα έχανε ένας επισκέπτης αν δεν υπήρχε;
2. 2Γράψε ό,τι μετρά για αυτόν τον σκοπό, σε μια φράση ή σε μία πρόταση.
3. 3Ξεκίνα με το περιεχόμενο. Ένας αναγνώστης οθόνης συνήθως ανακοινώνει ότι κάτι είναι εικόνα, οπότε το «εικόνα με» ή «φωτογραφία με» σπάνια βοηθά.
4. 4Μην επαναλαμβάνεις ό,τι λέει ήδη το κείμενο δίπλα στην εικόνα. Αν τα λέει όλα, η εικόνα είναι διακοσμητική και παίρνει κενό alt.
5. 5Διάβασε το εναλλακτικό κείμενο φωναχτά χωρίς να κοιτάς τη σελίδα. Βγάζει νόημα από μόνο του;

Συνηθισμένα λάθη

• Καθόλου χαρακτηριστικό alt. Κάποιοι αναγνώστες οθόνης διαβάζουν τότε το όνομα του αρχείου.
• Ένα όνομα αρχείου ή ένας κωδικός ως εναλλακτικό κείμενο, όπως «IMG_2041.jpg».
• Η ίδια σειρά λέξεων-κλειδιών σε πολλές εικόνες. Το εναλλακτικό κείμενο είναι πρώτα για ανθρώπους.
• Μια μεγάλη περιγραφή για μια καθαρά διακοσμητική εικόνα.
• Περιγραφή της εμφάνισης ενός κουμπιού-εικόνας αντί για την ενέργειά του. Ένα κουμπί αναζήτησης δεν είναι «μεγεθυντικός φακός», είναι «Αναζήτηση».

Πόσο μεγάλο πρέπει να είναι;

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

Έλεγξε τον ιστότοπό σου

Για να βρεις εικόνες χωρίς χρήσιμο εναλλακτικό κείμενο, τρέξε σε μια σελίδα το δωρεάν εργαλείο «Έλεγχος εναλλακτικών κειμένων». Για να πάρεις προτάσεις για πολλές εικόνες, χρησιμοποίησε το εργαλείο «Εναλλακτικά κείμενα». Μια αυτόματη πρόταση μπορεί να χάσει ό,τι μετρά στη σελίδα σου, οπότε διάβασε κάθε κείμενο και άλλαξέ το όταν δεν ταιριάζει στον σκοπό της εικόνας.

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