Πρότυπο WCAG 2.0 και τρόποι συμμόρφωσης (Web Expert) - Δημήτριος Σελημίδης

Σκοπός της παρουσίασης είναι η επεξήγηση του προτύπου WCAG 2.0 και πως μπορούμε να κάνουμε μια ιστοσελίδα σε WordPress συμβατό με αυτό.

Transcript

1. ΠΡΟΤΥΠΟ WCAG 2.0 ΚΑΙ ΤΡΟΠΟΙ
   ΣΥΜΜΟΡΦΩΣΗΣ
   ΔΗΜΗΤΡΙΟΣ ΣΕΛΗΜΙΔΗΣ
   

   View Slide

2. #WCGR2021
   TOC TO TALK (WCAG 2.0)
   ▸ Βασικ
   έ
   ς Αρχ
   έ
   ς και Οδηγ
   ί
   ες
   
   
   ▸ Επίπεδα προσβασιμότητας
   

   (Α, ΑΑ, ΑΑΑ)
   
   
   ▸ Εργαλεία ελέγχου
   
   
   ▸ Συμμόρφωση ιστοσελίδας
   

   View Slide

3. TO WCAG 2.0 ΔΕΝ ΕΙΝΑΙ ΕΝΑ
   ΠΡΟΣΘΕΤΟ… ΕΙΝΑΙ ΦΙΛΟΣΟΦΙΑ
   #WCGR2021
   

   View Slide

4. #WCGR2021
   ▸ Μειωμ
   έ
   νη ακο
   ή
   και κ
   ώ
   φωση
   
   
   ▸ Μειωμ
   έ
   νη
   ό
   ραση και τ
   ύ
   φλωση
   
   
   ▸ Μαθησιακ
   έ
   ς δυσκολ
   ί
   ες
   
   
   ▸ Δυσκολ
   ί
   α στην ομιλ
   ί
   α
   
   
   ▸ Περιορισμ
   έ
   νη δυνατ
   ό
   τητα κ
   ί
   νησης
   
   
   ▸ Φωτοευαισθησ
   ί
   α
   ΠΡΟΣΒΑΣΙΜΟ ΠΕΡΙΕΧΟΜΕΝΟ ΣΕ
   

   View Slide

5. #WCGR2021
   ▸ Αντιληπτ
   ό
   
   ▸ 1.1 Εναλλακτικό κείμενο
   
   
   ▸ 1.2 Μ
   έ
   σα εξαρτ
   ώ
   μενα απ
   ό
   το χρ
   ό
   νο
   
   
   ▸ 1.3 Προσαρμόσιμο
   
   
   ▸ 1.4 Διακριτ
   ό
   ΒΑΣΙΚΕΣ ΑΡΧΕΣ
   

   View Slide

6. #WCGR2021
   ▸ Λειτουργικ
   ό
   
   
   ▸ 2.1 Προσβ
   ά
   σιμο μ
   έ
   σω πληκτρολογ
   ί
   ου
   
   
   ▸ 2.2 Επαρκ
   ή
   ς Χρ
   ό
   νος
   
   
   ▸ 2.3 Πρ
   ό
   ληψη κρ
   ί
   σεων επιληψ
   ί
   ας
   
   
   ▸ 2.4 Δυνατ
   ό
   τητα πλο
   ή
   γησης
   ΒΑΣΙΚΕΣ ΑΡΧΕΣ
   

   View Slide

7. #WCGR2021
   ▸ Κατανοητ
   ό
   
   ▸ 3.1 Ευαν
   ά
   γνωστο περιεχ
   ό
   μενο
   
   
   ▸ 3.2 Προβλ
   έ
   ψιμο περιεχ
   ό
   μενο
   
   
   ▸ 3.3 Βο
   ή
   θεια στην εισαγωγ
   ή
   δεδομ
   έ
   νων
   
   
   ▸ Ε
   ύ
   ρωστο
   
   
   ▸ 4.1 Συμβατ
   ό
   ΒΑΣΙΚΕΣ ΑΡΧΕΣ
   

   View Slide

8. #WCGR2021
   

   View Slide

9. #WCGR2021
   

   View Slide

10. #WCGR2021
    

    View Slide

11. #WCGR2021
    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0;
    over
    fl
    ow: hidden; clip: rect(0,0,0,0); white-space: nowrap; -webkit-clip-
    path: inset(50%); clip-path: inset(50%); border: 0; }
    

    View Slide

12. #WCGR2021
    

    View Slide

13. ΠΩΣ ΜΠΟΡΩ ΝΑ ΣΥΜΜΟΡΦΩΣΩ ΤΗΝ
    ΙΣΤΟΣΕΛΙΔΑ ΜΟΥ ΣΥΜΦΩΝΑ ΜΕ ΤΟ
    ΠΡΟΤΥΠΟ WCAG 2.0
    WordPress User
    #WCGR2021
    

    View Slide

14. #WCGR2021
    ▸ AChecker (EOL 30/04/2021)
    
    
    ▸ WAVE - https://wave.webaim.org
    
    
    ▸ axe DevTools - Browser Extension
    
    
    ▸ Firefox Accessibility Inspector
    
    
    ▸ Google Accessibility Developer Tools
    ΕΡΓΑΛΕΙΑ ΕΛΕΓΧΟΥ ΠΡΟΣΒΑΣΙΜΟΤΗΤΑΣ
    

    View Slide

15. #WCGR2021
    ▸ Bootstrap 5
    
    
    ▸ W3C HTML
    
    
    ▸ W3C CSS
    ΞΕΚΙΝΩΝΤΑΣ ΑΠΟ ΤΟ ΜΗΔΕΝ
    

    View Slide

16. #WCGR2021
    ▸ Δημιουργία child theme
    
    
    ▸ Τροποποίηση αρχείων
    
    
    ▸ Γνώσεις
    
    
    ▸ HTML
    
    
    ▸ CSS
    
    
    ▸ PHP
    ΕΠΙΛΕΓΟΝΤΑΣ ΕΤΟΙΜΑ ΘΕΜΑΤΑ
    

    View Slide

17. #WCGR2021
    ▸ Εικονίδια (i αντί span)
    
    
    ▸ Στοιχεία φόρμας χωρίς labels
    
    
    ▸ Εικόνες χωρίς alt
    
    
    ▸ Σύνδεσμοι χωρίς title
    
    
    ▸ Λάθος ιεραρχία επικεφαλίδων
    
    
    ▸ Κεφαλαία
    ΚΟΙΝΑ ΛΑΘΗ ΣΕ ΕΤΟΙΜΑ ΘΕΜΑΤΑ
    

    View Slide

18. #WCGR2021
    ▸ Κανένα
    ΠΡΟΣΘΕΤΑ ΠΟΥ 100% ΑΠΟΤΕΛΕΣΜΑΤΙΚΑ
    

    View Slide

19. ΠΕΡΙΜΕΝΩ ΤΑ ΣΧΟΛΙΑ
    ΣΑΣ...
    Δημήτριος Σελημίδης
    

    View Slide