Πώς να κάνετε την ιστοσελίδα σας προσβάσιμη: Οδηγός εκκίνησης WCAG 2.2

Για να κάνετε μια ιστοσελίδα προσβάσιμη, χτίστε την ώστε να μπορεί να χρησιμοποιηθεί με πληκτρολόγιο, αναγνώστη οθόνης, μεγέθυνση ή συσκευή εναλλαγής, όχι μόνο με ποντίκι: χρησιμοποιήστε πραγματικά στοιχεία HTML για κουμπιά, συνδέσμους, επικεφαλίδες και ετικέτες φορμών, δώστε στις εικόνες ουσιαστικό alt κείμενο, κρατήστε υψηλή την αντίθεση του κειμένου και κάντε ορατή την εστίαση. Το πρότυπο που πρέπει να στοχεύσετε είναι το WCAG 2.2 Επίπεδο AA. Οι αυτόματοι έλεγχοι εντοπίζουν μέρος του προβλήματος· ένα δεκάλεπτο τεστ με πληκτρολόγιο και αναγνώστη οθόνης βρίσκει μεγάλο μέρος του υπολοίπου.

Τι σημαίνει «προσβάσιμο» στην πράξη

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

Το πρότυπο αναφοράς είναι το Web Content Accessibility Guidelines (WCAG) του W3C. Από τον Σεπτέμβριο του 2026, η τρέχουσα έκδοση είναι το WCAG 2.2 (δημοσιεύτηκε τον Οκτώβριο του 2023, ενημερώθηκε τον Δεκέμβριο του 2024)· το WCAG 3 είναι πρώιμο προσχέδιο. Το WCAG οργανώνεται γύρω από τέσσερις αρχές —το περιεχόμενο πρέπει να είναι αντιληπτό, λειτουργικό, κατανοητό και ανθεκτικό— και έχει τρία επίπεδα συμμόρφωσης:

Νόμοι σε αρκετά μέρη αναφέρονται στο WCAG —για παράδειγμα, η Ευρωπαϊκή Πράξη για την Προσβασιμότητα, η οποία ισχύει για πολλές ψηφιακές υπηρεσίες καταναλωτών στην ΕΕ από τον Ιούνιο του 2025. Ποιοι κανόνες ισχύουν για εσάς εξαρτάται από το πού δραστηριοποιείστε και τι πουλάτε· αν δεν είστε σίγουροι, συμβουλευτείτε κάποιον σύμβουλο. Αυτός ο οδηγός καλύπτει την πρακτική δουλειά.

Επιλογές: πώς να φτάσετε εκεί

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

Οι διορθώσεις που μετράνε περισσότερο

Χρησιμοποιήστε τα σωστά στοιχεία HTML

Μεγάλο μέρος της προσβασιμότητας έρχεται δωρεάν με σωστό HTML. Ένα <button> είναι εστιάσιμο, λειτουργεί με Enter και Space, και ανακοινώνεται ως κουμπί. Ένα <div> με χειριστή κλικ δεν κάνει τίποτα από αυτά. Ο κώδικας που παράγει η AI χρησιμοποιεί μερικές φορές στυλιζαρισμένα div για τα πάντα· ζητήστε σημασιολογικά στοιχεία:

• <button> για ενέργειες, <a href> για πλοήγηση
• Ένα <h1> ανά σελίδα, μετά <h2>, <h3> με τη σωστή σειρά· οι χρήστες αναγνωστών οθόνης πηδούν ανάμεσα σε επικεφαλίδες
• Ορόσημα: <header>, <nav>, <main>, <footer>
• <label> συνδεδεμένο με κάθε πεδίο φόρμας
• Τη γλώσσα της σελίδας στο <html lang="en">

Χρησιμοποιείτε χαρακτηριστικά ARIA μόνο όταν δεν ταιριάζει κανένα εγγενές στοιχείο· για ένα προσαρμοσμένο σύνολο καρτελών ή combobox, για παράδειγμα. Το λάθος ARIA είναι χειρότερο από καθόλου.

Πρόσβαση με πληκτρολόγιο και ορατή εστίαση

Όλα όσα κάνετε με ποντίκι πρέπει να λειτουργούν μόνο με πληκτρολόγιο (WCAG 2.1.1). Πατήστε Tab στη σελίδα: κάθε σύνδεσμος, κουμπί και πεδίο πρέπει να είναι προσβάσιμο με λογική σειρά, και πρέπει πάντα να βλέπετε πού είναι η εστίαση (2.4.7 Focus Visible). Το WCAG 2.2 πρόσθεσε ότι το εστιασμένο στοιχείο δεν πρέπει να κρύβεται εντελώς πίσω από κολλημένες κεφαλίδες ή banners cookies (2.4.11, Επίπεδο AA).

