HTML ιδιότητα alt του ετικέτας <img>
Ορισμός και χρήση
Εικονικό παράδειγμα Η ιδιότητα είναι μια απαραίτητη ιδιότητα που καθορίζει το εναλλακτικό κείμενο όταν η εικόνα δεν μπορεί να εμφανιστεί.
Αν ο χρήστης δεν μπορεί να δει την εικόνα για οποιοδήποτε από τα παρακάτω αίτια, η ιδιότητα alt μπορεί να παρέχει εναλλακτικές πληροφορίες για την εικόνα:
- Αργή ταχύτητα δικτύου
- Σφάλμα στην ιδιότητα src
- Ο περιηγητής απενεργοποιεί τις εικόνες
- Ο χρήστης χρησιμοποιεί έναν αναγνώστη οθόνης
Η ιδιότητα alt του ετικέτας <img> καθορίζει το εναλλακτικό κείμενο που χρησιμοποιείται όταν η εικόνα δεν μπορεί να εμφανιστεί ή όταν ο χρήστης απενεργοποιεί την εμφάνιση των εικόνων στο περιηγητή.
Προτείνουμε ιδιαίτερα να χρησιμοποιείτε αυτή την ιδιότητα σε κάθε εικόνα του έγγραφου. Έτσι, ακόμα και αν η εικόνα δεν μπορεί να εμφανιστεί, ο χρήστης μπορεί να δει μερικές πληροφορίες για το τι χάθηκε. Επίσης, για τους αναγνώστες με αναπηρίες, η ιδιότητα alt είναι συχνά η μοναδική μέθοδος για να κατανοήσουν το περιεχόμενο της εικόνας.
Σημείωση:Αν χρειάζεται να δημιουργήσετε ένα εικονικό παράδειγμα για την εικόνα, χρησιμοποιήστε Ενότητα τίτλου!
Σημειώσεις και παρατηρήσεις
Σημείωση:Εικονικό παράδειγμα Η τιμή της ιδιότητας είναι μια αλφαριθμητική ακολουθία που μπορεί να περιέχει μέχρι 1024 χαρακτήρες, συμπεριλαμβανομένων των κενών και των σημείων στίξης. Αυτή η αλφαριθμητική ακολουθία πρέπει να περιλαμβάνεται σε εισαγωγικά. Το κείμενο alt μπορεί να περιέχει αναφορές σε ειδικούς χαρακτήρες, αλλά δεν επιτρέπεται να περιέχει άλλες κατηγορίες σημάτων, ειδικά δεν επιτρέπεται να περιέχει σημάδια στυλ.
Σημείωση:Όταν ο χρήστης κινεί το ποντίκι πάνω στο στοιχείο img, ο Internet Explorer εμφανίζει την τιμή του alt. Αυτό το comportment δεν είναι σωστό. Όλοι οι άλλοι περιηγητές προσπαθούν να προσεγγίσουν τον κανόνα, εμφανίζοντας το εναλλακτικό κείμενο μόνο όταν η εικόνα δεν μπορεί να εμφανιστεί.
Σημείωση:Αν χρειάζεται να δημιουργήσετε ένα εικονικό παράδειγμα για την εικόνα, χρησιμοποιήστε Ενότητα τίτλου。
Παράδειγμα
Παράδειγμα 1
<img src="/i/eg_tulip.jpg" alt="Shanghai Flower Port - Tulip" />
Αν δεν μπορεί να εμφανιστεί η εικόνα, ο περιηγητής θα εμφανίσει το εναλλακτικό κείμενο, όπως αυτό:
Επιπλέον, όταν ο χρήστης κινεί το ποντίκι πάνω από την εικόνα, τα πιο πρόσφατα προγράμματα περιήγησης εμφανίζουν περιγραφικό κείμενο σε ένα κουτί. Το παρακάτω κώδικας προσθέτει περιγραφικό κείμενο στην ιδιότητα alt για την εικόνα:
Μπορείτε να κινήσετε το ποντίκι σας πάνω από την παρακάτω φωτογραφία και να δείτε το αντίστοιχο αποτέλεσμα:
Ο κουτί με το κόκκινο κύκλο είναι το αποτέλεσμα που εμφανίζεται όταν ο χρήστης κινεί το ποντίκι πάνω από την εικόνα στο πρόγραμμα περιήγησης IE7:
Παράδειγμα 2
Η εικόνα που καθορίζει το αντικαταστάσιμο κείμενο:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
Γλώσσα
<img alt="Κείμενο">
Αξία ιδιότητας
| Αξία | Περιγραφή |
|---|---|
| Κείμενο |
Ορίζει το αντικαταστάσιμο κείμενο της εικόνας. Προincipes χρήσης του alt κειμένου:
|
Υποστήριξη προγράμματος περιήγησης
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| Υποστήριξη | Υποστήριξη | Υποστήριξη | Υποστήριξη | Υποστήριξη |
