Content Description: τι είναι, αρχές και πώς να το ορίσετε για accessibility

Τι είναι το Content Description στην προσβασιμότητα

Content Description — μια ιδιότητα συμβολοσειράς ενός στοιχείου διεπαφής που μεταφέρει την κειμενική αναπαράσταση οπτικού περιεχομένου στις υποστηρικτικές τεχνολογίες. Το screen reader (VoiceOver στο iOS, TalkBack στο Android) διαβάζει την περιγραφή αντί να προσπαθεί να αναγνωρίσει οπτικά το στοιχείο. Η περιγραφή εφαρμόζεται σε εικόνες χωρίς επίπεδο κειμένου, εικονίδια, γραφήματα, προσαρμοσμένα χειριστήρια και οποιαδήποτε μη κειμενικά στοιχεία.

Σύμφωνα με το Google Material Design, 2024, τα στοιχεία χωρίς contentDescription παραβιάζουν τον κανόνα WCAG 1.1.1 (Non-text Content). Ο έλεγχος Accessibility Scanner δείχνει ότι έως και 40% των εικονιδίων σε εφαρμογές καταστημάτων δεν έχουν περιγραφή. Ο χρήστης VoiceOver ακούει μόνο “εικόνα” ή “κουμπί” χωρίς διευκρίνιση — μια τέτοια διεπαφή καθίσταται άχρηστη για πλοήγηση.

Το Content Description δεν αντικαθιστά το ορατό κείμενο του στοιχείου. Αν το κουμπί περιέχει κειμενική ετικέτα “Αποστολή”, δεν απαιτείται πρόσθετη περιγραφή — το screen reader θα διαβάσει το κείμενο. Για εικόνες, εικονίδια και πεδία εισόδου, η περιγραφή είναι υποχρεωτική.

Τα εργαλεία Accessibility Scanner (Android) και Xcode Accessibility Inspector (iOS) ελέγχουν αυτόματα την ύπαρξη περιγραφών. Συνιστάται η διεξαγωγή αυτών των ελέγχων σε κάθε οθόνη πριν από την κυκλοφορία.

Γιατί χρειάζεται το Content Description: σενάρια χρηστών

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

Ο χρήστης με προσωρινούς περιορισμούς (έντονη ηλιοφάνεια έξω, σπασμένη οθόνη) χρησιμοποιεί επίσης το VoiceOver. Σύμφωνα με την Apple Accessibility Report, 2023, περίπου το 20% των χρηστών VoiceOver δεν έχουν μόνιμα προβλήματα όρασης — ενεργοποιούν αυτή τη λειτουργία περιστασιακά.

WCAG 1.1.1: Non-text Content

Το κριτήριο WCAG 1.1.1 (επίπεδο A) απαιτεί κάθε μη κειμενικό περιεχόμενο να έχει εναλλακτική κειμένου. Εξαίρεση: περιεχόμενο που είναι διακοσμητικό, χρησιμοποιείται μόνο για οπτική σχεδίαση ή δεν μεταφέρει πληροφορίες. Δοκιμή διακοσμητικότητας: αν αφαιρέσουμε το στοιχείο, αλλάζει η σημασία της σελίδας; Αν όχι — μπορεί να κρυφτεί από το screen reader.

Πώς διαφέρει το Content Description από το Label

Accessibility Label (accessibilityLabel στο iOS) — το όνομα του στοιχείου που εκφωνεί το screen reader κατά την εστίαση. Το Content Description (accessibilityHint στο iOS) — πρόσθετη επεξήγηση που εκφωνείται μετά το όνομα και αναφέρει το αποτέλεσμα της ενέργειας.

Η διαφορά φαίνεται καλά στο παράδειγμα του “Καλάθι” κουμπιού. Label: “Καλάθι”. Description: “Θα ανοίξει την οθόνη παραγγελίας”. VoiceOver λέει: “Καλάθι. Θα ανοίξει την οθόνη παραγγελίας”. Αν οριστεί μόνο το Label, ο χρήστης δεν θα γνωρίζει τι θα συμβεί μετά το πάτημα.

Πίνακας: Label έναντι Description

Κανόνας: Το Label απαντά στην ερώτηση “Τι είναι αυτό;”, το Description — “Τι θα συμβεί;”. Στο Android, το contentDescription μπορεί να εκπληρώσει και τους δύο ρόλους, αλλά στην πράξη είναι καλύτερο να τους διαχωρίζετε: χρησιμοποιήστε συνένωση “[όνομα], [επεξήγηση]”.

Πότε το Description είναι πιο σημαντικό από το Label

