Προσβασιμότητα στο Web�HTML για όλους

Ερώτηση

👉 Μπορείς να χρησιμοποιήσεις το Internet χωρίς να βλέπεις την οθόνη;

​

• Υπάρχουν χρήστες που:

​

• δεν βλέπουν (τυφλοί)
• δεν χρησιμοποιούν ποντίκι
• έχουν δυσκολίες όρασης ή κίνησης

​

​

Το διαδίκτυο πρέπει να δουλεύει για όλους

​

Πώς χρησιμοποιούν το internet oι άνθρωποι με προβλήματα όρασης;�

• Με screen reader (Αναγνώστη Οθόνης)
• Διαβάζει την σελίδα
• Μετατρέπει το περιεχόμενο σε ήχο
• Παραδείγματα για υπολογιστές:
• NVDA
• JAWS
• Για κινητά
• VoiceOver (iOS): 
• TalkBack (Android): 

​

Προεγκατεστημένα: Αυτά τα εργαλεία είναι ενσωματωμένα, που σημαίνει ότι δεν χρειάζεται να τα κατεβάσετε, αλλά πρέπει να τα ενεργοποιήσετε στις ρυθμίσεις προσβασιμότητας.

​

Προσπάθησε να:

• Μπεις σε μια ιστοσελίδα και να πατήσεις ένα link με το πληκτρολόγιο
• καταλάβεις τι έχει η σελίδα

❓ Τι ένιωσες;

​

Τι είναι προσβασιμότητα;

Accessibility = σχεδιάζω για όλους

Όχι μόνο για:

• όραση
• αλλά και ήχο, πληκτρολόγιο, κατανόηση

​

Σημασιολογική HTML

• Η Σημασιολογική HTML (Semantic HTML) είναι η πρακτική χρήσης στοιχείων HTML που περιγράφουν το νόημα του περιεχομένου τους, αντί απλώς την εμφάνισή τους

Βασικά Χαρακτηριστικά Σημασιολογικής HTML:

• Νόημα > Εμφάνιση: Χρησιμοποιεί tags που εξηγούν τι είναι το περιεχόμενο (π.χ. <article>, <nav>, <header>).
• Προσβασιμότητα (Accessibility): Βοηθά τις συσκευές ανάγνωσης οθόνης (screen readers) να πλοηγούνται καλύτερα στη σελίδα.
• SEO: Οι μηχανές αναζήτησης όπως η Google κατανοούν καλύτερα τη δομή και τις σημαντικές πληροφορίες, βελτιώνοντας την κατάταξη.
• Καθαρός Κώδικας: Μειώνει την ανάγκη για υπερβολικά <div> και <span> με κλάσεις, κάνοντας τον κώδικα πιο ευανάγνωστο.

Σημασιολογικές vs Μη Σημασιολογικές Ετικέτες:�

Σημασιολογικές vs Μη Σημασιολογικές Ετικέτες (παραδείγματα):

• Σημασιολογικές: <strong> (τόνωση), <em> (έμφαση), <button>.

​

• Μη Σημασιολογικές: <b> (έντονα), <i> (πλάγια), <div>, <span> (χρησιμοποιούνται μόνο για στυλ)

Web Content Accessibility Guidelines (WCAG)— Κανόνες Προσβασιμότητας

1️⃣ Αντιληπτό (Perceivable)

👉 Το περιεχόμενο πρέπει να φαίνεται ή να ακούγεται�✔ alt text σε εικόνες

�

2️⃣ Λειτουργικό (Operable)

👉 Να δουλεύει με πληκτρολόγιο�✔ χρήση TAB

�

3️⃣ Κατανοητό (Understandable)

👉 Να είναι απλό και σαφές�✔ σωστά labels, ξεκάθαρα links

�

4️⃣ Ανθεκτικό (Robust)

👉 Να δουλεύει σε διαφορετικά εργαλεία�✔ screen readers, browsers

​

WCAG Conformance Levels

• Level A: Minimum level of accessibility.
• Level AA: Recommended for most websites, meeting common accessibility needs.
• Level AAA: Highest level of accessibility. 

​

• παραδείγματα

Συμπέρασμα

• Πρέπει να διασφαλίζετε πάντα ότι ένας χρήστης με προβλήματα όρασης λαμβάνει ακριβώς τις ίδιες πληροφορίες που είναι διαθέσιμες οπτικά, προσθέτοντας σαφές, περιγραφικό κείμενο για κάθε οπτικό στοιχείο.

​

👉 Μπορείς να διαβάσεις αυτό το κείμενο;�

• ανοιχτό γκρι σε άσπρο (κακό)
• μαύρο σε άσπρο (καλό)
• Ανοιχτό πράσινο σε κίτρινο

​

Ποιο είναι πιο εύκολο; Γιατί;

Πήγαινε στην ιστοσελίδα: https://webaim.org/resources/contrastchecker/ ή

https://contrast-ratio.org/

Πειραματίσου με τα χρώματα για να δεις τι περνάει και τι όχι!

​

Άσκηση: Αυτό το site φαίνεται σωστό… αλλά είναι χαλασμένο. Βρείτε γιατί�Γράψτε τον παρακάτω «κακό» κώδικα ιστοσελίδας και δείτε τι συμβαίνει. Προσπαθήστε να περιηγηθείς με το πλήκτρο Tab

Λύση