Έλεγχος Alt Text Εικόνων
Σύντομη απάντηση
Βρείτε εικόνες χωρίς alt text και ελέγξτε τα υπάρχοντα χαρακτηριστικά alt.
Τι Κάνει
Σαρώνει κάθε <img> στη σελίδα και επικυρώνει την παρουσία alt text, τη σήμανση διακοσμητικών εικόνων μέσω κενού `alt=""`, και μοτίβα όπου το alt text απλώς επαναλαμβάνει το όνομα αρχείου της εικόνας. Επιστρέφει μια λίστα με τις εικόνες που χρειάζονται προσοχή.
Γιατί Έχει Σημασία
Το alt text είναι ο τρόπος με τον οποίο οι χρήστες screen reader μαθαίνουν τι δείχνει μια εικόνα, και το WCAG 1.1.1 απαιτεί κειμενική εναλλακτική για κάθε ουσιαστική εικόνα. Η Google χρησιμοποιεί επίσης το alt text, μαζί με τη σελίδα γύρω του, για να κατανοήσει εικόνες για το Google Images. Το απούσα alt text αποτυγχάνει στην πρώτη ομάδα και δίνει λιγότερα στοιχεία στη δεύτερη.
Πώς Λειτουργεί
-
Εισάγετε ένα URL σελίδας ή επικολλήστε το HTML της
-
Διαβάζουμε κάθε στοιχείο <img> και το χαρακτηριστικό alt του από το HTML
-
Εκτελούμε κανόνες ποιότητας: απούσα alt, κενή alt (διακοσμητική), και alt ίδιο με το όνομα αρχείου
-
Επιστρέφουμε την κάλυψη alt text συν μια λίστα με τις εικόνες στις οποίες λείπει σωστό alt text
Δείγμα εισόδου + εξόδου
url: https://rankproof.eu/tools
εικόνες: 18 με alt: 17 OK κενό alt (διακοσμητικές): 1 OK χωρίς alt: 0 OK filename-as-alt: 0 OK Κάλυψη: 100%
Ποιοι το Χρησιμοποιούν
-
Διαχειριστής ηλεκτρονικού εμπορίου
Ελέγξτε σελίδες προϊόντων για εικόνες χωρίς alt text ή με το όνομα αρχείου ως alt text, μια συνήθης προεπιλογή καταλόγου.
-
Ελεγκτής προσβασιμότητας
Ελέγξτε την κάλυψη WCAG 1.1.1 alt text σελίδα προς σελίδα και καταγράψτε κάθε εικόνα χωρίς χαρακτηριστικό alt.
-
Επιμελητής περιεχομένου
Ελέγξτε κάθε σελίδα που δημοσιεύετε για να εντοπίσετε εικόνες που ανέβηκαν χωρίς alt text πριν συσσωρευτούν.
Συχνές Ερωτήσεις
Πότε πρέπει το alt text να είναι κενό;
Για διακοσμητικές εικόνες που δεν προσθέτουν πληροφοριακή αξία (φόντα με μοτίβα, διαχωριστικά). Χρησιμοποιήστε `alt=""` ώστε οι screen readers να τις παραλείπουν. Ποτέ μην παραλείπετε εντελώς το χαρακτηριστικό.
Τι κάνει καλό alt text;
Μια σύντομη φράση που περιγράφει τι δείχνει η εικόνα και γιατί βρίσκεται εκεί. Αποφύγετε το "εικόνα του" ή "φωτογραφία του", και χρησιμοποιήστε μια λέξη-κλειδί μόνο όπου γνήσια περιγράφει την εικόνα.
Πώς χρησιμοποιεί η Google το alt text;
Η Google χρησιμοποιεί το alt text, μαζί με το περιεχόμενο της σελίδας, για να κατανοήσει τι δείχνει μια εικόνα, κάτι που τη βοηθά να την εμφανίσει στο Google Images. Οι βοηθοί AI που διαβάζουν μια σελίδα μπορούν να το χρησιμοποιήσουν με τον ίδιο τρόπο.
Τι γίνεται με τις λεζάντες εικόνων;
Οι λεζάντες (`<figcaption>`) συμπληρώνουν το alt text αλλά δεν το αντικαθιστούν. Και τα δύο πρέπει να περιγράφουν την εικόνα· το alt είναι για screen readers, η λεζάντα είναι για βλέποντες χρήστες.