Για σύνθετες χειρονομίες (σύρσιμο για διαγραφή, παρατεταμένο πάτημα για μενού περιβάλλοντος) το accessibilityHint είναι υποχρεωτικό. Ο χρήστης VoiceOver δεν γνωρίζει για κρυφές χειρονομίες αν δεν περιγράφονται. Αναφέρετε: “Σύρτε προς τα αριστερά για διαγραφή” στο hint του στοιχείου.

iOS: χαρακτηριστικό accessibilityHint

Στην πλατφόρμα iOS, το accessibilityHint ορίζεται μέσω της ομώνυμης ιδιότητας του UIView ή NSObject. Τιμή — συμβολοσειρά έως 80 χαρακτήρες. Το VoiceOver διαβάζει το hint μετά το label, αν είναι ενεργοποιημένη η λειτουργία λεπτομερών περιγραφών (στις ρυθμίσεις VoiceOver — “Verbosity”).

Παράδειγμα ορισμού hint για προσαρμοσμένο κουμπί:

import UIKit

class CustomButton: UIButton {
    override func awakeFromNib() {
        super.awakeFromNib()
        self.accessibilityLabel = "Προσθήκη στα αγαπημένα"
        self.accessibilityHint = "Θα αποθηκεύσει το προϊόν στη λίστα αγαπημένων"
    }
}

Για UIImageView χωρίς κειμενικό περιεχόμενο είναι υποχρεωτικό να ορίσετε isAccessibilityElement = true και accessibilityHint:

let imageView = UIImageView(image: UIImage(named: "chart-sales"))
imageView.isAccessibilityElement = true
imageView.accessibilityHint = "Γράφημα πωλήσεων τελευταίου τριμήνου"

Το VoiceOver διαβάζει: “Γράφημα πωλήσεων τελευταίου τριμήνου”. Αν το hint είναι κενό — μόνο “εικόνα”. Το Apple HIG, 2024 συνιστά να μην χρησιμοποιούνται ρήματα όπως “πατήστε” ή “αγγίξτε” στο hint — το VoiceOver προσθέτει αυτόματα οδηγία χειρονομίας.

SwiftUI: τροποποιητής accessibilityHint

Στο SwiftUI, το hint ορίζεται μέσω τροποποιητή αλυσίδας:

Image(systemName: "trash")
    .accessibilityLabel("Διαγραφή")
    .accessibilityHint("Θα διαγράψει οριστικά το επιλεγμένο στοιχείο")

Το SwiftUI συνδυάζει αυτόματα τροποποιητές για σύνθετα view. Αν το Image βρίσκεται μέσα στο Button, το SwiftUI χρησιμοποιεί το label του κουμπιού ως κύριο accessibilityLabel.

Android: ιδιότητα contentDescription

Στο Android, το contentDescription ορίζεται είτε στη σήμανση XML είτε προγραμματιστικά μέσω setContentDescription(). Το TalkBack διαβάζει την περιγραφή κατά την εστίαση στο στοιχείο.

Παράδειγμα σε XML:

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_search"
    android:contentDescription="Αναζήτηση προϊόντων" />

Προγραμματιστικός ορισμός για δυναμικά στοιχεία:

binding.iconSearch.contentDescription =
    "Αναζήτηση. Θα ανοίξει την οθόνη αναζήτησης με φίλτρα"

Για διακοσμητικές εικόνες (διαχωριστικά, φόντα, διακοσμητικά εικονίδια) ορίστε contentDescription = "@null" ή setContentDescription(null) — το TalkBack θα παραλείψει ένα τέτοιο στοιχείο. Σε XML: android:contentDescription="@null". Η κενή συμβολοσειρά "" δεν λειτουργεί — το TalkBack θα εξακολουθεί να λέει “εικόνα”.

Android: σημαντικές λεπτομέρειες για ImageButton και CheckBox

Για ImageButton ορίζετε πάντα contentDescription — το TalkBack δεν βλέπει το κείμενο στην εικόνα. Για CheckBox, η περιγραφή πρέπει να αλλάζει δυναμικά: “Επιλεγμένο” / “Αποεπιλεγμένο” αντί για στατική περιγραφή. Χρησιμοποιήστε setContentDescription στον ακροατή κατάστασης.

Κανόνες γραφής περιγραφών

Πληροφοριακότητα — η περιγραφή πρέπει να μεταφέρει το νόημα, όχι την εξωτερική εμφάνιση. Όχι “Μπλε εικονίδιο με τικ”, αλλά “Προϊόν προστέθηκε στο καλάθι”. Το screen reader δεν ενδιαφέρεται για χρώματα — ενδιαφέρεται για το αποτέλεσμα.

