Την Δευτέρα 30 Ιανουαρίου 2023, πραγματοποιήθηκε το Content Creators Meetup by Ideadeco, με θεματική το Web Accessibility στα websites, blogs, eshops και στα social media. Στην δεύτερη ομιλία παρακολουθήσαμε τον Αντώνη Ζεάκη στην προσεγμένη παρουσιάση του: Πώς να κάνετε το website σας προσβάσιμο για όλους τους επισκέπτες.

Παρακάτω είναι διαθέσιμο το υλικό της ομιλίας σε μορφή PDF.

Κείμενα Παρουσίασης Ανά Σελίδα

1. Φωτογραφία του Αντώνη Ζεάκη. Web Accesibility: Πως να κάνετε το website σας προσβασιμο για όλους τους επισκέπτες.
2. Φωτογραφία του Αντώνη Ζεάκη. ANTONIS ZEAKIS, IT Engineer, UX/UI Designer, Web Developer, Consultant, Business Owner
3. ΑΣ ΞΕΚΙΝΗΣΟΥΜΕ
4. TI EINAI ΙΣΤΟΤΟΠΟΣ;
5. Φωτογραφία Logo WIKIPEDIA. Τι είναι ιστότοπος; Ένας ιστότοπος, ιστοχώρος ή διαδικτυακός τόπος (αγγλ. web site) είναι μία συλλογή από ιστοσελίδες, εικόνες, βίντεο και άλλα ψηφιακά στοιχεία, τα οποία φιλοξενούνται στο ίδιο domain (περιοχή) του Παγκόσμιου Ιστού.
6. Φωτογραφία Logo CERN. Τι είναι ιστότοπος; Ο πρώτος ιστότοπος που μπήκε στο διαδίκτυο δημιουργήθηκε και δημοσιεύτηκε στις 13 Νοεμβρίου 1990 από τον επιστήμονα του CERN, Τιμ Μπέρνερς Λι. Στις 30 Απριλίου 1993, το CERN ανακοίνωσε ότι ο Παγκόσμιος Ιστός θα είναι ελεύθερα προσβάσιμος σε όλους.
7. TI EINAI ΠΡΟΣΒΑΣΙΜΟΤΗΤΑ;
8. Φωτογραφία Logo WIKIPEDIA. Τι είναι προσβασιμότητα; Η προσβασιμότητα με την έννοια που αναφέρεται εδώ αφορά το σχεδιασμό προϊόντων, συσκευών, υπηρεσιών ή περιβαλλόντων έτσι ώστε να μπορούν να χρησιμοποιηθούν από άτομα με ειδικές ανάγκες. Η έννοια του προσβάσιμου σχεδιασμού και της πρακτικής της προσβάσιμης ανάπτυξης εξασφαλίζει τόσο την «άμεση πρόσβαση» (δηλαδή χωρίς βοήθεια) όσο και την «έμμεση πρόσβαση» που σημαίνει συμβατότητα με την βοηθητική τεχνολογία ενός ατόμου (για παράδειγμα, αναγνώστες οθόνης υπολογιστή).
9. ΓΙΑΤΙ ΠΡΕΠΕΙ ΝΑ ΜΑΣ ΝΟΙΑΖΕΙ Η ΠΡΟΣΒΑΣΙΜΟΤΗΤΑ;
10. Φωτογραφία User Internet Growth from 2018 to 2023.
11. 1 δις κόσμος (15%) σύμφωνα με την Παγκόσμια Τράπεζα έχουν κάποια αναπηρία.
12. Φωτογραφία με σταστιστικά: 19.9 Million Adults in the US (8.2%) have a difficulty which can impact their use of a mouse or keyboard.
13. O παγκόσμιος τζίρος τους είναι 500 δις ετησίως.
14. Εγκαταλείπουν τα 2/3 των eshops λόγω έλλειψης προσβασιμότητας.
15. Το 82% δηλώνει ότι θα επιστρέψει να αγοράσει ξανά από ένα προσβάσιμο website.
16. Φωτογραφία By 2023, digital products in full WCAG Level 2 compliance are expected to outperform their market competitors by 50%. HubSpot
17. Φωτογραφία ADA Title III Website Accessibility lawsuits in Federal Court 2017-2021.
18. ΤΙ ΕΙΝΑΙ ΤΟ ΠΡΟΤΥΠΟ WCAG;
19. ΤΙ ΕΙΝΑΙ ΤΟ ΠΡΟΤΥΠΟ WCAG; Web Content Accessibility Guidelines.
20. WCAG Το πρότυπο WCAG εξηγούν πώς να κάνετε το περιεχόμενο ενός ιστοτόπου πιο προσιτό στα άτομα με αναπηρία. Το «περιεχόμενο» του ιστοτόπου αναφέρεται γενικά στις πληροφορίες μιας ιστοσελίδας ή μιας διαδικτυακής εφαρμογής, συμπεριλαμβανομένων: φυσικές πληροφορίες όπως κείμενο, εικόνες και ήχοι, ο προγραμματιστικός κώδικας που ορίζει τη δομή,
    την παρουσίαση κ.λπ.
