Ποια είναι η διαφορά μεταξύ σημασιολογίας και…

Η σημασιολογία βοηθά τα μηχανήματα (προγράμματα περιήγησης, αναλυτές, ρομπότ αναζήτησης) να κατανοήσουν τη δομή και το νόημα του περιεχομένου. Η προσβασιμότητα (a11y) στοχεύει στο να είναι το περιεχόμενο κατανοητό και χρήσιμο για άτομα με διάφορους φυσικούς ή γνωστικούς περιορισμούς που χρησιμοποιούν τεχνολογίες υποστήριξης.

Σημασιολογικές ετικέτες

Η χρήση σημασιολογικών ετικετών HTML, όπως <article>, <nav>, <aside>, <footer>, <h1>-<h6>, δίνει στα στοιχεία της σελίδας μια σημασία. Για παράδειγμα:

<article>
  <h2>Τίτλος άρθρου</h2>
  <p>Κείμενο άρθρου...</p>
</article>

Αυτό βοηθά τους περιηγητές να ερμηνεύσουν σωστά τη δομή του εγγράφου.

Προσβασιμότητα (a11y)

Η προσβασιμότητα καλύπτει πολλούς τομείς:

Σημασιολογία: Η σωστή χρήση σημασιολογικών ετικετών αποτελεί ήδη μέρος της προσβασιμότητας, καθώς βοηθά τις τεχνολογίες υποστήριξης (οδηγούς οθόνης) να κατανοήσουν τη δομή και τη λειτουργία των στοιχείων.
Ατрибουτα ARIA: Πρόσθετα χαρακτηριστικά, όπως aria-label, aria-describedby, aria-hidden, role, παρέχουν επιπλέον πληροφορίες στις τεχνολογίες υποστήριξης όταν η HTML σημασιολογία δεν είναι επαρκής.
```
<button aria-label="Κλείσιμο διαλόγου">
  <img src="close.svg" alt="">
</button>
```
Αντίθεση: Αρκετή αντίθεση μεταξύ κειμένου και φόντου για άτομα με οπτικές διαταραχές.
Πλοήγηση με πληκτρολόγιο: Δυνατότητα πλοήγησης στη σελίδα και αλληλεπίδρασης με τα στοιχεία χρησιμοποιώντας μόνο το πληκτρολόγιο.
Εναλλακτικό κείμενο για εικόνες (alt): Περιγραφή του περιεχομένου της εικόνας για χρήστες που δεν μπορούν να τη δουν.
```
<img src="cat.jpg" alt="Μαύρη γάτα κοιμάται στο περβάζι.">
```
Δομή επικεφαλίδων: Λογική ιεραρχία επικεφαλίδων (<h1> - <h6>) για εύκολη πλοήγηση με οδηγούς οθόνης.

Σχέση

Η σημασιολογία αποτελεί σημαντική βάση για την προσβασιμότητα. Μια καλά δομημένη σελίδα με σημασιολογικά στοιχεία είναι πολύ πιο εύκολο να καταστεί προσβάσιμη. Ωστόσο, η σημασιολογία από μόνη της δεν αρκεί – συχνά απαιτούνται πρόσθετα μέτρα, όπως χαρακτηριστικά ARIA, διαχείριση εστίασης και διασφάλιση επαρκούς αντίθεσης.

Ποια είναι η διαφορά μεταξύ σημασιολογίας και προσβασιμότητας (a11y);