1.
WEB
ACCESSIBILITY:
Πώς να κάνετε το
website σας
προσβάσιμο για όλους
τους επισκέπτες
ANTONIS ZEAKIS
UPTHINK

2.
ANTONIS ZEAKIS
IT Engineer
UX/UI Designer
Web Developer
Consultant
Business Owner

3.
ΑΣ ΞΕΚΙΝΗΣΟΥΜΕ

4.
TI EINAI
ΙΣΤΟΤΟΠΟΣ;

5.
Τι είναι ιστότοπος;
Ένας ιστότοπος, ιστοχώρος ή
διαδικτυακός τόπος (αγγλ. web site)
είναι μία συλλογή από ιστοσελίδες,
εικόνες, βίντεο και άλλα ψηφιακά
στοιχεία, τα οποία φιλοξενούνται στο
ίδιο domain (περιοχή) του Παγκόσμιου
Ιστού.

6.
Τι είναι ιστότοπος;
Ο πρώτος ιστότοπος που μπήκε στο
διαδίκτυο δημιουργήθηκε και
δημοσιεύτηκε στις 13 Νοεμβρίου 1990
από τον επιστήμονα του CERN, Τιμ
Μπέρνερς Λι. Στις 30 Απριλίου 1993,
το CERN ανακοίνωσε ότι ο
Παγκόσμιος Ιστός θα είναι ελεύθερα
προσβάσιμος σε όλους.

7.
TI EINAI
ΠΡΟΣΒΑΣΙΜΟΤΗΤΑ;

8.
Τι είναι προσβασιμότητα;
Η προσβασιμότητα με την έννοια που αναφέρεται
εδώ αφορά το σχεδιασμό προϊόντων, συσκευών,
υπηρεσιών ή περιβαλλόντων έτσι ώστε να μπορούν
να χρησιμοποιηθούν από άτομα με ειδικές ανάγκες.
Η έννοια του προσβάσιμου σχεδιασμού και της
πρακτικής της προσβάσιμης ανάπτυξης εξασφαλίζει
τόσο την «άμεση πρόσβαση» (δηλαδή χωρίς
βοήθεια) όσο και την «έμμεση πρόσβαση» που
σημαίνει συμβατότητα με την βοηθητική τεχνολογία
ενός ατόμου (για παράδειγμα, αναγνώστες οθόνης
υπολογιστή).

9.
ΓΙΑΤΙ ΠΡΕΠΕΙ ΝΑ
ΜΑΣ ΝΟΙΑΖΕΙ Η
ΠΡΟΣΒΑΣΙΜΟΤΗΤΑ;

10.
1 δις κόσμος (15%)
σύμφωνα με την
Παγκόσμια Τράπεζα έχουν
κάποια αναπηρία.

11.
O παγκόσμιος τζίρος
τους είναι 500 δις
ετησίως

12.
Εγκαταλείπουν τα 2/3
των eshops λόγω
έλλειψης
προσβασιμότητας

13.
Το 82% δηλώνει ότι θα
επιστρέψει να
αγοράσει ξανά από
ένα προσβάσιμο
website

14.
ΤΙ ΕΙΝΑΙ ΤΟ
ΠΡΟΤΥΠΟ
WCAG;

15.
ΤΙ ΕΙΝΑΙ ΤΟ
ΠΡΟΤΥΠΟ
WCAG;
Web
Content
Accessibility
Guidelines

16.
WCAG
Το πρότυποWCAG εξηγούν πώς να κάνετε το
περιεχόμενο ενός ιστοτόπου πιο προσιτό στα άτομα με
αναπηρία.Το «περιεχόμενο» του ιστοτόπου
αναφέρεται γενικά στις πληροφορίες μιας ιστοσελίδας
ή μιας διαδικτυακής εφαρμογής,
συμπεριλαμβανομένων:
- φυσικές πληροφορίες όπως κείμενο, εικόνες και ήχοι
- ο προγραμματιστικός κώδικας που ορίζει τη δομή,
την παρουσίαση κ.λπ.

17.
WCAG - Ιστορία
Μάιος 1999: Δημιουργήθηκε η WCAG 1.0.
Ιούλιος 1999: Αγωγή Maguire vs SOKOG
1999 (Οργανωτική Επιτροπή Ολυμπιακών
Αγώνων του Σύδνεϋ) για έλλειψη της μεθόδου
Μπράιγ για πληροφορίες εισιτηρίων και μη
προσβάσιμου website.
2005: Εφαρμογές Voice Over από την Apple
2008: Δημιουργήθηκε η WCAG 2.0
2018: Δημιουργήθηκε η WCAG 2.1
2023: H νέαWCAG 2.2 θα αναρτηθεί
τον Απρίλιο 2023

