ALT Text: Πώς να το εκμεταλλευτείτε/χρησιμοποιήσετε σωστά.
Το ALT attribute ουσιαστικά είναι το κείμενο που περιγράφει μια εικόνα. Οι περισσότεροι web designers δεν δίνουν ιδιαίτερη σημασία σε αυτή την πολύ σημαντική παράμετρο των γραφικών μιας σελίδας, με αποτέλεσμα να παρατηρείται συνήθως 1 από τα 2 “λάθη” ή καλύτερα “ελλείψεις” που ακολουθούν:
Δεν υπάρχει ALT κείμενο
Ο καλύτερος τρόπος, για να περιγράψετε σε έναν άνθρωπο με περιορισμένη όραση τι θα έπρεπε να βλέπει στην σελίδα σας, είναι κάνοντας μια γραπτή περιγραφή των συνοδευτικών εικόνων, έτσι ώστε ο Voice Browser του να του “διαβάσει” αυτά που βλέπει. Το κείμενο αυτό που περιγράφει μια εικόνα, βρίσκεται στο ALT attribute. Επομένως, όταν δεν έχετε ALT, δυσκολεύετε ή ακόμα χειρότερα, εμποδίζετε εντελώς τους χρήστες με περιορισμένη όραση, να καταλάβουν τι υπάρχει στην ιστοσελίδα σας. Κάθε φορά που γίνεται αυτό, χάνετε και έναν χρήστη ο οποίος είναι και πιθανός πελάτης.
Παράδειγμα κενού ALT attribute.
<p>
Κείμενο το οποίο αποτελεί και περιεχόμενο της ιστοσελίδας σας η οποία αναφέρεται στο ποδόσφαιρο.
<img src=”goal.jpg”/>
Συνέχεια του κειμένου μετά από την εισαγωγή της φωτογραφίας/εικόνας.
</p>
Στο παραπάνω παράδειγμα, δεν υπάρχει ALT attribute. Αυτό πρέπει να το αποφεύγετε. Για να είσαστε σύμφωνοι με τα web standards θα πρέπει τουλάχιστον να παρέχετε στο χρήστη ένα άδειο ALT attribute έστω και αν έτσι δεν του παρέχετε καμιά πληροφορία.
Το ALT κείμενο δεν περιγράφει την φωτογραφία
Είναι πολλοί αυτοί που δικαίως υποστηρίζουν πως η ημιμάθεια είναι χειρότερη από την αμάθεια. Γι’ αυτό το λόγο, το ALT attribute πρέπει να συμπληρώνεται με προσοχή, έχοντας σαν στόχο να περιγράφει μια εικόνα με όσο το δυνατόν μεγαλύτερη λεπτομέρεια και όχι να περιέχει π.χ. το όνομα του γραφικού που χρησιμοποιείται. ALT κείμενα με άστοχο περιεχόμενο που απλά δεν σημαίνουν τίποτα μπορεί να είναι Valid σύμφωνα με τα web standards, αλλά αποτελούν παραπλανητικά στοιχεία μιας ιστοσελίδας μπερδεύοντας τους χρήστες, με αποτέλεσμα να τους διώχνουν.
Παράδειγμα κακογραμμένου ALT attribute.
<p>
Κείμενο το οποίο αποτελεί και περιεχόμενο της ιστοσελίδας σας η οποία αναφέρεται στο ποδόσφαιρο.
<img src=”goal.jpg” alt=”γραφικό 5″ title=””/>
Συνέχεια του κειμένου μετά από την εισαγωγή της φωτογραφίας/εικόνας.
</p>
Περιγράφοντας την εικόνα που είναι στη σελίδα αυτή με τον όρο “γραφικό 5”, ο χρήστης που διαβάζει το ALT attribute καταλαβαίνει ότι αυτή η σελίδα έχει μια εικόνα/γραφικό αλλά δεν ξέρει τι δείχνει. Δείχνει εικόνα από τον αγώνα; Περιέχει ένα banner; Είναι κάποιος γραφικός τίτλος; Στο συγκεκριμένο παράδειγμα ο Web Designer δεν έχει περιγράψει τι δείχνει το γραφικό και ο τελικός χρήστης απλά δεν μπορεί να καταλάβει τίποτα.
Παράδειγμα καλογραμμένου ALT attribute.
Παρακάτω ακολουθεί ένα παράδειγμα σωστής χρήσης του ALT.
<p>
Κείμενο το οποίο αποτελεί και περιεχόμενο της ιστοσελίδας σας η οποία αναφέρεται στο ποδόσφαιρο.
<img src=”goal.jpg” alt=”Ο Τάδε κάνει το σκορ 2-0 με αριστερό πλασέ, ύστερα από σέντρα του Δείνα στο 80′.” title=””/>
Συνέχεια του κειμένου μετά από την εισαγωγή της φωτογραφίας/εικόνας.
</p>
Αυτή είναι μια σωστή εισαγωγή ALT attribute.
Η σωστή περιγραφή όμως ενός ALT attribute δεν βοηθάει μόνο τους χρήστες με περιορισμένη όραση, ή εμάς τους Web Designers να έχουμε σωστό valid κώδικα. Ένας άλλος σημαντικός λόγος για τον οποίο πρέπει να χρησιμοποιείται το ALT είναι γιατί οι μηχανές αναζήτησης το διαβάζουν και καταλαβαίνουν τι περιέχει η σχετική εικόνα. Έτσι, μπορούν να την κάνουν index και να την τοποθετήσουν στο κατάλληλο σημείο της βάσης τους μέχρι κάποιος να την αναζητήσει.
Βασικοί κανόνες συγγραφής ενός ALT κειμένου
Ο καλύτερος τρόπος για να γράψετε σωστά ένα ALT κείμενο είναι να ακολουθήσετε τους παρακάτω βασικούς κανόνες:
- Μην πλατειάζετε. Λίγες λέξεις συνήθως είναι αρκετές εκτός και αν το απαιτεί η περίσταση. Ίσως αν θέλετε να αναπτύξετε περισσότερο, θα ήταν προτιμότερο να εκμεταλλευτείτε το συνοδευτικό κείμενο της σελίδας.
- Μην χρησιμοποιείτε φράσεις όπως “εικόνα του…”, “φωτογραφία της…”, κλπ. Εφόσον είναι μέσα σε γραφικό αυτό που περιγράφετε δεν μπορεί παρά να είναι εικόνα.
- Μην επαναλαμβάνετε στο ALT κείμενο σας ό,τι γράφετε και στο συνοδευτικό κείμενο της ιστοσελίδας σας. Χρησιμοποιήστε το ALT για να περιγράφετε την εικόνα σαν εικόνα.
- Γραφικά που δεν έχουν κάποιο ρόλο στην σελίδα πέραν του διακοσμητικού, είναι προτιμότερο να έχουν κενό ALT attribute.
- Προσπαθήστε να περιγράφετε με λόγια το περιεχόμενο της εικόνας σας.
- Προσπαθήστε να περιγράφετε τις ενέργειες που τυχόν εξελίσσονται στην εικόνα σας ή τις λειτουργίες της.
Σημεία εφαρμογής του ALT
Γραφικά και εικόνες υπάρχουν πολλά σε μια σελίδα. Κάθε γραφικό και εικόνα έχει το ρόλο της και σε κάθε ρόλο αντιστοιχεί και ένα ALT attribute. Ακολουθεί μια σύντομη λίστα με πιθανούς “τύπους” γραφικών και το αντίστοιχο ALT που θα πρέπει να έχουν:
- Τύπος: Λογότυπο
ALT: Όνομα εταιρίας που αντιπροσωπεύει το λογότυπο - Τύπος: Τίτλος
ALT: Ό,τι γράφει ο τίτλος - Τύπος: Μενού από γραφικά
ALT: Όνομα σελίδας την οποία θα επισκεφτεί ο χρήστης αν κάνει κλικ στο κουμπί. - Τύπος: Φωτογραφία
ALT: Περιγραφή του περιεχομένου ή/και της λειτουργίας της φωτογραφίας. - Τύπος: Διακοσμητικό γραφικό
ALT: Κενό, χωρίς περιγραφή - Τύπος: Διαφημιστικό banner
ALT: Όνομα του προϊόντος ή της εταιρίας που διαφημίζεται. - Τύπος: Background images
ALT: Κενό, χωρίς περιγραφή
Επίλογος
Το ALT, αν και εύκολο στην όψη έχει σημαντική βαρύτητα γιατί μπορεί να κρίνει την επόμενη κίνηση κάποιου χρήστη με ειδικές ανάγκες ο οποίος είναι και πιθανός πελάτης ή αναγνώστης του website σας (ή του πελάτη σας), αλλά και να κρατήσει μακριά ή να έλξει αναλόγως τις μηχανές αναζήτησης. Αξίζει την προσοχή σας και είναι σίγουρο πως με τη σωστή χρήση, το ALT attribute θα σας προσφέρει πολλά.
ΧΡΗΣΙΜΗ ΠΛΗΡΟΦΟΡΙΑ: Το άρθρο ALT Text: Πώς να το εκμεταλλευτείτε/χρησιμοποιήσετε σωστά. γράφτηκε από το WebDesignBlog. Η ομάδα μας σας υπενθυμίζει πως αν θέλετε να ενημερώνεστε για τα νέα του διαδικτύου και για επιλεγμένα άρθρα μας, μπορείτε να γραφτείτε εύκολα στο Newsletter μας ή στο RSS Feed μας.