21. 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.
22. Φωτογραφία με τα σύμβολα βαθμολογίας WCAG. A Minimum. AA Recommend. AAA Highest.
23. ΠΟΙΕΣ ΕΙΝΑΙ ΟΙ ΒΑΣΙΚΕΣ ΑΡΧΕΣ ΤΟΥ WCAG 2.0;
24. Να έχει αντιληπτό περιεχόμενο.
25. WCAG 2.0 Να έχει αντιληπτό περιεχόμενο. Σημαίνει να μπορεί να αντιληφθεί με τις αισθήσεις του τα στοιχεία της ιστοσελίδας (όραση και ακοή).
26. WCAG 2.0 Κοινά Προβλήματα: – Οι χαρακτήρες δεν ανήκουν σε κάποια γλώσσα πχ Greeklish, επομένως δεν μπορουν να διαβαστούν από τα εργαλεία ανάγνωσης. – Τα video δεν έχουν υπότιτλους και οι εικόνες δεν μπορούν να διαβαστούν.
27. WCAG 2.0 Λύσεις: – Εναλλακτικό κείμενο (alt text) Παρέχετε εναλλακτικές λύσεις κειμένου για οποιοδήποτε μη κειμενικό περιεχόμενο, ώστε να μπορεί να μετατραπεί σε άλλες μορφές που χρειάζονται οι άνθρωποι, όπως μεγάλα γράμματα, μπράιγ, ομιλία, σύμβολα ή απλούστερη γλώσσα. Μέσα που βασίζονται στο χρόνο: Παρέχετε εναλλακτικές λύσεις για μέσα που βασίζονται στο χρόνο. Προσαρμόσιμη δομή: Δημιουργήστε περιεχόμενο που μπορεί να παρουσιαστεί με διαφορετικούς τρόπους (για παράδειγμα απλούστερη διάταξη) χωρίς να χάσετε πληροφορίες ή δομή. Ευδιάκριτο περιεχόμενο: Διευκολύνετε τους χρήστες να βλέπουν και να ακούν περιεχόμενο συμπεριλαμβανομένου του διαχωρισμού του προσκηνίου από το φόντο.
28. Να έχει λειτουργικά στοιχεία. WCAG 2.0. Να έχει λειτουργικά στοιχεία. Να μπορεί να χρησιμοποιήσει τα κουμπιά , την πλοήγηση , τα στοιχεία ελέγχου με τα εργαλεία ανάγνωσης και φωνής.
29. WCAG 2.0 Κοινά Προβλήματα: – Αλλαγή περιεχομένου όταν το ποντίκι πηγαίνει πάνω στο αντικείμενο (hover). – Δεν μπορεί να κλείσει τα POPUP.
30. WCAG 2.0 Λύσεις : Όλες οι λειτουργίες να είναι διαθέσιμες με πληκτρολόγιο. Η προσβασιμότητα του πληκτρολογίου είναι μια από τις πιο σημαντικές αρχές της προσβασιμότητας, επειδή περιορίζει τις τεχνολογίες αναπηρίας. Χρόνος επίσκεψης: Θα πρέπει ο χρόνος επίσκεψης να είναι αρκετός για να μπορέσουν να διαβάσουν και να χρησιμοποιήσουν το περιεχόμενο. Επιληπτικές κρίσεις: Δεν θα πρέπει να υπάρχει περιεχόμενο που μπορεί να προκαλέσει επιληπτικές κρίσεις. Εύκολη πλοήγηση: Θα πρέπει όλα τα στοιχεία ελέγχου και περιεχομένου να βοηθούν τον επισκέπτη να πλοηγηθεί.
31. Να έχει κατανοητό περιεχόμενο.
32. WCAG 2.0 – Να έχει κατανοητό περιεχόμενο. Να μπορεί να καταλάβει το περιεχόμενο έτσι ώστε να μάθει καλύτερα την ιστοσελίδα και να μπορεί να πλοηγηθεί εύκολα ξανά και ξανά. Θέλουμε συνέπεια στο σχεδιασμό καθώς και τον τρόπο που μιλάμε.
33. WCAG 2.0 Κοινά Προβλήματα: Χρησιμοποιούμε στην ιστοσελίδα συγκεκριμένες ορολογίες και συντομογραφίες και το κοινό δεν μπορεί να καταλάβει τι γράφουμε, αν αυτό δεν εξηγείται κάπου. Η πλοήγηση και η σειρά των συνδέσμων αλλάζουν από σελίδα σε σελίδα. Έτσι ο χρήστης πρέπει να εκπαιδεύεται σε κάθε σελίδα πώς να πλοηγηθεί.
34. WCAG 2.0 Λύσεις: Εύκολα αναγνώσιμο περιεχόμενο. Κάνετε το περιεχόμενο να είναι ευανάγνωστο και κατανοητό. Αναμενόμενο περιεχόμενο. Δημιουργήστε ένα συνεπές μοτίβο έτσι ώστε να μην υπάρχουν εκπλήξεις στον επισκέπτη. Βοήθεια στις φόρμες. Βοηθήστε τον επισκέπτη να καταλάβει τι πρέπει να συμπληρώσει σε κάθε πεδίο φόρμας.
35. Να έχει συμβατό περιεχόμενο.
36. WCAG 2.0 – Να έχει συμβατό περιεχόμενο. Να μπορεί να αναγνωστεί από τους περισσότερους χρήστες διατηρώντας συμβατότητα με browsers και τεχνολογίες που έχει το περισσότερο κοινό.
37. WCAG 2.0 Κοινά Προβλήματα: Η ιστοσελίδα απαιτεί μία συγκεκριμένη έκδοση λογισμικού η οποία δεν χρησιμοποιείται ευρέως και την έχει μόνο συγκεκριμένο κοινό. Έτσι κόβουμε την προσβασιμότητα σε αρκετούς επισκέπτες.
38. WCAG 2.0 Λύσεις: Προσπαθήστε να παραμείνετε συμβατοί με τις προτεινόμενες και πιο δημοφιλείς εκδόσεις στις τεχνολογίες που χρησιμοποιεί το κοινό σας.
39. ΣΥΝΗΘΙΣΜΕΝΕΣ ΕΡΓΑΣΙΕΣ ΓΙΑ ΠΡΟΓΡΑΜΜΑΤΙΣΤΕΣ
40. WCAG 2.0 Συνηθισμένες εργασίες για προγραμματιστές : Πρέπει να μπουν alt texts σε όλες τις
    φωτογραφίες. Πρέπει να μπει κείμενο στα πεδία φόρμας που να εξηγεί περί τίνος πρόκειται. Πρέπει τα links να έχουν κείμενο. Να μην έχουν ένα αυτόματο refresh μετά από κάποια ώρα.
