Accessibility — βασικές αρχές, VoiceOver και TalkBack για τυφλούς χρήστες

Τι είναι το Accessibility (a11y) σε εφαρμογές για κινητά;

Accessibility (συντομογραφία a11y — 11 γράμματα μεταξύ «a» και «y») — η πρακτική ανάπτυξης εφαρμογών προσβάσιμων σε άτομα με προβλήματα όρασης, ακοής, κινητικότητας και γνωστικές ιδιαιτερότητες. Στην κινητή ανάπτυξη, η προσβασιμότητα καλύπτει τέσσερα κύρια σενάρια: τυφλοί χρήστες (αναγνώστες οθόνης), άτομα με μειωμένη όραση (κλιμάκωση, αντίθεση), κωφοί και βαρήκοοι (υπότιτλοι, οπτικές εναλλακτικές για ήχο), χρήστες με περιορισμένη κινητικότητα (φωνητικός έλεγχος, Switch Control, μεγάλη περιοχή αφής).

Νομικές απαιτήσεις — σε πολλές χώρες η προσβασιμότητα είναι υποχρεωτική από το νόμο. ΗΠΑ: Section 508 και ADA. ΕΕ: European Accessibility Act (2025). Ηνωμένο Βασίλειο: Equality Act 2010. Χωρίς υποστήριξη προσβασιμότητας, η εφαρμογή μπορεί να αποτελέσει αντικείμενο δικαστικής αγωγής — στις ΗΠΑ το 2023 κατατέθηκαν πάνω από 4000 αγωγές για μη προσβασιμότητα ψηφιακών προϊόντων. Η Apple και η Google ελέγχουν την προσβασιμότητα κατά τη μετριοπάθεια εφαρμογών: το App Store Review Guidelines (4.2) και το Google Play Store απαιτούν ελάχιστη υποστήριξη προσβασιμότητας.

Επιχειρηματικό επιχείρημα — η προσβασιμότητα αυξάνει το κοινό. Σύμφωνα με το Return on Disability (2021), τα άτομα με αναπηρία ελέγχουν 13 τρισεκατομμύρια δολάρια διαθέσιμου εισοδήματος ετησίως. Οι προσβάσιμες εφαρμογές κατατάσσονται καλύτερα στην αναζήτηση (σημασιολογικό HTML, εναλλακτικά κείμενα), έχουν υψηλότερη βαθμολογία χρηστών και λιγότερες κριτικές για προβλήματα UX. Στην IT Sectr συμπεριλαμβάνουμε την προσβασιμότητα στο definition of done όλων των έργων — είναι πρότυπο ποιότητας, όχι προαιρετική βελτίωση.

Accessibility στο iOS: VoiceOver και UIAccessibility

VoiceOver — αναγνώστης οθόνης της Apple, ενσωματωμένος σε iOS, iPadOS και macOS. Ο χρήστης μετακινεί το δάχτυλό του στην οθόνη, το VoiceOver διαβάζει το όνομα του στοιχείου κάτω από το δάχτυλο. Διπλό άγγιγμα — ενεργοποίηση στοιχείου. Το VoiceOver υποστηρίζει πάνω από 40 χειρονομίες: τρία δάχτυλα σύρσιμο (κύλιση), δύο δάχτυλα διπλό άγγιγμα (διακοπή), χειρονομία Z (επιστροφή). Ο προγραμματιστής ελέγχει τι και πώς διαβάζει το VoiceOver μέσω του πρωτοκόλλου UIAccessibility και των ιδιοτήτων accessibilityLabel, accessibilityTraits, accessibilityHint.

class CustomButton: UIButton {

    override var isAccessibilityElement: Bool {
        get { return true }
        set {}
    }

    // override accessibilityLabel
    override var accessibilityLabel: String? {
        get { return "Κουμπί αποστολής φόρμας" }
        set {}
    }

    // override accessibilityHint
    override var accessibilityHint: String? {
        get { return "Αγγίξτε δύο φορές για αποστολή δεδομένων" }
        set {}
    }

    // override accessibilityTraits
    override var accessibilityTraits: UIAccessibilityTraits {
        get { return .button }
        set {}
    }
}

// Dynamic Type — κλιμάκωση κειμένου
titleLabel.font = UIFontMetrics.default.scaledFont(
    for: UIFont.systemFont(ofSize: 16)
)
titleLabel.adjustsFontForContentSizeCategory = true

