WCAG — τι είναι, Web Content Accessibility Guidelines και επίπεδα AA

Τι είναι το WCAG;

WCAG (Web Content Accessibility Guidelines) — ένα σύνολο συστάσεων για τη διασφάλιση της προσβασιμότητας περιεχομένου ιστού για άτομα με αναπηρία. Το πρότυπο αναπτύσσεται από την W3C Web Accessibility Initiative (WAI) από το 1999. Το WCAG καλύπτει τυφλούς και άτομα με μειωμένη όραση, κωφούς και βαρήκοους, άτομα με κινητικούς, λεκτικούς και γνωστικούς περιορισμούς, καθώς και ηλικιωμένους χρήστες με αλλαγές που σχετίζονται με την ηλικία.

Η πρώτη έκδοση WCAG 1.0 κυκλοφόρησε το 1999 και περιείχε 14 κατευθυντήριες αρχές. Το WCAG 2.0 (2008) έγινε τεχνολογικά ουδέτερο, εφαρμόσιμο σε HTML, PDF, πολυμέσα και εφαρμογές κινητών. Το WCAG 2.1 (2018) πρόσθεσε κριτήρια για κινητές συσκευές και αφή. Το WCAG 2.2 (2023) — η τρέχουσα έκδοση με νέα κριτήρια για κινούμενα σχέδια και εστίαση. Το WCAG δεν είναι νόμος, αλλά πολλές χώρες αναφέρονται σε αυτό στη νομοθεσία τους.

GOST R 52872-2019 στη Ρωσία, European Accessibility Act στην ΕΕ και Section 508 στις ΗΠΑ — όλα απαιτούν συμμόρφωση με WCAG AA. Για εταιρικούς και κυβερνητικούς ιστοτόπους, το WCAG AA είναι ένα υποχρεωτικό πρότυπο, η μη τήρηση του οποίου οδηγεί σε μηνύσεις. Σύμφωνα με τα δεδομένα της UsableNet (2024), στις ΗΠΑ κατατέθηκαν περισσότερες από 12.000 αγωγές για μη προσβασιμότητα ιστοτόπων.

Εκδόσεις WCAG: σύγκριση

Νομικές συνέπειες μη συμμόρφωσης

Η μη τήρηση του WCAG ενέχει σοβαρούς κινδύνους. Το 2025, η European Accessibility Act (EAA) τέθηκε σε ισχύ, απαιτώντας WCAG 2.1 AA για όλους τους δημόσιους ιστοτόπους και εφαρμογές κινητών στην ΕΕ. Τα πρόστιμα φτάνουν έως το 5% του ετήσιου κύκλου εργασιών της εταιρείας. Το μέσο ποσό διακανονισμού αγωγών στις ΗΠΑ είναι $25.000–$50.000. Ο έλεγχος προσβασιμότητας πρέπει να διενεργείται σε κάθε στάδιο ανάπτυξης, όχι μόνο πριν από την κυκλοφορία.

Τέσσερις αρχές WCAG: POUR

POUR — το ακρωνύμιο των τεσσάρων αρχών WCAG: Perceivable (αντιληπτό), Operable (λειτουργικό), Understandable (κατανοητό), Robust (ανθεκτικό). Κάθε αρχή περιέχει κατευθυντήριες γραμμές και οι κατευθυντήριες γραμμές περιέχουν ελέγξιμα κριτήρια επιτυχίας. Συνολικά, το WCAG 2.2 περιέχει 13 κατευθυντήριες γραμμές και 86 κριτήρια επιτυχίας. Κάθε κριτήριο έχει επίπεδο A, AA ή AAA.

Perceivable — Αντιληπτό

Η αρχή Perceivable απαιτεί το περιεχόμενο να παρουσιάζεται σε μορφή που ο χρήστης μπορεί να αντιληφθεί. Κατευθυντήριες γραμμές: 1.1 Text Alternatives (εναλλακτικά κειμένου), 1.2 Time-based Media (υπότιτλοι, μεταγραφές), 1.3 Adaptable (περιεχόμενο χωρίς απώλεια κατά την αλλαγή μορφής), 1.4 Distinguishable (αντίθεση 4.5:1, χρώμα, ήχος). Το βασικό κριτήριο 1.4.3 Contrast Minimum (AA) — το πιο συχνά παραβιαζόμενο: το 86% των σελίδων δεν το πληρούν σύμφωνα με το WebAIM.

Operable — Λειτουργικό

Η αρχή Operable απαιτεί τη δυνατότητα λειτουργίας της διεπαφής. Κατευθυντήριες γραμμές: 2.1 Keyboard Accessible, 2.2 Enough Time, 2.3 Seizures, 2.4 Navigable, 2.5 Input Modalities. Το κριτήριο 2.1.1 Keyboard (A) — ένα από τα πιο κρίσιμα: όλες οι λειτουργίες πρέπει να είναι προσβάσιμες από το πληκτρολόγιο χωρίς ποντίκι. Τα modal παράθυρα που κλείνουν μόνο με κλικ, τα αναδυόμενα μενού χωρίς πλοήγηση πληκτρολογίου — τυπικές παραβιάσεις.

