Κείμενο Συνδέσμων που Βγάζει Νόημα Εκτός Πλαισίου

Πώς πλοηγούνται πραγματικά οι χρήστες αναγνωστών οθόνης

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

Οι αναγνώστες οθόνης προσφέρουν μια συντόμευση που οι περισσότεροι βλέποντες χρήστες δεν ξέρουν ότι υπάρχει: πατώντας ένα μόνο πλήκτρο (συνήθως το γράμμα L στους περισσότερους αναγνώστες οθόνης) γίνεται κυκλική εναλλαγή σε όλους τους συνδέσμους της σελίδας, διαβάζοντάς τους έναν προς έναν, εκτός πλαισίου. Οι χρήστες το χρησιμοποιούν αυτό για να σαρώσουν γρήγορα μια σελίδα, όπως το μάτι ενός βλέποντος χρήστη μπορεί να διατρέξει τις επικεφαλίδες και τα κουμπιά πρόσκλησης σε δράση.

Αν η σελίδα σας έχει δώδεκα συνδέσμους που λένε “Διαβάστε περισσότερα”, αυτή η λίστα είναι ανούσια. Ο χρήστης ακούει: “Διαβάστε περισσότερα. Διαβάστε περισσότερα. Διαβάστε περισσότερα. Διαβάστε περισσότερα…” Δεν μπορεί να καταλάβει πού οδηγεί ο καθένας από αυτούς.

Αυτό είναι το θεμελιώδες πρόβλημα που προσπαθεί να λύσει η προσβασιμότητα του κειμένου συνδέσμων: κάθε σύνδεσμος πρέπει να είναι αυτο-περιγραφικός, επειδή το πλαίσιο εξαφανίζεται όταν πλοηγείστε ανά σύνδεσμο.

Τι λέει το WCAG

Το 2.4.4 Σκοπός Συνδέσμου (Εντός Πλαισίου) στο Επίπεδο A απαιτεί ο σκοπός κάθε συνδέσμου να μπορεί να προσδιοριστεί από το κείμενο του συνδέσμου και μόνο, ή από το κείμενο του συνδέσμου μαζί με το περιβάλλον πλαίσιό του (την παράγραφο, το στοιχείο λίστας, το κελί πίνακα ή την επικεφαλίδα στην οποία βρίσκεται).

Το 2.4.9 Σκοπός Συνδέσμου (Μόνο Σύνδεσμος) στο Επίπεδο AAA πηγαίνει παραπέρα, απαιτώντας τον σκοπό του συνδέσμου από το κείμενο του συνδέσμου και μόνο, χωρίς εξάρτηση από το πλαίσιο. Το να στοχεύετε σε αυτό είναι καλή ιδέα ακόμη κι αν στοχεύετε μόνο στη συμμόρφωση AA.

Το 2.5.3 Ετικέτα στο Όνομα (Επίπεδο A) απαιτεί ότι όταν ένας σύνδεσμος ή κουμπί έχει μια ορατή ετικέτα κειμένου, το προσβάσιμο όνομα ξεκινά με αυτό το κείμενο. Ένα κουμπί εικονιδίου με ετικέτα “Μάθετε περισσότερα για την προσβασιμότητα” με ένα aria-label “Κάντε κλικ εδώ” αποτυγχάνει σε αυτό το κριτήριο.

Συνήθεις αποτυχίες και τι να κάνετε αντ’ αυτού

”Κάντε κλικ εδώ” και “Διαβάστε περισσότερα”

Αυτές είναι οι πιο διαδεδομένες αποτυχίες προσβασιμότητας συνδέσμων στον ιστό.

<!-- Αποτυγχάνει: κανένα νόημα εκτός πλαισίου -->
<a href="/blog/wcag-compliance">Read more</a>

<!-- Περνά: αυτο-περιγραφικό -->
<a href="/blog/wcag-compliance">Read our WCAG 2.2 compliance guide</a>

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

Γενικοί σύνδεσμοι “εδώ”

Το “Κάντε κλικ εδώ για να κατεβάσετε την αναφορά” αποτυγχάνει για τον ίδιο λόγο — η ίδια η λέξη του συνδέσμου είναι απλώς “εδώ”.

<!-- Αποτυγχάνει -->
<p>For the full findings, click <a href="/report.pdf">here</a>.</p>

<!-- Περνά: το κείμενο του συνδέσμου περιγράφει τι συνδέεται -->
<p>Download the <a href="/report.pdf">2025 accessibility audit report (PDF)</a>.</p>

Σημειώστε τον δείκτη PDF στις παρενθέσεις — αυτή είναι καλή πρακτική για να ενημερώσετε τους χρήστες ότι ακολουθώντας τον σύνδεσμο θα ανοίξει ένα PDF αντί για μια ιστοσελίδα.

Σύνδεσμοι προς τον ίδιο προορισμό με διαφορετικό κείμενο, ή διαφορετικοί προορισμοί με το ίδιο κείμενο

Και τα δύο δημιουργούν σύγχυση. Αν πέντε σύνδεσμοι πλοήγησης λένε όλοι “Μάθετε περισσότερα” αλλά δείχνουν σε διαφορετικές σελίδες υπηρεσιών, οι χρήστες δεν μπορούν να προβλέψουν πού θα καταλήξουν. Αντίστροφα, δύο διαφορετικοί σύνδεσμοι που λένε “οδηγός συμμόρφωσης WCAG” αλλά οδηγούν σε διαφορετικές σελίδες είναι εξίσου μπερδευτικοί.

Σύνδεσμοι και κουμπιά μόνο με εικονίδιο