18.
ΠΟΙΕΣ ΕΊΝΑΙ ΟΙ
ΒΑΣΙΚΕΣ ΑΡΧΕΣ ΤΟΥ
WCAG 2.0;

19.
#1 Να έχει
αντιληπτό
περιεχόμενο

20.
#1
WCAG 2.0
Να έχει αντιληπτό περιεχόμενο
Σημαίνει να μπορεί να αντιληφθεί
με τις αισθήσεις του τα στοιχεία της
ιστοσελίδας (όραση και ακοή)

21.
#1
WCAG 2.0
Κοινά Προβλήματα:
- Οι χαρακτήρες δεν ανήκουν σε κάποια γλώσσα πχ
Greeklish, επομένως δεν μπορουν να διαβαστούν
από τα εργαλεία ανάγνωσης.
- Τα video δεν έχουν υπότιτλους και οι
εικόνες δεν μπορούν να διαβαστούν.

22.
#1
WCAG 2.0
Λύσεις :
Εναλλακτικό κείμενο (alt text)
Παρέχετε εναλλακτικές λύσεις κειμένου για οποιοδήποτε μη κειμενικό περιεχόμενο, ώστε να
μπορεί να μετατραπεί σε άλλες μορφές που χρειάζονται οι άνθρωποι, όπως μεγάλα
γράμματα, μπράιγ, ομιλία, σύμβολα ή απλούστερη γλώσσα.
Μέσα που βασίζονται στο χρόνο
Παρέχετε εναλλακτικές λύσεις για μέσα που βασίζονται στο χρόνο.
Προσαρμόσιμη δομή
Δημιουργήστε περιεχόμενο που μπορεί να παρουσιαστεί με διαφορετικούς τρόπους (για
παράδειγμα απλούστερη διάταξη) χωρίς να χάσετε πληροφορίες ή δομή.
Ευδιάκριτο περιεχόμενο
Διευκολύνετε τους χρήστες να βλέπουν και να ακούν περιεχόμενο
συμπεριλαμβανομένου του διαχωρισμού του προσκηνίου από το φόντο.

23.
#2 Να έχει
λειτουργικά
στοιχεία

24.
#2
WCAG 2.0
Να έχει λειτουργικά στοιχεία
Να μπορεί να χρησιμοποιήσει τα
κουμπιά , την πλοήγηση , τα
στοιχεία ελέγχου με τα εργαλεία
ανάγνωσης και φωνής.

25.
#2
WCAG 2.0
Κοινά Προβλήματα:
- Αλλαγή περιεχομένου όταν το ποντίκι πηγαίνει
πάνω στο αντικείμενο (hover).
- Δεν μπορεί να κλείσει τα POPUP

26.
#2
WCAG 2.0
Λύσεις :
Όλες οι λειτουργίες να είναι διαθέσιμες με πληκτρολόγιο
Η προσβασιμότητα του πληκτρολογίου είναι μια από τις πιο σημαντικές αρχές της
προσβασιμότητας, επειδή περιορίζει τις τεχνολογίες αναπηρίας.
Χρόνος επίσκεψης
Θα πρέπει ο χρόνος επίσκεψης να είναι αρκετός για να μπορέσουν να διαβάσουν και να
χρησιμοποιήσουν το περιεχόμενο.
Επιληπτικές κρίσεις
Δεν θα πρέπει να υπάρχει περιεχόμενο που μπορεί να προκαλέσει επιληπτικές κρίσεις.
Εύκολη πλοήγηση
Θα πρέπει όλα τα στοιχεία ελέγχου και περιεχομένου να βοηθούν τον επισκέπτη
να πλοηγηθεί.

27.
#3 Να έχει
κατανοητό
περιεχόμενο

28.
#3
WCAG 2.0
Να έχει κατανοητό περιεχόμενο
Να μπορεί να καταλάβει το περιεχόμενο έτσι
ώστε να μάθει καλύτερα την ιστοσελίδα και να
μπορεί να πλοηγηθεί εύκολα ξανά και ξανά.
Θέλουμε συνέπεια
στο σχεδιασμό καθώς και
τον τρόπο που μιλάμε.

29.
#3
WCAG 2.0
Κοινά Προβλήματα:
- Χρησιμοποιούμε στην ιστοσελίδα συγκεκριμένες
ορολογίες και συντομογραφίες και το κοινό δεν
μπορεί να καταλάβει τι γράφουμε, αν αυτό δεν
εξηγείται κάπου.
- Η πλοήγηση και η σειρά των συνδέσμων αλλάζουν
από σελίδα σε σελίδα.Έτσι ο χρήστης πρέπει να
εκπαιδεύεται σε κάθε σελίδα πώς να
πλοηγηθεί.