41. Τα κείμενα με το φόντο τους θα πρέπει να έχουν αντίθεση τουλάχιστον 4.5:1. Εκτός από: Μεγάλα κείμενα (εκεί μπορούμε να έχουμε 3:1), Κείμενα που δεν φαίνονται στον επισκέπτη, Λογότυπα.
42. WCAG 2.0 Φωτογραφία με παραδείγματα χρωματικής αντίθεσης.
43. WCAG 2.0 Φωτογραφία με παραδείγματα αντίθεσης χρωμάτων σε κουμπιά.
44. ΕΡΓΑΛΕΙΑ ΕΛΕΓΧΟΥ
45. ΕΡΓΑΛΕΙΑ ΕΛΕΓΧΟΥ https://achecker.achecks.ca/
46. ΕΡΓΑΛΕΙΑ ΕΛΕΓΧΟΥ https://webaim.org/resources/contrastchecker/
47. ΕΡΓΑΛΕΙΑ ΕΛΕΓΧΟΥ https://wave.webaim.org/
48. ΕΡΓΑΛΕΙΑ ΓΙΑ ΠΡΟΓΡΑΜΜΑΤΙΣΤΕΣ
49. Φωτογραφία με εργαλεία για προγραμματιστές.
50. ΕΠΟΜΕΝΑ ΒΗΜΑΤΑ WCAG 2.0. 1) Ελέγχετε το website σας για το αν είναι συμβατό με το πρότυπο WCAG 2.0. 2) Ενημερώνετε τον προγραμματιστή σας να διορθωθούν τα λάθη. 3) Θα σας ενημερώσει τι πρέπει να αλλάξει στην ιστοσελίδα για να είναι συμβατή. 4) Παίρνετε την απόφαση και ξεκινάτε.
51. Φωτογραφία με την λέξη inclusivity – συμπεριληπτικότητα.
52. Φωτογραφία. Δεν επιβιώνει το δυνατότερο είδος, ούτε το ευφυέστερο, αλλά το πιο ευπροσάρμοστο στις αλλαγές.
53. Ερωτήσεις?
54. Thank you