Δυναμική τυπογραφία — Dynamic Type στο iOS επιτρέπει στο χρήστη να επιλέξει το μέγεθος κειμένου (από XS έως XXXL). Ο προγραμματιστής χρησιμοποιεί UIFontMetrics.scaledFont για αυτόματη κλιμάκωση. Το κείμενο πρέπει να εμφανίζεται σωστά σε όλα τα μεγέθη: οι γραμμές δεν πρέπει να κόβονται, τα κουμπιά πρέπει να μεγαλώνουν αναλογικά με το κείμενο. Το UITableView ενημερώνει αυτόματα το ύψος των κελιών όταν αλλάζει το μέγεθος κειμένου. Η αγνόηση του Dynamic Type σημαίνει ότι η εφαρμογή γίνεται μη προσβάσιμη για χρήστες με μειωμένη όραση.

Accessibility στο SwiftUI

SwiftUI παρέχει τροποποιητές για προσβασιμότητα: .accessibilityLabel(), .accessibilityHint(), .accessibilityAddTraits(), .accessibilitySortPriority(). Από προεπιλογή, όλα τα τυπικά στοιχεία SwiftUI (Text, Button, Image) είναι ήδη στοιχεία προσβασιμότητας με αυτόματες ετικέτες. Για προσαρμοσμένα View, χρησιμοποιήστε .accessibilityElement(children: .combine) για συνδυασμό θυγατρικών στοιχείων σε ένα. Το SwiftUI υποστηρίζει αυτόματα Dynamic Type και VoiceOver.

VStack {
    Image(systemName: "trash")
        .accessibilityLabel(Text("Διαγραφή στοιχείου"))
    Text("Κάδος")
        .font(.body)
}
.accessibilityElement(children: .combine)
.accessibilityAddTraits(.isButton)
.accessibilityHint(Text("Διαγράφει το επιλεγμένο στοιχείο χωρίς δυνατότητα επαναφοράς"))

Accessibility στο Android: TalkBack και contentDescription

TalkBack — αναγνώστης οθόνης της Google, προεγκατεστημένος στις περισσότερες συσκευές Android (διαθέσιμος στο Google Play για όλες τις εκδόσεις Android 5+). Το TalkBack χρησιμοποιεί τις ίδιες χειρονομίες με το VoiceOver: σύρσιμο για πλοήγηση, διπλό άγγιγμα για ενεργοποίηση. Ο προγραμματιστής ορίζει την περιγραφή των στοιχείων μέσω του χαρακτηριστικού android:contentDescription σε XML ή μέσω setContentDescription() σε κώδικα. Για ImageView, το contentDescription είναι υποχρεωτικό — χωρίς αυτό, το TalkBack αναφέρει «χωρίς ετικέτα» ή διαβάζει το όνομα αρχείου.

// XML: contentDescription για ImageView
<ImageView
    android:id="@+id/iconDelete"
    android:src="@drawable/ic_delete"
    android:contentDescription="@string/delete_button_desc"
    android:focusable="true"
    android:clickable="true" />

// Kotlin: προγραμματισμένος ορισμός
iconDelete.contentDescription = getString(R.string.delete_button_desc)

// Accessibility Delegate (προσαρμοσμένο)
iconDelete.accessibilityDelegate = object : View.AccessibilityDelegate() {
    override fun onInitializeAccessibilityNodeInfo(
        host: View, info: AccessibilityNodeInfo
    ) {
        super.onInitializeAccessibilityNodeInfo(host, info)
        info.text = "Κουμπί διαγραφής"
        info.contentDescription = "Διαγραφή επιλεγμένου στοιχείου"
        info.className = Button::class.java.name
    }
}

// Live Regions για δυναμικές ενημερώσεις
textView.accessibilityLiveRegion = View.ACCESSIBILITY_LIVE_REGION_POLITE

Live Regions — μηχανισμός Android για ειδοποίηση του TalkBack σχετικά με αλλαγή περιεχομένου χωρίς εστίαση. Το χαρακτηριστικό android:accessibilityLiveRegion λαμβάνει τρεις τιμές: none (χωρίς ειδοποιήσεις), polite (ανακοίνωση μετά το τρέχον), assertive (άμεση ανακοίνωση). Χρησιμοποιήστε polite για ενημέρωση κατάστασης φόρτωσης, assertive — για κρίσιμα σφάλματα. Η κατάχρηση του assertive οδηγεί σε χάος για τον χρήστη — το TalkBack θα διακόπτει συνεχώς την τρέχουσα ενέργεια.

Accessibility Scanner

Accessibility Scanner — δωρεάν εφαρμογή από την Google για δοκιμή προσβασιμότητας εφαρμογών Android χωρίς πρόσβαση στον πηγαίο κώδικα. Ο σαρωτής ελέγχει: αντίθεση κειμένου, μέγεθος περιοχών αφής (ελάχιστο 48×48dp σύμφωνα με το Android Accessibility Guidelines), ύπαρξη contentDescription για ImageView, ορθότητα ιεραρχίας στοιχείων. Για αυτοματοποιημένες δοκιμές, χρησιμοποιήστε AccessibilityChecks από το Espresso — ενσωματώνονται στο CI/CD και ελέγχουν την προσβασιμότητα σε κάθε build.