Συνηθισμένες αστοχίες: μενού που ανοίγουν μόνο με αιώρηση, modals που δεν παγιδεύουν την εστίαση ή δεν κλείνουν με Escape, και outline: none στο CSS χωρίς τίποτα να το αντικαθιστά.

Εναλλακτικά κείμενα

Κάθε ουσιαστική εικόνα χρειάζεται alt κείμενο που περιγράφει τι δείχνει μέσα στο πλαίσιό της («Ο σεφ που στήνει το μενού δοκιμαστικής γεύσης», όχι «image1.jpg»). Οι διακοσμητικές εικόνες παίρνουν κενό alt="" ώστε οι αναγνώστες οθόνης να τις παραλείπουν. Τα κουμπιά μόνο με εικονίδιο χρειάζονται προσβάσιμο όνομα («Κλείσιμο», «Αναζήτηση»). Τα βίντεο χρειάζονται υπότιτλους· ο ήχος χρειάζεται μεταγραφή.

Χρώμα και αντίθεση

Το WCAG 2.2 AA απαιτεί αναλογία αντίθεσης τουλάχιστον 4,5:1 για κανονικό κείμενο και 3:1 για μεγάλο κείμενο (1.4.3), και 3:1 για στοιχεία διεπαφής όπως περιγράμματα πεδίων και ουσιαστικά εικονίδια (1.4.11). Το ανοιχτό γκρι κείμενο υπόδειξης και τα ξεθωριασμένα κουμπιά είναι οι συνηθισμένες αστοχίες. Επίσης, μην χρησιμοποιείτε μόνο το χρώμα για να μεταφέρετε νόημα: ένα κόκκινο περίγραμμα σε άκυρο πεδίο χρειάζεται και μήνυμα λάθους.

Αλλαγή μεγέθους και αναδίπλωση

Το κείμενο πρέπει να παραμένει χρηστό όταν μεγεθύνεται στο 200% (1.4.4), και το περιεχόμενο πρέπει να λειτουργεί σε πλάτος 320 pixel CSS χωρίς οριζόντια κύλιση (1.4.10). Μια ευέλικτη διάταξη καλύπτει τα περισσότερα από αυτά.

Στόχοι, φόρμες και λάθη

• Μέγεθος στόχου: το WCAG 2.2 AA ζητά στόχους δείκτη τουλάχιστον 24 επί 24 pixel CSS, ή αρκετό κενό γύρω από μικρότερους (2.5.8). Το μεγαλύτερο είναι πιο φιλικό στα κινητά.
• Φόρμες: ορατές ετικέτες (όχι μόνο placeholder), καθαρές οδηγίες και μηνύματα λάθους που λένε τι δεν πάει καλά και πώς να το διορθώσετε, δίπλα στο πεδίο.
• Σύνδεση: μην ζητάτε από τους ανθρώπους να λύσουν γρίφο ή να μεταγράψουν κωδικό χωρίς εναλλακτική· επιτρέψτε διαχειριστές κωδικών και επικόλληση (3.3.8 Accessible Authentication).

Prompts που δουλεύουν

Χτίσε αυτόν τον ιστότοπο σύμφωνα με το WCAG 2.2 Επίπεδο AA: σημασιολογικά ορόσημα HTML, ένα h1 ανά σελίδα με επικεφαλίδες σε σειρά, πραγματικά στοιχεία κουμπιού και συνδέσμου, ετικέτες σε κάθε πεδίο φόρμας, ορατά στυλ εστίασης, αντίθεση κειμένου τουλάχιστον 4,5:1, alt κείμενο στις ουσιαστικές εικόνες και alt="" στις διακοσμητικές, και html lang ορισμένο.

Έλεγξε τις σελίδες /signup και /checkout για προσβασιμότητα. Δοκίμασε χρήση μόνο με πληκτρολόγιο, σειρά εστίασης, ορατή εστίαση, ετικέτες, μηνύματα λαθών, αντίθεση και ονόματα για αναγνώστες οθόνης στα κουμπιά εικονιδίων. Κατάγραψε κάθε πρόβλημα με το κριτήριο WCAG και διόρθωσέ τα χωρίς να αλλάξεις περισσότερο από το απαραίτητο τον οπτικό σχεδιασμό.

Το κινητό μενού δεν μπορεί να χρησιμοποιηθεί με πληκτρολόγιο. Κάν' το κουμπί με aria-expanded, μετακίνησε την εστίαση μέσα στο μενού όταν ανοίγει, κλείσ' το με Escape και επίστρεψε την εστίαση στο κουμπί.

Βήμα προς βήμα

