Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

WordPress Greek Community

April 17, 2021
Tweet

More Decks by WordPress Greek Community

Other Decks in Programming

Transcript

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

  2. #WCGR2021 TOC TO TALK (WCAG 2.0) ▸ Βασικ έ ς

    Αρχ έ ς και Οδηγ ί ες ▸ Επίπεδα προσβασιμότητας 
 (Α, ΑΑ, ΑΑΑ) ▸ Εργαλεία ελέγχου ▸ Συμμόρφωση ιστοσελίδας
  3. TO WCAG 2.0 ΔΕΝ ΕΙΝΑΙ ΕΝΑ ΠΡΟΣΘΕΤΟ… ΕΙΝΑΙ ΦΙΛΟΣΟΦΙΑ #WCGR2021

  4. #WCGR2021 ▸ Μειωμ έ νη ακο ή και κ ώ

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

    Μ έ σα εξαρτ ώ μενα απ ό το χρ ό νο ▸ 1.3 Προσαρμόσιμο ▸ 1.4 Διακριτ ό ΒΑΣΙΚΕΣ ΑΡΧΕΣ
  6. #WCGR2021 ▸ Λειτουργικ ό ▸ 2.1 Προσβ ά σιμο μ

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

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

  9. #WCGR2021

  10. #WCGR2021

  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; }
  12. #WCGR2021

  13. ΠΩΣ ΜΠΟΡΩ ΝΑ ΣΥΜΜΟΡΦΩΣΩ ΤΗΝ ΙΣΤΟΣΕΛΙΔΑ ΜΟΥ ΣΥΜΦΩΝΑ ΜΕ ΤΟ

    ΠΡΟΤΥΠΟ WCAG 2.0 WordPress User #WCGR2021
  14. #WCGR2021 ▸ AChecker (EOL 30/04/2021) ▸ WAVE - https://wave.webaim.org ▸

    axe DevTools - Browser Extension ▸ Firefox Accessibility Inspector ▸ Google Accessibility Developer Tools ΕΡΓΑΛΕΙΑ ΕΛΕΓΧΟΥ ΠΡΟΣΒΑΣΙΜΟΤΗΤΑΣ
  15. #WCGR2021 ▸ Bootstrap 5 ▸ W3C HTML ▸ W3C CSS

    ΞΕΚΙΝΩΝΤΑΣ ΑΠΟ ΤΟ ΜΗΔΕΝ
  16. #WCGR2021 ▸ Δημιουργία child theme ▸ Τροποποίηση αρχείων ▸ Γνώσεις

    ▸ HTML ▸ CSS ▸ PHP ΕΠΙΛΕΓΟΝΤΑΣ ΕΤΟΙΜΑ ΘΕΜΑΤΑ
  17. #WCGR2021 ▸ Εικονίδια (i αντί span) ▸ Στοιχεία φόρμας χωρίς

    labels ▸ Εικόνες χωρίς alt ▸ Σύνδεσμοι χωρίς title ▸ Λάθος ιεραρχία επικεφαλίδων ▸ Κεφαλαία ΚΟΙΝΑ ΛΑΘΗ ΣΕ ΕΤΟΙΜΑ ΘΕΜΑΤΑ
  18. #WCGR2021 ▸ Κανένα ΠΡΟΣΘΕΤΑ ΠΟΥ 100% ΑΠΟΤΕΛΕΣΜΑΤΙΚΑ

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