Μετάβαση στο περιεχόμενο

Έλεγχος Alt Text Εικόνων

Σύντομη απάντηση

Βρείτε εικόνες χωρίς alt text και ελέγξτε τα υπάρχοντα χαρακτηριστικά alt.

Τι δεν κάνει: Ελέγχει αν το alt υπάρχει, είναι κενό ή είναι όνομα αρχείου, όχι αν περιγράφει καλά την εικόνα, και δεν περιλαμβάνει εικόνες που προσθέτουν scripts ή που ορίζονται ως φόντο CSS.

Δωρεάν · Χωρίς εγγραφή · Τρέχει στον περιηγητή σας
100% στον περιηγητή σας — το περιεχόμενό σας δεν φεύγει ποτέ από τη συσκευή σας.

Τι Κάνει

Σαρώνει κάθε <img> στη σελίδα και επικυρώνει την παρουσία alt text, τη σήμανση διακοσμητικών εικόνων μέσω κενού `alt=""`, και μοτίβα όπου το alt text απλώς επαναλαμβάνει το όνομα αρχείου της εικόνας. Επιστρέφει μια λίστα με τις εικόνες που χρειάζονται προσοχή.

Γιατί Έχει Σημασία

Το alt text είναι ο τρόπος με τον οποίο οι χρήστες screen reader μαθαίνουν τι δείχνει μια εικόνα, και το WCAG 1.1.1 απαιτεί κειμενική εναλλακτική για κάθε ουσιαστική εικόνα. Η Google χρησιμοποιεί επίσης το alt text, μαζί με τη σελίδα γύρω του, για να κατανοήσει εικόνες για το Google Images. Το απούσα alt text αποτυγχάνει στην πρώτη ομάδα και δίνει λιγότερα στοιχεία στη δεύτερη.

Πώς Λειτουργεί

  1. Εισάγετε ένα URL σελίδας ή επικολλήστε το HTML της

  2. Διαβάζουμε κάθε στοιχείο <img> και το χαρακτηριστικό alt του από το HTML

  3. Εκτελούμε κανόνες ποιότητας: απούσα alt, κενή alt (διακοσμητική), και alt ίδιο με το όνομα αρχείου

  4. Επιστρέφουμε την κάλυψη alt text συν μια λίστα με τις εικόνες στις οποίες λείπει σωστό alt text

Δείγμα εισόδου + εξόδου

ΕΙΣΟΔΟΣ
url: https://web.dev/articles/vitals
ΕΞΟΔΟΣ
εικόνες: 9
  με alt: 8
  κενό alt (διακοσμητικές): 1
  χωρίς alt: 0                              OK
  alt = όνομα αρχείου: 0                    OK

Κάλυψη: 100%

Πώς διαβάζεται το αποτέλεσμα

Εικόνες (9 στο δείγμα)
Κάθε στοιχείο <img> στο HTML που στέλνει ο server σας. Εικόνες που μπαίνουν ως φόντο CSS, σχεδιάζονται με SVG ή προστίθενται αργότερα από script δεν μετρώνται.
Χωρίς alt (0)
Εικόνες χωρίς καθόλου χαρακτηριστικό alt. Οι αναγνώστες οθόνης τότε συχνά διαβάζουν το όνομα του αρχείου ή λένε απλώς «εικόνα», και το WCAG 1.1.1 δεν τηρείται. Αυτό είναι το πλήθος που ρίχνει τη βαθμολογία.
Κενό alt (1)
Εικόνες με alt="". Είναι σωστό για μια καθαρά διακοσμητική εικόνα και λάθος για μια που μεταφέρει πληροφορία. Το εργαλείο δεν μπορεί να ξεχωρίσει ποια είναι ποια, γι' αυτό δείχνει τον αριθμό χωρίς χαρακτηρισμό — δείτε την καθεμία.
Το alt είναι απλώς το όνομα αρχείου
Ένα alt που επαναλαμβάνει το όνομα του αρχείου της εικόνας, όπως «hero-banner-2» ή «IMG_0423», δεν λέει τίποτα σε κανέναν. Παίρνει προειδοποίηση παρόλο που το χαρακτηριστικό υπάρχει.
Κάλυψη (100%)
Το ποσοστό των εικόνων που έχουν χαρακτηριστικό alt, κενό ή όχι. Το 100% σημαίνει ότι δεν λείπει κανένα· δεν σημαίνει ότι κάθε κείμενο είναι καλό, γιατί το εργαλείο δεν μπορεί να κρίνει αν ένα alt περιγράφει την εικόνα του.
Εικόνες προς διόρθωση
Κάτω από τα νούμερα, η αναφορά δείχνει έως οκτώ εικόνες χωρίς alt με το όνομα αρχείου τους, ώστε να τις βρείτε στο πρότυπο ή στη βιβλιοθήκη πολυμέσων σας.