30.
#3
WCAG 2.0
Λύσεις:
Εύκολα αναγνώσιμο περιεχόμενο
Κάνετε το περιεχόμενο να είναι ευανάγνωστο και κατανοητό
Αναμενόμενο περιεχόμενο
Δημιουργήστε ένα συνεπές μοτίβο έτσι ώστε να μην υπάρχουν
εκπλήξεις στον επισκέπτη
Βοήθεια στις φόρμες
Βοηθήστε τον επισκέπτη να καταλάβει τι
πρέπει να συμπληρώσει σε κάθε πεδίο φόρμας.

31.
#4 Να έχει
συμβατό
περιεχόμενο

32.
#4
WCAG 2.0
Να έχει συμβατό περιεχόμενο
Να μπορεί να αναγνωστεί από τους
περισσότερους χρήστες
διατηρώντας συμβατότητα με
browsers και τεχνολογίες που
έχει το περισσότερο κοινό.

33.
#4
WCAG 2.0
Κοινά Προβλήματα:
- Η ιστοσελίδα απαιτεί μία συγκεκριμένη έκδοση
λογισμικού η οποία δεν χρησιμοποιείται ευρέως και
την έχει μόνο συγκεκριμένο κοινό.Έτσι κόβουμε
την προσβασιμότητα σε αρκετούς επισκέπτες.

34.
#4
WCAG 2.0
Λύσεις:
- Προσπαθήστε να παραμείνετε συμβατοί με τις
προτεινόμενες και πιο δημοφιλείς εκδόσεις στις
τεχνολογίες που χρησιμοποιεί το κοινό σας.

35.
ΣΥΝΗΘΙΣΜΕΝΕΣ
ΕΡΓΑΣΙΕΣ ΓΙΑ
ΠΡΟΓΡΑΜΜΑΤΙΣΤΕΣ

36.
#1
WCAG 2.0
Συνηθισμένες εργασίες για
προγραμματιστές :
- Πρέπει να μπουν alt texts σε όλες τις
φωτογραφίες
- Πρέπει να μπει κείμενο στα πεδία φόρμας που να
εξηγεί περί τίνος πρόκειται
- Πρέπει τα links να έχουν κείμενο
- Να μην έχουν ένα αυτόματο refresh μετά από
κάποια ώρα

37.
#2
WCAG 2.0
Συνηθισμένες εργασίες για
προγραμματιστές :
- Τα κείμενα με το φόντο τους θα πρέπει να έχουν αντίθεση
τουλάχιστον 4.5:1
Εκτός από :
- Μεγάλα κείμενα (εκεί μπορούμε να έχουμε 3:1)
- Κείμενα που δεν φαίνονται στον επισκέπτη
- Λογότυπα

38.
#3
WCAG 2.0

39.
#4
WCAG 2.0

40.
ΕΡΓΑΛΕΙΑ ΕΛΕΓΧΟΥ

41.
ΕΡΓΑΛΕΙΑ ΕΛΕΓΧΟΥ
https://achecker.achecks.ca/

42.
ΕΡΓΑΛΕΙΑ ΕΛΕΓΧΟΥ
https://webaim.org/resources/contrastcheck
er/

43.
ΕΡΓΑΛΕΙΑ ΕΛΕΓΧΟΥ
https://wave.webaim.org/

44.
ΕΡΓΑΛΕΙΑ ΓΙΑ
ΠΡΟΓΡΑΜΜΑΤΙΣΤΕΣ

45.
ΕΡΓΑΛΕΙΑ ΓΙΑ
ΠΡΟΓΡΑΜΜΑΤΙΣΤΕΣ

46.
ΕΠΟΜΕΝΑ ΒΗΜΑΤΑ

47.
WCAG 2.0
1) Ελέγχετε το website σας για το αν είναι
συμβατό με το πρότυπο WCAG 2.0
2) Ενημερώνετε τον προγραμματιστή σας
να διορθωθούν τα λάθη
3) Θα σας ενημερώσει τι πρέπει να αλλάξει
στην ιστοσελίδα για να είναι συμβατή
4) Παίρνετε την απόφαση και ξεκινάτε.

48.
Δεν επιβιώνει το
δυνατότερο
είδος, ούτε το
ευφυέστερο,
αλλά το πιο
ευπροσάρμοστο
στις αλλαγές.

49.
Ερωτήσεις?

50.
THANK YOU