Συντομία — βέλτιστο μήκος 2–4 λέξεις (έως 80 χαρακτήρες). Οι μεγάλες περιγραφές επιβραδύνουν την πλοήγηση: το VoiceOver διαβάζει διαδοχικά, κάθε λέξη είναι ένα δευτερόλεπτο του χρόνου του χρήστη. Σύμφωνα με το Apple WWDC 2023, “Accessibility by Design”, μια φράση που διαβάζεται πάνω από 5 δευτερόλεπτα διακόπτει τη γνωστική ροή.

Μοναδικότητα — στην ίδια οθόνη δεν πρέπει να υπάρχουν δύο στοιχεία με την ίδια περιγραφή. Ο χρήστης δεν θα μπορεί να διακρίνει ποιο αποτέλεσμα θα έχει η εστίαση στο πρώτο και στο δεύτερο στοιχείο. Αν υπάρχουν πολλά κουμπιά “Αγορά” — προσθέστε αναγνωριστικό: “Αγορά iPhone 15”, “Αγορά iPhone 15 Pro”.

Τοπικοποίηση — το Content Description μεταφράζεται σε όλες τις γλώσσες που υποστηρίζει η εφαρμογή. Το σφάλμα τοπικοποίησης της περιγραφής είναι μια από τις συχνές αιτίες αποτυχίας του Accessibility Review στο App Store.

Μήκος περιγραφής: έρευνες

Η έρευνα του Nielsen Norman Group, 2024 έδειξε ότι το βέλτιστο μήκος περιγραφής για screen reader είναι 3–5 λέξεις (έως 50 χαρακτήρες). Οι μεγαλύτερες περιγραφές μειώνουν την ταχύτητα πλοήγησης κατά 30%, επειδή ο χρήστης πρέπει να περιμένει την ολοκλήρωση της ανάγνωσης πριν από το επόμενο βήμα.

Συνήθη λάθη κατά τη χρήση

Πλεονασμός — η περιγραφή αντιγράφει το ορατό κείμενο. Αν το κουμπί περιέχει κείμενο “Αποστολή”, μην ορίζετε accessibilityHint = “Κουμπί αποστολής”. Το VoiceOver θα διαβάσει αυτόματα το κείμενο και το hint θα προσθέσει περιττό θόρυβο.

Σύγχυση με Label — χρήση contentDescription αντί label για κουμπιά κειμένου. Στο iOS, το accessibilityLabel πρέπει να ταιριάζει με το κείμενο του κουμπιού (ή να είναι κενό αν το κείμενο είναι ήδη ορατό), και το hint εξηγεί μόνο την ενέργεια. Σύμφωνα με το Google Testing Blog, 2024, το 23% των ελεγμένων εφαρμογών στο Play Store έχουν διπλές περιγραφές.

Παράβλεψη δυναμικής — η περιγραφή δεν ενημερώνεται κατά την αλλαγή κατάστασης. Για παράδειγμα, στον διακόπτη “Wi-Fi” η περιγραφή παραμένει “Ενεργοποίηση Wi-Fi” ακόμα και μετά την ενεργοποίηση. Σωστά: αλλάξτε δυναμικά την περιγραφή σε “Απενεργοποίηση Wi-Fi” μέσω παρατήρησης κατάστασης.

Κύκλοι απόδοσης και παλινδρομήσεις

Μετά από ενημέρωση σχεδίασης (αλλαγή εικονιδίων, αναδιάταξη στοιχείων), το Content Description συχνά χάνεται. Αιτία: ο σχεδιαστής αντικαθιστά την εικόνα, ο προγραμματιστής δεν ελέγχει τις ιδιότητες προσβασιμότητας του νέου στοιχείου. Λύση: κάντε τον έλεγχο προσβασιμότητας υποχρεωτικό βήμα στο code review — προσθέστε λίστα ελέγχου με το σημείο “Ενημερώθηκε το Content Description;”.

Πώς να ελέγξετε το Content Description

• Στο iOS: Xcode → Accessibility Inspector — επιλέξτε το στοιχείο, ελέγξτε τα πεδία Label και Hint
• Στο Android: εγκαταστήστε το Accessibility Scanner από το Play Store — εκτελέστε στην οθόνη σας
• Και στις δύο πλατφόρμες: ενεργοποιήστε VoiceOver/TalkBack και περιηγηθείτε σε όλη την οθόνη με χειρονομίες
• Γράψτε ένα UI τεστ που ελέγχει το contentDescription για όλα τα ImageView

Παράδειγμα UI τεστ για iOS

func testContentDescriptionExists() {
    let app = XCUIApplication()
    app.launch()
    let image = app.images["chart-sales"]
    XCTAssertNotNil(image.label)
    XCTAssertGreaterThan(image.label.count, 0)
}