Μια ιστοσελίδα για ΑΜΕΑ πρέπει να συμμορφώνεται με το πρότυπο WCAG 2.1 AA, που είναι το νομικά απαιτητό από την Ευρωπαϊκή Οδηγία 2016/2102 και τα προγράμματα ΕΣΠΑ. Από τον Οκτώβριο 2023 ισχύει επίσης η WCAG 2.2 (συνιστώμενη για future-proof projects). Το πρότυπο WCAG 2.0 είναι πλέον ξεπερασμένο και ΔΕΝ καλύπτει τις σύγχρονες απαιτήσεις (mobile, cognitive disabilities, low vision). Στον παρακάτω οδηγό θα βρεις: τα 4 POUR principles, σύγκριση A/AA/AAA επιπέδων, checklist 12 βημάτων, νομικές υποχρεώσεις και πρόστιμα, και πώς να κάνεις audit.
Σε όλα τα προγράμματα των ΕΣΠΑ είναι βασική απαίτηση πως αν κατασκευαστεί μια ιστοσελίδα πρέπει να είναι συμβατή βάση του πρότυπου WCAG 2.0 για ΑΜΕΑ.
Η ύπαρξη μιας τέτοιας ιστοσελίδας διευκολύνει της πρόσβαση σε ανθρώπους με ειδικές ανάγκες , οι οποίο μπορούν να πλοηγηθούν στην ιστοσελίδα σας με εύκολο τρόπο. Μια ιστοσελίδα που έχει κατασκευαστεί για εύκολη πρόσβαση από ΑΜΕΑ δεν σημαίνει ότι θα είναι άσχημη ή με μειωμένες λειτουργίες έναντι των άλλων ιστοσελίδων που δεν τηρούν τα πρότυπα.
Φυσικά τα πρότυπα θέτουν ορισμένους περιορισμούς που δεν επιτρέπουν στους web designers να ξεδιπλώσουν όλη τη φαντασία τους αλλά μπορούν ακόμα και με αυτούς τους περιορισμούς να παρουσιάζονται πανέμορφες ιστοσελίδες.
Ποιες οι απαιτήσεις για ιστοσελίδα με προσβαση για ΑΜΕΑ με το πρότυπο WCAG 2.0
Η απάντηση στην ερώτηση είναι σύνθετη αλλά το σωστό contrast, ο κώδικας χωρίς error και το να περνάει η ιστοσελίδα σε επίπεδο AA τον έλεγχο Wave AIM είναι μια καλή αρχή που οδηγεί στην επιτυχία.
Συνήθως σε προγράμματα ΕΣΠΑ ή Leader απαιτείται η ιστοσελίδές να είναι τουλάχιστον δίγλωσσες. Προσοχή μεγάλη γιατί πρέπει όλες οι σελίδες των ιστοσελίδων να παιρνούν τον έλεγχο για ΑΜΕΑ από το εργαλείο https://wave.webaim.org/
Όλα τα WCAG criteria χωρίζονται σε 4 αρχές. Κάθε WCAG-related σελίδα ΟΦΕΙΛΕΙ να τα περιλαμβάνει.
| Principle | Σημασία | Παράδειγμα κριτηρίου |
|---|---|---|
| Perceivable (Αντιληπτό) | Οι πληροφορίες πρέπει να μπορούν να γίνουν αντιληπτές | Alt text σε εικόνες, captions σε video, color contrast 4.5:1 |
| Operable (Λειτουργικό) | Η σελίδα πρέπει να είναι πλοηγήσιμη χωρίς ποντίκι | Keyboard navigation, αρκετός χρόνος, χωρίς seizure-inducing content |
| Understandable (Κατανοητό) | Το περιεχόμενο και τα controls να είναι σαφή | Καθαρή γλώσσα, predictable navigation, error identification |
| Robust (Στιβαρό) | Συμβατότητα με assistive technologies | Valid HTML, σωστά ARIA labels, name/role/value για κάθε element |
A vs AA vs AAA Levels
| Level | Τι σημαίνει | Πότε χρειάζεται |
|---|---|---|
| Level A | Βασικό — minimum compliance | Δεν αρκεί για ΕΣΠΑ ή δημόσιο τομέα |
| Level AA | Industry standard — το απαιτητό από EU/ΕΣΠΑ | ✅ Όλοι οι ιδιωτικοί + επιδοτούμενοι ιστότοποι |
| Level AAA | Υψηλότερη συμμόρφωση — δεν είναι πρακτικό για όλα | Government, healthcare, εκπαίδευση |
Παραδείγματα ιστοσελίδας κατασκευασμένης για ΑΜΕΑ
Είναι καλύτερο να μιλάμε με παραδείγματα και να δώσουμε μια κατεύθυνση για το τι εννοούμε όταν λέμε για κάποια ιστοσελίδα όμορφη και άσχημη.
Η ιστοσελίδα για τα ενοικιαζόμενα δωμάτια Sunset Peramos είναι αντικειμενικά μια όμορφη παρουσίαση ιστοσελίδας με λειτουργικότητα ερώτησης διαθεσιμότητας και ταυτόχρονα τηρεί και της προδιαγραφές για τα ΑΜΕΑ. Φυσικά να τονίσουμε ότι η παρούσα ιστοσελίδα είναι δίγλωσση, βελτιστοποιημένη για mobile συσκευές και στηρίζεται στο wordpress
Άλλο ένα παράδειγμα ιστοσελίδας κατασκευασμένη με βάση τα προαναφερθέντα πρότυπα είναι η ιστοσελίδα της ψυχολόγου στη Κατερίνη Λίζα Κάλφα. Η ιστοσελίδα της είναι συμβατή για άτομα με ειδικές ανάγκες αλλά η αισθητική της καθώς και η λειτουργικότητα της παραμένει σε υψηλά επίπεδα. Το παρών site δεν έχει να ζηλέψει σε τίποτα από ιστοσελίδες για άλλους ψυχολόγους παρά τους περιορισμούς που θέτουν τα πρότυπα.
Τι πρέπει να έχει ένα site έτσι ώστε να τηρεί τους κανόνες/οδηγίες για ΑΜΕΑ;
Υπάρχουν 3 επίπεδα WCAG το Α , ΑΑ και ΑΑΑ. Για να βρίσκεται στο ανώτερο επίπεδο η ιστοσελίδα σας πρέπει να τηρεί τα παρακάτω:
- Παροχή εναλλακτικών κειμένων για μη γραφικό περιεχόμενο.
- Παροχή λεζάντας και άλλων εναλλακτικών λύσεων για τα πολυμέσα.
- Δημιουργία περιεχομένου που μπορεί να παρουσιαστεί με διαφορετικούς τρόπους, μεταξύ άλλων με βοηθητικές τεχνολογίες, χωρίς να χάσει το νόημα του.
- Ποιο εύκολο για τους χρήστες να δουν και να ακούσουν το περιεχόμενο.
- Χρήση όλων των λειτουργιών από ένα πληκτρολόγιο.
- Οι χρήστες έχουν αρκετό χρόνο για να διαβάσουν και να χρησιμοποιήσουν το περιεχόμενο.
- Μη χρησιμοποίηση περιεχομένου που προκαλεί επιληπτικές κρίσεις.
- Βοήθεια τους χρήστες να πλοηγηθούν και να βρουν περιεχόμενο.
- Αναγνώσιμα και κατανοητά κείμενα Το περιεχόμενό εμφανίζεται και λειτουργεί με προβλέψιμο τρόπο.
Κάποια από τα βασικά που πρέπει να τηρεί η ιστοσελίδα για να συμμορφώνεται με τους παραπάνω κανόνες είναι να έχει valid html χωρίς errors και να υπάρχει μεγάλη αντίθεση χρωμάτων. Εφόσον το site πρόκειται να περάσει έλεγχο για το ΕΣΠΑ ή LEADER, οι υπηρεσίες δίνουν κατάλογο με τα εργαλεία από τα οποία πρέπει να παραχθούν βεβαιώσεις με την σφραγίδα του κατασκευαστή της ιστοσελίδας.
ΕΣΠΑ Compliance Checklist
| # | Απαίτηση WCAG 2.1 AA | Τι σημαίνει πρακτικά |
|---|---|---|
| 1 | Color contrast ≥ 4.5:1 (text) | Όχι ανοιχτό γκρι σε λευκό |
| 2 | Alt text σε όλες τις εικόνες | Περιγραφικό, όχι “image1.jpg” |
| 3 | Keyboard navigation | Όλα τα controls προσβάσιμα μέσω Tab |
| 4 | Visible focus indicator | Φαίνεται που είσαι όταν χρησιμοποιείς keyboard |
| 5 | Semantic HTML (h1, h2, nav, main) | Όχι divitis |
| 6 | ARIA labels όπου χρειάζεται | Σε custom controls / icons |
| 7 | Form labels & error messages | Κάθε input έχει label, errors είναι σαφή |
| 8 | Captions/transcripts σε video | Subtitles σε όλο το media content |
| 9 | Resizable text έως 200% | Layout δεν σπάει σε zoom |
| 10 | Reflow σε 320px width | Mobile-friendly, no horizontal scroll |
| 11 | Lang attribute στο HTML | <html lang=”el”> |
| 12 | Accessibility statement σελίδα | Δηλώνει το επίπεδο συμμόρφωσης |
Πώς να κάνεις την ιστοσελίδα σου WCAG 2.1 AA συμβατή σε 12 βήματα
Step-by-step checklist για συμμόρφωση με WCAG 2.1 AA — το νομικά απαιτητό πρότυπο για ΕΣΠΑ προγράμματα και ιστοσελίδες δημόσιου τομέα στην Ελλάδα. Καλύπτει color contrast, keyboard navigation, semantic HTML, ARIA labels, mobile reflow και accessibility statement.
PT4W
Color contrast audit
Έλεγξε ότι όλο το κείμενο της σελίδας έχει contrast ratio τουλάχιστον 4.5:1 σε σχέση με το background (3:1 για large text άνω των 18pt). Χρησιμοποίησε WebAIM Contrast Checker (webaim.org/resources/contrastchecker/) για να δοκιμάσεις χρώματα. Διόρθωσε όλα τα παραδείγματα όπου ανοιχτό γκρι κείμενο πέφτει σε λευκό background.
Alt text σε όλες τις εικόνες
Πρόσθεσε περιγραφικό alt text σε κάθε εικόνα στο site. Το alt πρέπει να περιγράφει τι δείχνει η εικόνα και τη λειτουργία της. Για decorative εικόνες χωρίς νόημα, βάλε άδειο alt=””. Απόφυγε γενικά κείμενα όπως “image1.jpg” ή “banner.png”. Έλεγξε ειδικά τα logo, τα icons και τα product images.
Keyboard navigation
Δοκίμασε να πλοηγηθείς σε όλη τη σελίδα χρησιμοποιώντας μόνο το πληκτρολόγιο (Tab για να μετακινηθείς, Enter ή Space για κλικ). Όλα τα interactive elements (links, buttons, forms, menus) πρέπει να είναι προσβάσιμα. Διόρθωσε στοιχεία που μπορούν να ενεργοποιηθούν μόνο με ποντίκι (hover-only menus, custom dropdowns).
Visible focus indicator
Πρόσθεσε CSS :focus styles σε όλα τα interactive elements ώστε να φαίνεται καθαρά σε ποιο στοιχείο βρίσκεται ο χρήστης όταν πλοηγείται με keyboard. Το outline πρέπει να είναι τουλάχιστον 2px πάχος και να έχει contrast ≥3:1 με το background. Μην αφαιρείς το default outline του browser χωρίς να βάλεις δικό σου.
Semantic HTML
Αντικατάστησε generic divs με semantic HTML5 elements: <header> για το header, <nav> για navigation, <main> για το κύριο περιεχόμενο, <article> για άρθρα, <aside> για sidebar, <footer> για το footer. Χρησιμοποίησε σωστή ιεραρχία headings (ένα H1 ανά σελίδα, μετά H2, H3 σε λογική σειρά).
ARIA labels και roles
Πρόσθεσε aria-label, aria-labelledby ή aria-describedby σε custom controls, icons-only buttons, και interactive widgets. Παράδειγμα: <button aria-label=”Κλείσιμο menu”>×</button>. Για custom dropdowns ή modals, χρησιμοποίησε σωστά ARIA roles (role=”dialog”, role=”menu”, aria-expanded κτλ).
Form labels και error handling
Κάθε <input>, <select> και <textarea> πρέπει να έχει αντιστοιχισμένο <label> (μέσω for/id ή με wrapping). Τα error messages πρέπει να είναι προσβάσιμα μέσω aria-describedby και να εμφανίζονται κοντά στο πεδίο που έχει το πρόβλημα. Χρησιμοποίησε aria-required και aria-invalid όπου χρειάζεται.
Captions και transcripts σε media
Όλα τα video που έχεις στη σελίδα πρέπει να έχουν closed captions (CC) στα Ελληνικά. Audio content (podcasts, voice-overs) χρειάζεται transcript σε κείμενο. Auto-generated captions από YouTube/Facebook συνήθως δεν είναι αρκετά ακριβή — χρειάζεται review.
Resizable text έως 200%
Δοκίμασε να κάνεις zoom στη σελίδα έως 200% (Ctrl + plus, ή zoom μέσω browser settings). Το layout δεν πρέπει να σπάει, το κείμενο δεν πρέπει να κόβεται και τα controls να παραμένουν λειτουργικά. Απόφυγε fixed pixel sizes — χρησιμοποίησε rem ή em για font-size.
Mobile reflow σε 320px
Δοκίμασε τη σελίδα σε viewport 320px width (το μικρότερο smartphone size). Δεν πρέπει να υπάρχει horizontal scroll, όλα τα controls πρέπει να είναι touch-friendly (min 44x44px target size για WCAG 2.1, 24×24 για 2.2). Το μενού πρέπει να μετατρέπεται σε mobile-friendly version.
Lang attribute στο HTML
Βεβαιώσου ότι το <html> tag έχει σωστό lang attribute: <html lang=”el”> για Ελληνικό περιεχόμενο. Αν έχεις multilingual site, κάθε γλώσσα πρέπει να έχει το δικό της lang. Για inline αλλαγή γλώσσας μέσα σε παράγραφο, χρησιμοποίησε <span lang=”en”>English text</span>.
Accessibility statement σελίδα
Δημιούργησε μια σελίδα /accessibility-statement (ή /dilosi-prosvasimotitas) που δηλώνει: το επίπεδο WCAG συμμόρφωσης (π.χ. WCAG 2.1 AA), τις γνωστές εξαιρέσεις, στοιχεία επικοινωνίας για αναφορά προβλημάτων προσβασιμότητας, και ημερομηνία τελευταίου ελέγχου. Αυτή είναι υποχρεωτική για συμμόρφωση με τον Ν. 4727/2020.
Γιατί να υλοποιηθεί ιστοσελίδα με βάση το πρότυπο WCAG 2.0;
Η συμμόρφωση της σελίδας σας με το πρότυπο WCAG 2.0 παρουσιάζει ένα πλήθος πλεονεκτημάτων, που αφορά τόσο τους χρήστες, όσο και την ίδια την επιχείρηση σας.
Εκτός από την εταιρική και κοινωνική σας ευθύνη απέναντι στα ΑΜΕΑ, είναι καλό και για την ίδια την ιστοσελίδα σας να τηρούνται τα πρότυπα. Εφόσον τα πρότυπα τηρούνται παίρνετε ένα bonus από τις μηχανές αναζήτησης όσων αφορά την προώθηση της ιστοσελίδας σας σε αυτές. Παράδειγμα ιστοσελίδας λογιστή στη Καβάλα που ακολουθεί τα πρότυπα για ΑΜΕΑ και έχει επιβραβευθεί από το google είναι η παρακάτω. Φυσικά η ιστοσελίδα είναι πλήρως λειτουργική και βελτιστοποιημένη για την ταχύτητα της.
Η άνεση στην πρόσβαση που προέρχεται από την τήρηση των κανόνων δημιουργεί ευχαριστημένους χρήστες και οι ευχαριστημένοι χρήστες είναι ευχαριστημένοι πελάτες.
Πόσο κοστίζει μια ιστοσελίδα για ΑΜΕΑ;
Μια ιστοσελίδα για για ΑΜΕΑ με το πρότυπο WCAG 2.0 κοστίζει όσο μια κανονική ιστοσελίδα ή e-shop δηλαδή σύμφωνα με τις απαιτήσεις του πελάτη μπορεί να κοστίζει από 1500 έως 5000 ευρώ (ίσως και παραπάνω ανάλογα με το τι θα ζητήσει ο πελάτης). Το μόνο που είναι έξτρα σε κόστος είναι η δουλειά που πρέπει να γίνει για τον έλεγχο της ιστοσελίδας με τα κατάλληλα εργαλεία έτσι ώστε να παραχθούν οι κατάλληλες βεβαιώσεις σε περίπτωση ένταξης της επιχείρησης σε ΕΣΠΑ.
Στη Web-Mate έχουμε κατασκευάσει εκατοντάδες ιστοσελίδες με βάση όλα τα παραπάνω για πελάτες μας αλλά και για άλλους συναδέλφους που δεν μπορούν να αναλάβουν την απαιτητική αυτή διαδικασία. Εάν θέλεις μια ιστοσελίδα που τηρεί όλες τις παραπάνω προδιαγραφές μίλα μαζί μας!
Τι πρόστιμα ρισκάρεις χωρίς WCAG 2.1 AA
Σύμφωνα με τον Ν. 4727/2020 (που ενσωματώνει την EU Directive 2016/2102): πρόστιμα έως €5.000 ανά παραβίαση. Για ΕΣΠΑ: αν δεν περάσει ο τελικός έλεγχος συμμόρφωσης, υπάρχει κίνδυνος ΑΚΥΡΩΣΗΣ της επιδότησης (επιστροφή των χρημάτων). Ισχύει για κάθε ιστότοπο δημόσιου ή επιδοτούμενου τομέα — και αυξανόμενα και για ιδιωτικές επιχειρήσεις πάνω από συγκεκριμένο μέγεθος (Accessibility Act 2025).
Ποιο πρότυπο WCAG ισχύει για ιστοσελίδες ΑΜΕΑ σήμερα;
Από το 2018 ισχύει η WCAG 2.1 σε επίπεδο AA, που είναι νομικά απαιτητή από την Ευρωπαϊκή Οδηγία 2016/2102 και τα προγράμματα ΕΣΠΑ. Από τον Οκτώβριο 2023 υπάρχει και η WCAG 2.2 με 9 επιπλέον κριτήρια — προαιρετική, αλλά συνιστάται για future-proof projects. Η WCAG 2.0 είναι πλέον ξεπερασμένη.
Τι είναι τα POUR principles του WCAG;
POUR είναι οι 4 θεμελιώδεις αρχές του WCAG: Perceivable (Αντιληπτό) — οι πληροφορίες πρέπει να γίνονται αντιληπτές μέσω alt text, captions και επαρκούς contrast. Operable (Λειτουργικό) — η σελίδα πρέπει να λειτουργεί χωρίς ποντίκι (keyboard navigation). Understandable (Κατανοητό) — το περιεχόμενο και τα controls πρέπει να είναι σαφή με καθαρή γλώσσα και predictable navigation. Robust (Στιβαρό) — συμβατότητα με assistive technologies μέσω valid HTML και σωστών ARIA labels.
Ποια διαφορά έχουν τα επίπεδα A, AA, AAA του WCAG;
Level A είναι το βασικό επίπεδο συμμόρφωσης (minimum) και δεν αρκεί για ΕΣΠΑ. Level AA είναι το industry standard και το νομικά απαιτητό από την Ευρωπαϊκή Ένωση — όλοι οι ΕΣΠΑ-funded ιστότοποι πρέπει να το πληρούν. Level AAA είναι η ανώτατη συμμόρφωση και συνιστάται για government, healthcare και εκπαιδευτικά websites αλλά δεν είναι πάντα εφικτό για όλο το περιεχόμενο μιας σελίδας.
Είναι το WCAG 2.0 αρκετό για ΕΣΠΑ προγράμματα;
Όχι. Το WCAG 2.0 (2008) έχει αντικατασταθεί από το WCAG 2.1 AA που είναι το νομικά απαιτητό από την Ευρωπαϊκή Οδηγία 2016/2102 (ισχύει από τον Σεπτέμβριο του 2018) και ενσωματώθηκε στο ελληνικό δίκαιο με τον Ν. 4727/2020. Για ΕΣΠΑ projects χρειάζεσαι WCAG 2.1 AA — διαφορετικά ρισκάρεις απόρριψη ή ακύρωση της επιδότησης.
Ποιες είναι οι βασικές απαιτήσεις WCAG 2.1 AA;
Οι 12 πιο κρίσιμες απαιτήσεις WCAG 2.1 AA είναι: color contrast 4.5:1 για κείμενο, alt text σε όλες τις εικόνες, keyboard navigation, visible focus indicator, semantic HTML, σωστά ARIA labels, form labels και σαφή error messages, captions ή transcripts σε video, resizable text έως 200%, mobile reflow σε 320px χωρίς horizontal scroll, σωστό lang attribute στο HTML, και dedicated accessibility statement σελίδα.
Πώς ελέγχω αν η ιστοσελίδα μου είναι WCAG-compliant;
Χρησιμοποίησε τα παρακάτω εργαλεία: WAVE από το WebAIM (wave.webaim.org), axe DevTools Chrome extension, Lighthouse Accessibility audit στο Chrome DevTools, και WCAG-EM Report Tool. Για πλήρη certification χρειάζεται manual audit από εξειδικευμένο επαγγελματία και δοκιμές με πραγματικούς χρήστες με αναπηρία ή με assistive technologies όπως screen readers.
Πόσο κοστίζει μια WCAG 2.1 AA συμβατή ιστοσελίδα;
Το κόστος ξεκινά από €2000-€2.500 για basic WCAG 2.1 AA συμβατή ιστοσελίδα. Για e-shop ή πιο σύνθετα projects, το κόστος μπορεί να φτάσει €5.000-€10.000+. Ο WCAG audit και η πιστοποίηση κοστίζουν συνήθως €300-€1.500 ανάλογα με το μέγεθος της ιστοσελίδας. Η WebΜate παρέχει πακέτα WCAG 2.1 AA από €2000 και dedicated audit + remediation από €600.
Ποια είναι η διαφορά μεταξύ WCAG 2.1 και 2.2;
Η WCAG 2.2 (Οκτώβριος 2023) προσθέτει 9 νέα κριτήρια στη 2.1, εστιάζοντας σε: focus appearance (visible focus με συγκεκριμένη contrast), drag movements (alternatives για drag-and-drop), target size (minimum 24×24 pixels για clickable elements), και cognitive accessibility improvements. Η 2.1 παραμένει το νομικά απαιτητό, ενώ η 2.2 είναι recommended για νέα projects που θέλουν future-proof συμμόρφωση.
Πόσο χρόνο παίρνει να γίνει η ιστοσελίδα μου WCAG-compliant;
Για νέα ιστοσελίδα κατασκευασμένη από την αρχή με WCAG 2.1 AA: 4-8 εβδομάδες (επιπλέον 15-20% χρόνος σε σχέση με μη-compliant κατασκευή). Για retrofit υπάρχουσας σελίδας: 2-6 εβδομάδες ανάλογα με το μέγεθος και το πόσο μακριά είσαι από τη συμμόρφωση. Το audit και το remediation plan από μόνα τους χρειάζονται 1-2 εβδομάδες.
Αφήστε ένα σχόλιο