Web Accessibility: Hardships, pitfalls, opportunities, and preparing for European Accessibility Act 2025 - Χρήστος Μπαφέρας

Speaker: Χρήστος Μπαφέρας

European Accessibility Act (EEA 2025)

ESPA compliance VS the new reality
Case studies
Στατιστικά / Target group
Kατηγορίες disabilities – γρήγορη αναφορά
Εμπλεκόμενοι stakeholders / Ποιους αφορά
Παραδείγματα συνηθισμένων λαθών προσβασιμότητας και λύσεις (flyout menu, carousels, pagination)
Λοιπά components που χρειάζονται έλεγχο (pagination load more, infinite scroll, tabs, accordions, κτλ)
Πως ξεκινάω / πως ξεμπλέκω το κουβάρι
Αξιόπιστες πηγές ενημέρωσης / οδηγοι / guidelines
Το τερπνόν μετά του ωφελίμου – Utile dulci

Transcript

1. Web accessibility: hardships, pitfalls, opportunities and preparing for EAA 2025
2. Character sheet NAME: Χρήστος Μπαφέρας RACE: Human CLASS: Web weaver SPECIALIZATION: Front-end LEVEL: ~8 χρόνια experience GUILD: Stonewave WEAPON MASTERY: HTML, CSS, JS OFFHAND: WordPress SPELLS AND ABILITIES: Summon Elemental: Bring forth elements and conjure structure. Spectral Shapeshift: Channel the cascade to alter appearances. Arcane Manipulation: Bend the document to do thy bidding. Artisan: Having worked at the forge, you’re able to craft anything from simple items to complete armor sets.
3. Questline to a11y Early game: Trial by dev combat… Early-mid game: Lighthouse, Performance, ενημέρωση από dev blogs & zines Mid game: Τριβή με accessible codebase, JS, no-JS, custom elements, progressive enhancement Current: Web accessibility, web sustainability, “New responsive”,
4. The trials of a11y “Τριβή με accessible codebase”: • Έρευνα, διάβασμα • WCAG deeper dive • Πλοήγηση με πληκτρολόγιο • ARIA attributes • Screen readers • Τεχνικές & έννοιες σχετικές με την προσβασιμότητα Αποτελέσματα: • Απόλυτο μπέρδεμα • Junior ξανα • Μη προσβάσιμα components
5. A11y is hard - 1/3 Γνωστικοί λόγοι: • Νέα ύλη προς μελέτη και κατανόηση • Νέα εργαλεία προς εκμάθηση και χρήση • Πολυπλοκότητα και ασάφεια των πρότυπων • Πληθώρα παραδειγμάτων κώδικα, πηγών και άρθρων • Μερική κατανόηση των πραγματικών αναγκών των χρηστών που σκοπεύεις να εξυπηρετήσεις * • Ελάχιστη εξοικείωση με τους τρόπους πλοήγησης των χρηστών που χρησιμοποιούν κάποιο accessibility feature
6. A11y is hard - 2/3 Τεχνικοί λόγοι: • Browser & screen reader inconsistencies & bugs • Απαιτητικό testing, τα αυτοματοποιημένα test δεν αρκούν • Απαιτεί JS, τα CSS-only components δεν είναι προσβάσιμα • H HTML έχει μείνει πίσω * • The first rule of ARIA is: “No ARIA is better than Bad ARIA” • Δυσκολία υλοποίησης σε παλιές ιστοσελίδες & συστήματα Πρακτικοί λόγοι: • Χρειάζεται παραπάνω χρόνο για υλοποίηση • Χρειάζεται υποστήριξη από το upper management • Περιορισμένο budget, πίεση χρόνου, deadlines • Αντίσταση στην αλλαγή
7. A11y is hard - 3/3 Rethink - Recheck - Redo: Dropdowns, fly-outs, hamburgers, nested menus, mega menus, popovers, carousels, tabs, accordions, modals, dialogs, forms, notifications, validation messages, pagination, load more, infinite scrolling, search boxes, breadcrumbs, tooltips, filtering, media players, progress bars, loaders, links, skip links, charts, graphs, floating action buttons, auto-complete, auto-suggest, type-ahead, tree views, general purpose disclosures & collapsibles, sidebars, images, SVG, icons, date pickers, off-window panels, timelines, buttons, tables, layouts, videos, iframes, designs, content, markup … … … … … … … … … 😥😰😱😣😖😤😢😭
8. A11y is hard: DEFEATED [1] The WebAIM Million: Αξιολόγηση προσβασιμότητας WebAIM στις αρχικές σελίδες των κορυφαίων 1.000.000 ιστότοπων. Ποσοστό σελίδων με σφάλματα WCAG: 95.9% (-0.4% σε σχέση με το 2023) Μέσος όρος σφαλμάτων: 56.8 (+13.6% σε σχέση με το 2023) Μέσος όρος ARIA attrs: 89 (+15% σε σχέση με το 2023) Διαφορα σφαλμάτων μεταξύ ARIA / χωρίς: Οι σελίδες με ARIA παρουσιάζουν 34.2% ΠΕΡΙΣΣΟΤΕΡΑ λάθη από αυτές χωρίς ARIA Σημείωση: Τα αποτελέσματα δεν αντικατοπτρίζουν την πραγματική κατάσταση της προσβασιμότητας των ιστοσελίδων, διότι είναι βασισμένα μόνο σε αυτοματοποιημένα tests.
9. WCAG 2.x criteria [2] Perceivable - Αντιληπτό: Η πληροφορία και τα UI components πρέπει να μπορούν να γίνουν αντιληπτά στους χρήστες σε περισσότερα από ένα αισθητηριακά κανάλια. Operable - Λειτουργικό: Η χρήση πληκτρολογίου πρέπει να προσφέρει α) πλήρη λειτουργικότητα των UI components και β) την δυνατότητα καθολικής πλοήγησης σε ολο το περιεχόμενο. Understandable - Κατανοητό: Η πληροφορία και η χρήση των UI components πρέπει να παρέχονται με κατανοητή και ξεκάθαρη γλώσσα. Robust - Με συνοχή: Το UI και το περιεχόμενο πρέπει να μπορούν να ερμηνευτούν σωστά από assistive technologies.
10. Quest: ΕΣΠΑ compliance Πρότυπο: WCAG 2.0 ΑΑ [2] Εργαλεία ελέγχου: WAVE, Achecker Automated testing: [3] • DOM structure • Empty headings, empty links, empty buttons • Missing alt text on images, images with text • Low contrast ratio content • Orphan labels + inputs, broken ARIA references Output: Errors, Alerts, List of ARIA, Features
11. Objective: Help the townsfolk! 1/2 [4][5] Οπτικές αναπηρίες: Τύφλωση, μειωμένη όραση, αχρωματοψία Αναπηρίες ακοής: Κώφωση (ολική / μερική) Κινητικές αναπηρίες: Απώλεια άκρων / δακτύλων, δυσκολίες στη χρήση άκρων, περιορισμένη δεξιοτεχνία, προσωρινοί τραυματισμοί, παράλυση, τρέμουλο Γνωστικές διαταραχές: Διάφορες μαθησιακές δυσκολίες, δυσλεξία, δυσλειτουργία μνήμης, διάσπαση προσοχής Νευρολογικές αναπηρίες: Επιληψία Αναπηρίες ομιλίας: Απώλεια φωνής, δυσκολία άρθρωσης Περιβαλλοντικοί παράγοντες: Φασαρία, κακός ή ελλιπης φωτισμός
12. Objective: Help the townsfolk! 2/2 Παγκοσμίως: Περίπου 16% του παγκόσμιου πληθυσμού, ή περίπου 1 δισ. άνθρωποι, ζουν με αναπηρίες. [6] Ευρωπαϊκή Ένωση: Στην Ε.E, περίπου 27% του πληθυσμού ζει με κάποια μορφή αναπηρίας. Ο αριθμός αυτός αναμένεται να αυξηθεί λόγω της γήρανσης του πληθυσμού στην Ευρώπη. [7][8] Εμείς, όλοι μας: • Στιγμιαίες ανάγκες • Ευκολία, χρηστικότητα • Ηλικία: 41, status: getting older [εγώ]
13. Quest: ΕΣΠΑ compliance !Manual testing • Assistive technologies • Keyboard navigation Μερικά αναπάντητα ερωτήματα: • Πως μετράμε το UX; • Δουλευει σωστα το UI; • Είναι το design προσβάσιμο; • Βγάζει νόημα η γλώσσα του UI; • Είναι το form validation σωστό; • Είναι το focus management σωστό; • Τι γίνεται με το δυναμικό content; • Ποιό είναι το screen reader output;
14. Quest: ΕΣΠΑ compliance - Reality check (1d20) Impending doom: • Ελλιπές testing • Επιφανειακή αξιολόγηση • Επιφανειακές διορθώσεις • Quick and dirty approach Critical fail: • Τα πρότυπα προσβασιμότητας δεν εφαρμόζονται (σωστά) • Η δουλειά δεν γίνεται σωστά • Η ιστοσελίδα δεν είναι προσβάσιμη
15. Quest: ΕΣΠΑ compliance Ωστόσο, success!?: • Η ιστοσελίδα “περνάει” τον έλεγχο • Epic Loot - ΕΣΠΑ Με άλλα λόγια: • Ατελής υλοποίηση • Οι ανάγκες των χρηστών δεν εξυπηρετούνται • Δημιουργούμε μια λανθασμένη αντίληψη των απαιτούμενων ενεργειών που χρειάζονται για να γίνει μια ιστοσελίδα προσβάσιμη • Καλλιεργούμε και συντηρούμε νοοτροπία προχειρότητας IT’S A SNAFU
16. Quest: ΕΣΠΑ compliance - COMPLETE! ✓
17. European Accessibility Act 2025 (EAA) 1/2 Τίτλος: “ΟΔΗΓΙΑ (EE) 2019/882 ΤΟΥ ΕΥΡΩΠΑΪΚΟΥ ΚΟΙΝΟΒΟΥΛΙΟΥ ΚΑΙ ΤΟΥ ΣΥΜΒΟΥΛΙΟΥ της 17ης Απριλίου 2019 σχετικά με τις απαιτήσεις προσβασιμότητας προϊόντων και υπηρεσιών” [10] Πρότυπο: WCAG 2.1 ΑΑ [9] Εφαρμογή: • Για νέα προϊόντα & υπηρεσίες - άμεση εφαρμογή από 28/06/2025 [10.1] • Για παλιά προϊόντα & υπηρεσίες - μεταβατική περίοδος μέχρι τις 28/06/2030 [10.2]
18. European Accessibility Act 2025 (EAA) 2/2 Εύρος εφαρμογής: [10.1] • Φυσικά προϊόντα • ΑΤΜ, Τερματικά Πληρωμών, E-banking • Συστήματα Έκδοσης Εισιτηρίων και Κρατήσεων • Διαδραστικά Περίπτερα, information kiosks • Υπηρεσίες Οπτικοακουστικών Μέσων, E-books • Websites, Mobile Applications, E-commerce Εξαιρέσεις: Μικρομεσαίες επιχειρήσεις (ορισμένες ως επιχειρήσεις με λιγότερους από 10 υπαλλήλους και/ή λιγότερο από 2 εκατομμύρια ευρώ ετήσιο τζίρο. [10.3]
19. Διαφορές - Παλιά νομοθεσία Αφορά: Υπηρεσίες και προϊόντα δημόσιου τομέα Κανονισμοί: Τα κράτη μέλη έχουν ξεχωριστά νομοθετικά πλαίσια και διαφορετικούς κανονισμούς. Δικαιώματα Καταναλωτών: Περιορισμένη έμφαση στα δικαιώματα των καταναλωτών και στους μηχανισμούς καταγγελιών για ζητήματα προσβασιμότητας. Παρακολούθηση: Οι έλεγχοι συμμόρφωσης είναι ευθύνη των κρατών-μελών. Επιβολή προστίμων: Η επιβολή προστίμων είναι ευθύνη των κρατών- μελών.
20. Διαφορές - EAA2025 Αφορά: Υπηρεσίες και προϊόντα ιδιωτικού τομέα Κανονισμοί: Εναρμόνιση κανόνων και ενιαίο ρυθμιστικό πλαίσιο [10.4] Δικαιώματα καταναλωτών: Ενισχυμένη προστασία καταναλωτών οι οποίοι μπορούν να ζητήσουν προσβάσιμες υπηρεσίες και προϊόντα. Εάν δεν τους παρέχονται, προβλέπεται μηχανισμός για την υποβολή καταγγελιών. [10.5] Παρακολούθηση: Διορισμός αρμόδιας αρχής υπεύθυνη για τη διασφάλιση της συμμόρφωσης με τον νόμο και την παρακολούθηση προόδου βελτιώσεων προσβασιμότητας. [10.6][10.7] Επιβολή προστίμων: Πρόστιμα, νομικές κυρώσεις, περιορισμένη πρόσβαση στην αγοράς της ΕΕ. [10.8]
21. Legal cases [11] Guillermo Robles κατά Domino’s Pizza - 2019: μη προσβάσιμη ιστοσελίδα και app National Association of the Deaf κατά Netflix (2012): έλλειψη captions στο streaming service Ομαδική αγωγή κατά Beyoncé's Parkwood Entertainment (2019): θέματα προσβασιμότητας ιστοσελίδας Ανώνυμος κατά Walmart (2021): ζητήματα προσβασιμότητας στην ιστοσελίδα Πελάτης με προβλήματα όρασης κατά Amazon (2018): μη συμβατότητα της ιστοσελίδας με screen readers
22. Demo time - Nothing will go wrong “Fabled Machine Spirit, bless this code! In this demo, may the Omnissiah guide my every keystroke!”
23. The <details> element [12] <details> <summary>Information</summary> <p>Lorem ipsum dolor ....</p> </details> <details open> <summary>Information</summary> <p>Lorem ipsum dolor ....</p> </details>
24. The <details> element [12] Introduced: 2008 Standardization: 2014 Support: Chrome (v12) - Safari (v6) ~2011-2012, Firefox (v49) 2016, Edge (Chromium) 2020 Major bugs: keyboard navigation, screen reader compatibility Browser inconsistencies resolved: 2021 Screen reader inconsistencies: 2022 (?) Demo errata: role attr on <summary>?, focusTrap?, extra button?
25. Quest: EAA 2025 - Reality check again Δεν είμαστε προσβάσιμοι: • Ελλιπές testing • Επιφανειακή αξιολόγηση και διορθώσεις • Quick and dirty approach Και επιπλέον τώρα: • Εχουμε το deadline της νέας νομοθεσίας • Η προσβασιμότητα είναι απαραίτητη (νομικά) • Μη συμμόρφωση === πρόστιμα, κυρώσεις, περιορισμένη πρόσβαση στην αγοράς της ΕΕ. Ερώτηση: Είμαστε προετοιμασμένοι;
26. Untangle spell: Εμπλεκόμενοι stakeholders Production: • Developers • UI/UX engineers • Testers • QA engineers • Team leaders Leadership: • Managers • Coordinators Content & design: • Web designers • Copywriters • Content creators Αγορά: • Πάροχοι υπηρεσιων • Πελάτες • Χρήστες
27. Untangle spell: 1/3 Production: • Έρευνα, ενημέρωση, πρακτική εξάσκηση • Καλύτερη ποιότητα κώδικα • Περισσότερο χρόνο για υλοποίηση • Ενδελεχές testing (automated + manual) • Εισαγωγή του a11y στις προγραμματιστικές συνήθειες • Εφαρμογή του a11y από την αρχή υλοποίησης ενός έργου • Επανεξέταση και διόρθωση του παρόντος codebase • Αξιολόγηση των plugins & 3rd party code. • Επανεξέταση της υλοποίησης αλλαγών σε υπάρχοντα συστήματα
28. Untangle spell: 2/3 Leadership: • Έρευνα, ενημέρωση • Εκπαίδευση ομάδας • Απόκτηση εργαλείων / εξειδικευμένων υπηρεσιών ελέγχου a11y • Επανεξέταση των plugins & 3rd party code. • Επαναπροσδιορισμός: ◦ Των διαδικασιών του production ◦ Των διαδικασιών του testing και QΑ ◦ Του κόστους ενός έργου ◦ Του χρόνου παράδοσης και υλοποίησης ◦ Της επικοινωνίας με πελάτες
29. Untangle spell: 3/3 Content & design: • Έρευνα, ενημέρωση • Χρώματα, τυπογραφία • Αποδέσμευση του design απο τα παραδοσιακά οπτικά principles • Επαναπροσδιορισμός του web design / design for screens • Επανεξέταση του τρόπου με τον οποίο γράφεται το content • Χρήση βέλτιστων και δοκιμασμένων πρακτικών Market: • Επαναπροσδιορισμός κόστους • Επαναπροσδιορισμός χρόνου παράδοσης / απόκτησης • Διασφάλιση απέναντι σε νομικά θέματα
30. Untangle spell: Κατηγοριοποίηση έργων Ανα πελατειακό εύρος: • Μεγάλα σε εύρος: κοινό codebase, μαζική εφαρμογή βελτιώσεων και διορθώσεων (πχ: General purpose themes, plugins) • Μικρά σε εύρος: unique codebase, custom design & υλοποίηση, συγκεκριμένη εφαρμογή βελτιώσεων και διορθώσεων (πχ: custom theme για συγκεκριμένο πελάτη) Ανα παλαιότητα: • Πολύ παλιά και legacy έργα: δύσκολη ή αδύνατη εφαρμογή βελτιώσεων και διορθώσεων, επιλογή έργων που θα “σωθούν” • Νεότερα έργα: εφαρμογή βελτιώσεων, απλοποίηση
31. Opportunities - Group buffs “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” Tim Berners-Lee, W3C Director and inventor of the WWW • Καλύτερο web • Καλύτεροι στην τέχνη μας • Καλύτερη ποιότητα υπηρεσιών • Μεγαλύτερο αγοραστικό κοινό • Ευκαιρίες εξειδίκευσης (a11y engineer) • Ευκαιρίες για screen reader users (testers) • Καινοτομία, δημιουργικότητα • Ανταγωνιστικό πλεονέκτημα • Ισότητα, ηθική, άρση αποκλεισμών
32. Helpful NPCs and scrolls • Smashing Magazine [13] • Hidde de Vries [14] • Adrian Roselli [15] • Scott O'Hara [16] • Sara Soueidan [17] • The a11y project [18] • WAI [19] • MDN [20] • Deque University [21] • ARIA Authoring Practices Guide (APG) [22] • Heydon Pickering [23]
33. Πηγές [1] WebAIM: The WebAIM Million: An accessibility analysis of the top 1,000,000 home pages [2] W3C: Web Content Accessibility Guidelines (WCAG) 2.0 [3] WebAIM: Testing Web Content for Accessibility [4] Indiana University: Types of Disabilities [5] W3C Web Accessibility Initiative WAI: What is Web Accessibility [6] World Health Organization: Disability and Health [7] EUROSTAT: Level of disability (activity limitation) by sex, age and income quintile
34. Πηγές [8] European Council, Council of the European Union: “ Disability in the EU: facts and figures ” [9] W3C: “Web Content Accessibility Guidelines (WCAG) 2.1 ” [10] European Parliament and Council of the European Union: “Directive (EU) 2019/882 of the European Parliament and of the Council of 17 April 2019. ” • [10.1] CHAPTER I: General provisions, Article 2 - Scope - (1) • [10.2] CHAPTER XI: Delegated acts, implementing powers and final provisions, Article 32 - Transitional measures • [10.3] CHAPTER I: General provisions, Article 3 - Definitions - (23)(24)
35. Πηγές • [10.4] CHAPTER II: Accessibility requirements and free movement, Article 4 - Accessibility requirements • [10.5] CHAPTER III: Obligations of economic operators dealing with products, Article 7 - Obligations of manufacturers • [10.6] CHAPTER IV: Obligations of service providers, Article 13 - Obligations of service providers • [10.7] CHAPTER VI: Harmonised standards and technical specifications of products and services, Article 15 - Presumption of conformity • [10.8] CHAPTER V: Fundamental alteration of products or services and disproportionate burden to economic operators, Article 14 - Fundamental alteration and disproportionate burden
36. Πηγές [11] • WHOIS Accessible: “Largest Web Accessibility Lawsuits. ” • National Association of the Deaf (NAD): “ NAD Files Disability Civil Rights Lawsuit Against Netflix. ” • CNBC: “Supreme Court Declines to Hear Domino’s Website Accessibility Case.” • Accessi: “Famous Web Accessibility Lawsuits. ” • Level Access: “Title III Lawsuits: 10 Big Companies Sued Over Website Accessibility. ”
37. Πηγές [12] • HTML Living Standard: 4.11 Interactive elements, 4.11.1, “ the <details> element” • MDN Web Docs: “<details> The Details disclosure element ” • Scott O'Hara: “The details and summary elements ” • Adrian Roselli: “Details/Summary Are Not [insert control here] ” • Scott O'Hara: “The details and summary elements, again ” • Adrian Roselli: “Progressively Enhanced HTML Accordion ” [13] Smashing Magazine. “ Accessibility.” [14] de Vries, Hidde. Hidde.blog. [15] Roselli, Adrian. Adrian Roselli's Blog.
38. Πηγές [16] Adrian Roselli: Adrian Roselli's Blog. [17] Scott O'Hara: scottohara.me [18] Sara Soueidan: Sara Soueidan's Blog. [19] The A11Y Project. [20] Web Accessibility Initiative (WAI) [21] Mozilla Developer Network, MDN Web Docs: “Accessibility.” [22] Deque University: Deque University. [23] W3C Web Accessibility Initiative: “ ARIA Authoring Practices Guide (APG).” [24] Heydon Pickering: Heydonworks.com