1. Τρέξτε αυτόματο έλεγχο. Η ενότητα Accessibility του Lighthouse στα DevTools του Chrome, ή η επέκταση axe για τον browser, σε κάθε κύρια σελίδα. Διορθώστε ό,τι αναφέρει.
2. Αφαιρέστε το ποντίκι. Περάστε με Tab από κάθε σελίδα και ολοκληρώστε κάθε βασική εργασία: εγγραφή, αναζήτηση, ταμείο. Σημειώστε ό,τι δεν μπορείτε να φτάσετε, να δείτε εστίαση ή να κλείσετε.
3. Μεγεθύνετε στο 200% και στενέψτε το παράθυρο σε πλάτος κινητού. Τίποτα δεν πρέπει να κόβεται ή να χρειάζεται οριζόντια κύλιση.
4. Δοκιμάστε αναγνώστη οθόνης για δέκα λεπτά: VoiceOver σε Mac και iPhone, TalkBack σε Android ή NVDA σε Windows (δωρεάν). Ακούστε τις επικεφαλίδες, τους συνδέσμους και τα πεδία φόρμας. Το «κουμπί» χωρίς όνομα ή το «σύνδεσμος, κάνε κλικ εδώ» σημαίνει δουλειά για διόρθωση.
5. Ελέγξτε την αντίθεση για κείμενο, κουμπιά και πεδία με εργαλείο ελέγχου αντίθεσης.
6. Διορθώστε, μετά ξαναδοκιμάστε τις ίδιες εργασίες.
7. Δημοσιεύστε δήλωση προσβασιμότητας που λέει ποιο πρότυπο στοχεύετε και πώς να αναφέρονται προβλήματα· και απαντήστε σε αυτές τις αναφορές.

Συνηθισμένα λάθη

• Βασίζεστε σε widget επικάλυψης αντί να διορθώνετε τον κώδικα.
• Αφαιρείτε τα περιγράμματα εστίασης επειδή φαίνονται άτακτα, χωρίς αντικατάσταση.
• Κείμενο υπόδειξης ως μοναδική ετικέτα. Εξαφανίζεται όταν κάποιος αρχίσει να γράφει και συχνά έχει χαμηλή αντίθεση.
• Συνδέσμοι «Κάνε κλικ εδώ» και «Διάβασε περισσότερα». Εκτός πλαισίου, οι χρήστες αναγνωστών οθόνης ακούν λίστα πανομοιότυπων συνδέσμων.
• Alt κείμενο γεμάτο λέξεις-κλειδιά. Το alt κείμενο είναι για ανθρώπους· περιγράψτε την εικόνα.
• Έλεγχος μόνο μία φορά. Κάθε νέα λειτουργία μπορεί να χαλάσει την πρόσβαση με πληκτρολόγιο. Προσθέστε ένα πέρασμα με πληκτρολόγιο στους ελέγχους πριν την κυκλοφορία.

Λίστα ελέγχου προσβασιμότητας

• Αυτόματος έλεγχος (Lighthouse ή axe) καθαρός στις κύριες σελίδες
• Κάθε εργασία ολοκληρώνεται μόνο με πληκτρολόγιο
• Η εστίαση είναι πάντα ορατή και δεν κρύβεται πίσω από κολλημένα στοιχεία
• Σημασιολογικές επικεφαλίδες, ορόσημα, κουμπιά και σύνδεσμοι· ορισμένο lang
• Ουσιαστικό alt κείμενο· διακοσμητικές εικόνες με alt=""· υπότιτλοι στα βίντεο
• Αντίθεση κειμένου ≥ 4,5:1 (μεγάλο κείμενο ≥ 3:1)· στοιχεία διεπαφής ≥ 3:1
• Λειτουργεί σε μεγέθυνση 200% και πλάτος 320 px
• Κάθε πεδίο φόρμας έχει ορατή ετικέτα και σαφή μηνύματα λαθών
• Δήλωση προσβασιμότητας με τρόπο αναφοράς προβλημάτων

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

Προσβασιμότητα στο Mythex

Το Mythex χτίζει με όποιο πρότυπο ζητήσετε, οπότε βάλτε το «WCAG 2.2 AA» στην πρώτη εντολή και στις επόμενες. Μπορείτε να χρησιμοποιήσετε το πλαίσιο προεπισκόπησης σε μέγεθος κινητού για να ελέγξετε μικρές οθόνες (Preview and Code), αλλά οι δοκιμές με πληκτρολόγιο, μεγέθυνση και αναγνώστη οθόνης λειτουργούν καλύτερα στη δημοσιευμένη διεύθυνση ή σε προεπισκόπηση ανοιγμένη σε δική της καρτέλα. Ζητήστε από τον agent να ελέγξει μια σελίδα, να διορθώσει ό,τι βρει και μετά δοκιμάστε εσείς τις διορθώσεις· ένας αυτόματος έλεγχος είναι αρχή, όχι έγκριση.

Ερωτήσεις