Ένας σύνδεσμος ή κουμπί που περιέχει μόνο ένα εικονίδιο — χωρίς ορατό κείμενο — πρέπει να έχει ένα προσβάσιμο όνομα που παρέχεται μέσω aria-label ή aria-labelledby. Χωρίς αυτό, οι αναγνώστες οθόνης ανακοινώνουν το όνομα αρχείου της εικόνας του εικονιδίου ή τίποτα απολύτως.

<!-- Αποτυγχάνει: ανακοινώνεται ως "link, graphic" ή το όνομα αρχείου του SVG -->
<a href="/social/twitter">
  <svg><!-- εικονίδιο twitter --></svg>
</a>

<!-- Περνά: το aria-label παρέχει το προσβάσιμο όνομα -->
<a href="/social/twitter" aria-label="QualiBooth on Twitter">
  <svg aria-hidden="true"><!-- εικονίδιο twitter --></svg>
</a>

Το aria-hidden="true" στο SVG εμποδίζει τους αναγνώστες οθόνης να ανακοινώσουν τον τίτλο ή το περιεχόμενο του SVG — αφού ο ίδιος ο σύνδεσμος έχει ήδη μια ετικέτα, το περιεχόμενο του εικονιδίου είναι πλεονάζον.

Χρήση του aria-label για συμπλήρωση του ορατού κειμένου

Όταν μια σελίδα έχει πολλαπλούς συνδέσμους “Download” και δεν μπορείτε να αλλάξετε το ορατό κείμενο (ένας σχεδιαστικός περιορισμός), το aria-label μπορεί να επεκτείνει το προσβάσιμο όνομα:

<!-- Το ορατό κείμενο είναι "Download" αλλά το προσβάσιμο όνομα είναι η πλήρης συμβολοσειρά -->
<a href="/report-2025.pdf" aria-label="Download 2025 accessibility report PDF">
  Download
</a>

Μια προσοχή εδώ: το WCAG 2.5.3 απαιτεί το προσβάσιμο όνομα να ξεκινά με το ορατό κείμενο. Το “Download 2025 accessibility report PDF” ξεκινά με “Download” — καλό. Το “2025 accessibility report — Download PDF” δεν το κάνει — κακό.

Σύνδεσμοι που ανοίγουν σε νέα καρτέλα

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

<!-- Σηματοδοτεί τη συμπεριφορά νέας καρτέλας οπτικά και προς την υποστηρικτική τεχνολογία -->
<a href="https://example.com" target="_blank">
  View example report
  <span class="sr-only">(ανοίγει σε νέα καρτέλα)</span>
</a>

Όταν το κείμενο συνδέσμου λειτουργεί χωρίς να είναι προφανές

Το πλαίσιο μπορεί νόμιμα να παρέχει το νόημα που λείπει σύμφωνα με το WCAG 2.4.4. Ένας σύνδεσμος “Download” είναι αποδεκτός αν βρίσκεται σε ένα κελί πίνακα του οποίου η επικεφαλίδα στήλης λέει “Ετήσια Αναφορά” και η επικεφαλίδα γραμμής λέει “2025”. Το πλαίσιο καθιστά τον σκοπό σαφή.

Αυτό είναι διαφορετικό από έναν σύνδεσμο “Διαβάστε περισσότερα” στο τέλος μιας αυτόνομης παραγράφου. Η παράγραφος παρέχει πλαίσιο, αλλά το “Διαβάστε περισσότερα” εξακολουθεί να αποτυγχάνει επειδή το κείμενο του συνδέσμου θα μπορούσε να ισχύει για οποιαδήποτε παράγραφο — δεν προσδιορίζει μοναδικά τον προορισμό.

Σύνδεσμοι εικόνας

Όταν το περιεχόμενο του συνδέσμου είναι μια εικόνα αντί για κείμενο, το χαρακτηριστικό alt της εικόνας γίνεται το προσβάσιμο όνομα του συνδέσμου. Το εναλλακτικό κείμενο θα πρέπει να περιγράφει τον προορισμό του συνδέσμου, όχι την ίδια την εικόνα.

<!-- Το alt περιγράφει τον προορισμό του συνδέσμου, όχι την εμφάνιση της εικόνας -->
<a href="/services/audits">
  <img src="audit-icon.png" alt="Accessibility auditing services">
</a>

Εάν η εικόνα είναι καθαρά διακοσμητική και συνοδεύεται από ορατό κείμενο στον ίδιο σύνδεσμο, η εικόνα θα πρέπει να έχει alt="" για να αποφευχθεί η διπλή ανακοίνωση του ίδιου κειμένου.

Ένας γρήγορος έλεγχος που μπορείτε να εκτελέσετε μόνοι σας

Ανοίξτε τη σελίδα σας και εμφανίστε τη λίστα των συνδέσμων χρησιμοποιώντας τον αναγνώστη οθόνης σας (ή εγκαταστήστε τη δωρεάν επέκταση προγράμματος περιήγησης HeadingsMap ή WAVE για να δείτε τους συνδέσμους εξαγόμενους από το πλαίσιο). Διαβάστε τη λίστα. Αν δεν μπορείτε να καταλάβετε πού οδηγεί κάθε σύνδεσμος μόνο από το κείμενο, χρειάζεται δουλειά.

Η πιο συχνή διόρθωση είναι η προσθήκη ενός <span class="sr-only"> (οπτικά κρυμμένο, προσβάσιμο στους αναγνώστες οθόνης) με πρόσθετο πλαίσιο, ή απλώς η πλήρης αναδιατύπωση του κειμένου του συνδέσμου. Η αναδιατύπωση προτιμάται πάντα — συχνά βελτιώνει τη χρηστικότητα για όλους, όχι μόνο για τους χρήστες αναγνωστών οθόνης.

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