Understandable — Κατανοητό

Η αρχή Understandable απαιτεί την κατανόηση του περιεχομένου και της διεπαφής. Κατευθυντήριες γραμμές: 3.1 Readable, 3.2 Predictable, 3.3 Input Assistance. Ιδιαίτερα σημαντικό είναι το κριτήριο 3.3.4 Error Prevention για χρηματοοικονομικές και ιατρικές εφαρμογές: πρόληψη σοβαρών συνεπειών σφαλμάτων εισαγωγής. Το κριτήριο 3.2.6 Consistent Help (νέο στο WCAG 2.2) απαιτεί τα κουμπιά βοήθειας να βρίσκονται στις ίδιες θέσεις.

Robust — Ανθεκτικό

Η αρχή Robust απαιτεί συμβατότητα με υποστηρικτικές τεχνολογίες. Η κατευθυντήρια γραμμή 4.1 Compatible με το βασικό κριτήριο 4.1.2 Name, Role, Value (A): κάθε στοιχείο UI πρέπει να έχει προγραμματικά καθορισμένο όνομα, ρόλο και κατάσταση. Τα χαρακτηριστικά ARIA (role, aria-label, aria-expanded) — το κύριο εργαλείο. Χωρίς αυτά, οι αναγνώστες οθόνης δεν μπορούν να προσδιορίσουν εάν ένα στοιχείο είναι κουμπί, σύνδεσμος ή καρτέλα.

Πίνακας αρχών WCAG

Επίπεδα συμμόρφωσης WCAG: A, AA, AAA

WCAG ορίζει τρία επίπεδα: A (ελάχιστο), AA (τυπικό) και AAA (μέγιστο). Το επίπεδο A — το υποχρεωτικό ελάχιστο: χωρίς αυτό, το περιεχόμενο δεν είναι προσβάσιμο για ορισμένες κατηγορίες χρηστών. Το AA αφαιρεί τα κύρια εμπόδια προσβασιμότητας. Το AAA — το υψηλότερο πρότυπο, αλλά δεν μπορεί να επιτευχθεί για όλο το περιεχόμενο (για παράδειγμα, ορισμένες νοηματικές γλώσσες ή μεταγραφές ήχου δεν είναι πάντα εφικτές).

Επίπεδο A (30 κριτήρια): εναλλακτικά κειμένου, λειτουργία με πληκτρολόγιο, επαρκής χρόνος, απουσία τρεμοπαίγματος άνω των 3 Hz. Επίπεδο AA (+24 κριτήρια): contrast ratio 4.5:1, υπότιτλοι για βίντεο, αλλαγή μεγέθους κειμένου έως 200%, καθαρή εστίαση πληκτρολογίου. Επίπεδο AAA (+32 κριτήρια): contrast ratio 7:1, νοηματική γλώσσα, απενεργοποίηση κινούμενων σχεδίων (2.3.3), μεταγραφή ήχου. Για κυβερνητικούς ιστοτόπους, το AA είναι αρκετό.

Διαδικασία ελέγχου WCAG

Ο έλεγχος προσβασιμότητας σύμφωνα με το WCAG περιλαμβάνει: αυτόματη δοκιμή (axe DevTools, WAVE, Lighthouse — βρίσκει 30–40% των σφαλμάτων), χειροκίνητη δοκιμή με πληκτρολόγιο και αναγνώστες οθόνης (VoiceOver, TalkBack, NVDA), έλεγχο από ειδικό για σύνθετα κριτήρια και δοκιμή με άτομα με αναπηρία. Η έκθεση ελέγχου πρέπει να περιέχει το επίπεδο συμμόρφωσης και τη λίστα μη συμμορφώσεων για κάθε κριτήριο.

Τι νέο υπάρχει στο WCAG 2.2

WCAG 2.2 πρόσθεσε 9 νέα κριτήρια. Τα βασικά: 2.4.11 Focus Appearance (AA) — δείκτης εστίασης >= 2px με αντίθεση 3:1, 2.5.8 Target Size Minimum (AA) — στόχος αφής τουλάχιστον 24x24 pixel, 3.3.7 Accessible Authentication (AA) — έλεγχος ταυτότητας χωρίς CAPTCHA. Το κριτήριο 2.3.3 Animation from Interactions (AAA) — κινούμενα σχέδια που μπορούν να απενεργοποιηθούν ή διάρκειας έως 5 δευτερολέπτων.