To Βίντεο της Ομιλίας

Ο Αντώνης Ζεάκης μας βοήθησε να κατανοήσουμε το web accessibility από την πλευρά των web developers. Όπως τόνισε, ο ψηφιακός μετασχηματισμός μέσα στις επιχειρήσεις έχει ξεκινήσει για τα καλά. Κάθε επιχείρηση προσπαθεί να βρει εκεί έξω, μέσα από τις ιστοσελίδες του, τον τέλειο επισκέπτη για να κάνει τη γνωριμία, να κερδίσει εμπιστοσύνη και στο τέλος την πώληση.

Σε αυτό το σημείο όμως έχει μείνει πίσω ο επισκέπτης, και πιο συγκεκριμένα το 15% που σύμφωνα με τον Παγκόσμιο Οργανισμό Υγείας, έχει κάποια αναπηρία. Το 90% των ιστοσελίδων εκεί έξω είναι ακατάλληλο για πρόσβαση σε ανθρώπους με πρόβλημα όρασης, ενώ το 98,1% έχει τουλάχιστον δύο λάθη προσβασιμότητας που θα αναγκάσουν έναν άνθρωπο με αναπηρία να μην μπορεί να περιηγηθεί.

Πώς μπορούμε να το αλλάξουμε αυτό; Τι είναι το περιβόητο πρότυπο WCAG2.0 που κάνει τις ιστοσελίδες συμβατές σε ανθρώπους με προβλήματα όρασης και γιατί πρέπει όλες οι επιχειρήσεις να το υιοθετήσουν ασχέτως αν έχουν εγκριθεί για κάποια επιδότηση; Τι πρέπει να προσέξουν οι designers και developers εξ αρχής για να μην αποκλείσουν ένα κοινό που ξοδεύει 500δις το χρόνο παγκοσμίως;

Γνωρίστε τον Αντώνη Ζεάκη

Ο Αντώνης Ζεάκης ασχολείται με το Web Design & Development τα τελευταία 20 χρόνια και έχει εργαστεί πολλά χρόνια στον τομέα των Τηλεπικοινωνιών σε εταιρίες όπως Hellas Online και Vodafone.

Από το 2010 ασχολείται με το επιχειρείν , ιδρύοντας επιχειρήσεις στον τεχνολογικό τομέα ενώ το 2016 ίδρυσε την Upthink Digital Agency με ειδίκευση στο Web Design και την Υποστήριξη των Ιστοσελίδων. Για περισσότερες πληροφορίες επισκεφτείτε το website του www.upthink.gr ή το LinkedIn προφίλ του https://www.linkedin.com/in/azeakis/

Πληροφορίες για το Web Accessibility Meetup

Στο παρακάτω link μπορείτε να διαβάσετε αναλυτικά όλες τις πληροφορίες για το Content Creators Meetup: Activate Web Accessibility.

Ευχαριστούμε τους χορηγούς μας για την υποστήριξη τους:

• Upthink Digital Agency
• www.justonline.gr
• www.seminaria.gr
• www.stellakispatroklos.com
• IDEADECO SEO Copywriting Agency

Η Παρουσίαση της Χριστίνας Σαρρή

Η Χριστίνα Σαρρή μας περιέγραψε πως αλληλεπιδρά στον ψηφιακό κόσμο και ποια είναι τα εμπόδια που δυσκολεύουν την πρόσβαση της τόσο στα ψηφιακά μέσα κοινωνικής δικτύωσης όσο και στα websites. Μας βοήθησε να κατανοήσουμε τι την εξαιρεί από την δυνατότητα να κάνει τις δικές της online αγορές ή απλά να περιηγηθεί στα ψηφιακά μέσα.

Ο διάλογος με την Αρετή Βάσσου, σε συνδυασμό με τις ερωτήσεις του κοινού, τόνισε τον ρόλο που έχουν στην εφαρμογή των αρχών προσβασιμότητας οι website & eshop owners αλλά και οι επαγγελματίες content creators, copywriters, social media managers, web designers, web developers, content writers, digital marketing experts, journalists και web editors. Διαβάστε την παρουσίαση της Χριστίνας Σαρρή στο σχετικό άρθρο.