WCAG 2.1: αντίθεση, μέγεθος και περιοχές αφής

WCAG 2.1 (Web Content Accessibility Guidelines) — διεθνές πρότυπο προσβασιμότητας που αναπτύχθηκε από το W3C. Η έκδοση 2.1 (2018) περιλαμβάνει 13 επιπλέον κριτήρια για εφαρμογές κινητών. Επίπεδα συμμόρφωσης: A (ελάχιστο), AA (υποχρεωτικό για τους περισσότερους οργανισμούς), AAA (μέγιστο). Η Apple και η Google συνιστούν το επίπεδο AA ως ελάχιστο για δημοσίευση εφαρμογών. Το WCAG 2.2 κυκλοφόρησε το 2023 με διευκρινίσεις για εστίαση και είσοδο.

Βασικά κριτήρια για κινητή ανάπτυξη: αντίθεση κειμένου τουλάχιστον 4.5:1 (AA) ή 7:1 (AAA), μέγεθος περιοχών αφής ελάχιστο 44×44pt (iOS) ή 48×48dp (Android), υποστήριξη οριζόντιου και κάθετου προσανατολισμού χωρίς απώλεια λειτουργικότητας, δυνατότητα απενεργοποίησης κινούμενων γραφικών (prefers-reduced-motion), ύπαρξη υποτίτλων για πολυμέσα, συμβατότητα με φωνητικό έλεγχο (Voice Control στο iOS, Voice Access στο Android).

Εργαλεία ελέγχου αντίθεσης — Colour Contrast Analyser (TPGI), WebAIM Contrast Checker, Stark (Figma), Accessibility Inspector (Xcode). Στην IT Sectr ελέγχουμε την αντίθεση στη φάση σχεδιασμού (Figma + Stark) και ξανά στη φάση ανάπτυξης (Accessibility Inspector / Accessibility Scanner). Ελάχιστη απαίτηση — 4.5:1 για όλο το κείμενο μικρότερο από 18pt (14pt bold). Για λογότυπα και διακοσμητικά στοιχεία, η αντίθεση δεν απαιτείται.

Δοκιμή προσβασιμότητας: εργαλεία και λίστα ελέγχου

Δοκιμή iOS — Accessibility Inspector στο Xcode (Xcode → Open Developer Tool → Accessibility Inspector) ελέγχει label, traits, hint για κάθε στοιχείο. Το VoiceOver μπορεί να ενεργοποιηθεί στις ρυθμίσεις ή μέσω Accessibility Shortcut (τριπλό πάτημα κουμπιού). Για αυτοματοποιημένες δοκιμές, χρησιμοποιήστε XCUITest με XCTAssertTrue(app.staticTexts["label"].isAccessibilityElement). Η Apple συνιστά δοκιμή όλων των οθονών της εφαρμογής με ενεργοποιημένο το VoiceOver.

Δοκιμή Android — Accessibility Scanner (Play Store) ελέγχει αντίθεση, μέγεθος περιοχών αφής, contentDescription. Για αυτοματοποίηση: Espresso AccessibilityChecks (import: androidTestImplementation 'androidx.test.espresso:espresso-accessibility:3.5.1'). Η Google συνιστά λίστα ελέγχου: κάθε ImageView έχει contentDescription, οι περιοχές αφής δεν είναι μικρότερες από 48×48dp, το κείμενο κλιμακώνεται στο 200% χωρίς αποκοπή, όλα τα στοιχεία είναι προσβάσιμα με σύρσιμο TalkBack.

Λίστα ελέγχου IT Sectr — πριν από την κυκλοφορία ελέγχουμε: (1) VoiceOver/TalkBack διαβάζει σωστά όλα τα στοιχεία, (2) το κείμενο κλιμακώνεται στο μέγιστο μέγεθος χωρίς απώλεια λειτουργικότητας, (3) όλα τα ImageView έχουν contentDescription, (4) αντίθεση κειμένου ≥4.5:1 σε όλα τα θέματα, (5) περιοχές αφής ≥44pt/48dp, (6) δεν υπάρχει μενού περιβάλλοντος προσβάσιμο μόνο με παρατεταμένο πάτημα, (7) υποστήριξη Reduce Motion / Remove Animations στις ρυθμίσεις συστήματος. Αυτή η λίστα ελέγχου αποτελεί μέρος του definition of done κάθε sprint.