Ποιοι το Χρησιμοποιούν

  • Διαχειριστής ηλεκτρονικού εμπορίου

    Ελέγξτε σελίδες προϊόντων για εικόνες χωρίς alt text ή με το όνομα αρχείου ως alt text, μια συνήθης προεπιλογή καταλόγου.

  • Ελεγκτής προσβασιμότητας

    Ελέγξτε την κάλυψη WCAG 1.1.1 alt text σελίδα προς σελίδα και καταγράψτε κάθε εικόνα χωρίς χαρακτηριστικό alt.

  • Επιμελητής περιεχομένου

    Ελέγξτε κάθε σελίδα που δημοσιεύετε για να εντοπίσετε εικόνες που ανέβηκαν χωρίς alt text πριν συσσωρευτούν.

Συχνά προβλήματα και πώς λύνονται

  1. Εικόνες περιεχομένου χωρίς alt

    Γράψτε ό,τι δείχνει η εικόνα που έχει σημασία σε αυτή τη σελίδα: «Κόκκινο παπούτσι trail, πλάγια όψη» σε σελίδα προϊόντος, την τάση που δείχνει ένα γράφημα σε μια αναφορά. Κρατήστε το σε μία πρόταση· οι μεγαλύτερες περιγραφές ανήκουν στο κείμενο ή σε λεζάντα.

    <img src="/signups.png" alt="Bar chart: sign-ups doubled from March to June">
<img src="/divider.svg" alt="">

  2. Το CMS προσθέτει εικόνες χωρίς alt

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

  3. Εικονίδια και λογότυπα

    Ένα εικονίδιο δίπλα σε κείμενο είναι διακοσμητικό: alt="". Ένα εικονίδιο που είναι το μόνο περιεχόμενο ενός κουμπιού ή συνδέσμου χρειάζεται alt που λέει την ενέργεια («Αναζήτηση», «Κλείσιμο μενού»). Ένα λογότυπο που οδηγεί στην αρχική χρειάζεται το όνομα του οργανισμού, όχι «λογότυπο».

    <a href="/"><img src="/logo.svg" alt="Example Ltd – home"></a>
<button type="button"><img src="/icons/search.svg" alt="Search"></button>
<img src="/icons/check.svg" alt=""> In stock

  4. Alt γεμάτο λέξεις-κλειδιά

    Οι οδηγίες της Google για τις εικόνες προειδοποιούν να μη γεμίζετε τα alt με λέξεις-κλειδιά. Περιγράψτε την εικόνα· αναφέρετε το θέμα μία φορά, φυσικά, όταν πραγματικά υπάρχει στην εικόνα.

  5. Γραφήματα και σύνθετες εικόνες

    Δώστε στο alt μια σύντομη σύνοψη, όπως «Ραβδόγραμμα: οι εγγραφές διπλασιάστηκαν από Μάρτιο σε Ιούνιο», και βάλτε τα πλήρη νούμερα στο κείμενο της σελίδας ή σε πίνακα δίπλα, ώστε να τα παίρνουν όλοι.

Συχνές Ερωτήσεις

Πότε πρέπει το alt text να είναι κενό;
Για διακοσμητικές εικόνες που δεν προσθέτουν πληροφοριακή αξία (φόντα με μοτίβα, διαχωριστικά). Χρησιμοποιήστε `alt=""` ώστε οι screen readers να τις παραλείπουν. Ποτέ μην παραλείπετε εντελώς το χαρακτηριστικό.
Τι κάνει καλό alt text;
Μια σύντομη φράση που περιγράφει τι δείχνει η εικόνα και γιατί βρίσκεται εκεί. Αποφύγετε το "εικόνα του" ή "φωτογραφία του", και χρησιμοποιήστε μια λέξη-κλειδί μόνο όπου γνήσια περιγράφει την εικόνα.
Πώς χρησιμοποιεί η Google το alt text;
Η Google χρησιμοποιεί το alt text, μαζί με το περιεχόμενο της σελίδας, για να κατανοήσει τι δείχνει μια εικόνα, κάτι που τη βοηθά να την εμφανίσει στο Google Images. Οι βοηθοί AI που διαβάζουν μια σελίδα μπορούν να το χρησιμοποιήσουν με τον ίδιο τρόπο.
Τι γίνεται με τις λεζάντες εικόνων;
Οι λεζάντες (`<figcaption>`) συμπληρώνουν το alt text αλλά δεν το αντικαθιστούν. Και τα δύο πρέπει να περιγράφουν την εικόνα· το alt είναι για screen readers, η λεζάντα είναι για βλέποντες χρήστες.

Πηγές

Η τεκμηρίωση στην οποία βασίζονται το εργαλείο και οι εξηγήσεις αυτής της σελίδας.

Δωρεάν εργαλεία για το θέμα

Οδηγοί για το θέμα

Ερευνητικά δεδομένα για το θέμα

Σχετικά Εργαλεία στη Ανάλυση SEO

Δείτε όλα τα εργαλεία Ανάλυση SEO