Focus Appearance — η σημαντικότερη αλλαγή. Παλαιότερα, το outline: none χωρίς αντικατάσταση ήταν παραβίαση, αλλά δεν υπήρχαν σαφείς απαιτήσεις. Το WCAG 2.2 καθόρισε: πάχος >= 2px, αντίθεση 3:1 με το φόντο, επιφάνεια δείκτη τουλάχιστον ίση με την επιφάνεια του στοιχείου. Για προσαρμοσμένα κουμπιά με border-radius, χρησιμοποιήστε box-shadow αντί για outline.

Focus Appearance σε CSS

/* WCAG 2.2 Focus Appearance (2.4.11 AA) */
:focus-visible {
    outline: 3px solid #0066CC;
    outline-offset: 2px;
}

.button:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px #FFFFFF,
        0 0 0 6px #0066CC;
}

@media (prefers-color-scheme: dark) {
    :focus-visible { outline-color: #66B2FF; }
}

@media (prefers-contrast: more) {
    :focus-visible { outline: 4px solid #000; outline-offset: 3px; }
}

Η μορφοποίηση :focus-visible εξασφαλίζει συμμόρφωση με το κριτήριο Focus Appearance. Το εναλλακτικό μέσω box-shadow είναι κατάλληλο για στοιχεία με border-radius. Η σκοτεινή λειτουργία και το High Contrast προσαρμόζουν τα χρώματα εστίασης.

Accessible Authentication

Το κριτήριο 3.3.7 Accessible Authentication (AA) — μία από τις πιο συζητημένες καινοτομίες. CAPTCHA με αναγνώριση αντικειμένων, παζλ, σύρσιμο ρυθμιστικών — τώρα συνιστά παραβίαση εάν δεν υπάρχει εναλλακτική λύση. Επιτρεπόμενες μέθοδοι: OTP μέσω email/SMS, βιομετρικά (Face ID, Touch ID), κωδικοί QR, Magic link. Αυτό διευκολύνει τη ζωή όχι μόνο των ατόμων με γνωστικές διαταραχές, αλλά όλων των χρηστών.

WCAG για εφαρμογές κινητών

WCAG εφαρμόζεται σε εγγενείς εφαρμογές iOS και Android. Οι τέσσερις αρχές POUR καλύπτουν πλήρως τις κινητές διεπαφές. Ειδικά κριτήρια: 2.5.1 Pointer Gestures (χειρονομίες χωρίς υψηλή ακρίβεια), 2.5.2 Pointer Cancellation (ακύρωση τυχαίας αφής), 2.5.3 Label in Name (κείμενο κουμπιού ταιριάζει με την ετικέτα προσβασιμότητας). Για iOS χρησιμοποιείται UIKit/UIAccessibility, για Android — AccessibilityService και ContentDescription.

Οι πιο συχνές παραβιάσεις σε κινητές εφαρμογές: 1.1.1 Non-text Content — εικονίδια χωρίς contentDescription, 2.4.3 Focus Order — λανθασμένη σειρά πλοήγησης, 2.5.8 Target Size — κουμπιά μικρότερα από 24x24dp, 1.4.3 Contrast — κείμενο σε εικόνες φόντου. iOS παρέχει το Accessibility Inspector στο Xcode, Android — το Accessibility Scanner για αυτόματο έλεγχο.

Κώδικας SwiftUI συμβατός με WCAG

import SwiftUI

struct AccessibleButton: View {
    let action: () -> Void
    let title: String
    let icon: String

    var body: some View {
        Button(action: action) {
            HStack {
                Image(systemName: icon)
                Text(title)
            }
            .padding(16)
            .background(Color.blue)
            .foregroundColor(.white)
            .cornerRadius(12)
            .frame(minWidth: 48, minHeight: 48)
        }
        .accessibilityLabel(title)
        .accessibilityHint("Κάντε κλικ για ενέργεια")
        .accessibilityAddTraits(.isButton)
    }
}

struct AccessibleForm: View {
    @State private var email = ""

    var body: some View {
        VStack(spacing: 16) {
            VStack(alignment: .leading) {
                Text("Email")
                TextField("Εισάγετε email", text: $email)
                    .textContentType(.emailAddress)
                    .keyboardType(.emailAddress)
                    .autocapitalization(.none)
                    .accessibilityLabel("Πεδίο εισαγωγής email")
                    .accessibilityHint("Εισάγετε διεύθυνση email")
            }
            AccessibleButton(
                action: { },
                title: "Αποστολή",
                icon: "paperplane.fill"
            )
        }
        .padding()
    }
}

Τα στοιχεία SwiftUI με accessibilityLabel, accessibilityHint και minWidth/minHeight >= 48pt εξασφαλίζουν συμμόρφωση με WCAG 2.5.8 (Target Size) και 2.5.3 (Label in Name). Χρησιμοποιήστε το Xcode Accessibility Inspector για έλεγχο εστίασης VoiceOver, σειράς πλοήγησης και μεγεθών touch targets. Παρόμοιες απαιτήσεις ισχύουν για το Jetpack Compose μέσω Modifier.semantics.