4 κοινά ζητήματα προσβασιμότητας στον Παγκόσμιο Ιστό που πρέπει να γνωρίζετε

Θέμα αναλογίας αντίθεσης

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

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

Ας πούμε ότι το πρασινωπό χρώμα αρέσει πολύ στον πελάτη σας και το βρίσκει φοβερό, αλλά υπάρχει ένα πρόβλημα με την αντίθεση. Έχουμε ένα #FFFFFF φόντο με ένα #83A94C το χρώμα του κειμένου με αποτέλεσμα να προκύπτει λόγος αντίθεσης 2,71:1, ο οποίος είναι πολύ κάτω από το ελάχιστο 4.5:1 χρειάζεται. Για τον εντοπισμό αυτού του ζητήματος έχουμε πολλαπλές λύσεις:

1. Χρησιμοποιήστε έναν διαδικτυακό ελεγκτή αντίθεσης όπως το Webaim Contrast Checker, το οποίο θα υπολογίσει τον λόγο αντίθεσης και θα σας δώσει ένα Πέρασμα ή Αποτυχία βαθμός.
2. Χρησιμοποιήστε μία από τις πολλές επεκτάσεις ελέγχου αντίθεσης του προγράμματος περιήγησης, π.χ: Ελεγκτής αντίθεσης χρώματος WCAG.
3. Δοκιμάστε τον ενσωματωμένο ελεγκτή αντίθεσης του προγράμματος περιήγησης. Για να το χρησιμοποιήσετε στο Google Chrome, ανοίξτε τα εργαλεία dev, επιθεωρήστε το στοχευμένο στοιχείο (π.χ.: σύνδεσμος Home της γραμμής πλοήγησης), μεταβείτε στην ιδιότητα χρώματος CSS και κάντε κλικ στο ορθογώνιο χρώμα για να ανοίξετε τον επιλογέα χρωμάτων, στο κάτω μέρος θα σας παρουσιαστεί μια τιμή αναλογίας αντίθεσης, επεκτείνετε την για περισσότερες λεπτομέρειες. Η διαδικασία είναι ακριβώς η ίδια για τον Firefox, απλώς μια μικρή διαφορά στην αναλογία εμφανίζεται στο κάτω αριστερό μέρος του επιλογέα χρωμάτων.

Για να πάρετε περισσότερες λεπτομέρειες σχετικά με την αντίθεση ελέγξτε αυτό Αντίθεση και χρωματική προσβασιμότητα Άρθρο.

Θέμα κειμένου συνδέσμου

Οι σύνδεσμοι αποτελούν ένα μεγάλο μέρος του διαδικτύου στις μέρες μας, οπότε η προσβασιμότητά τους είναι πολύ σημαντική. Ένας σύνδεσμος πρέπει να βγάζει νόημα και να ενημερώνει τον χρήστη για το περιεχόμενό του, οπότε ένας μη ενημερωτικός σύνδεσμος με κείμενο όπως διαβάστε περισσότερα, κάντε κλικ εδώ, ελέγξτε λεπτομέρειες δεν είναι πολύ χρήσιμος, οπότε αντί να προσθέσετε "ελέγξτε λεπτομέρειες" για προϊόν λεπτομέρειες, για παράδειγμα, η χρήση της ονομασίας του προϊόντος όπως "The Mandalorian Helmet" είναι καλύτερη και πιο κατατοπιστική. Λέξεις όπως κάντε κλικ εδώ ή περισσότερα για μπορεί να παραλειφθεί επειδή ένας σύνδεσμος είναι εξ ορισμού διαθέσιμος για κλικ και κάτι όπως "περισσότερα για τις σημερινές ειδήσεις" μπορεί να συντομευτεί σε "σημερινές ειδήσεις". Δεν υπάρχει ειδικός κανόνας ή όριο σχετικά με το μήκος του συνδέσμου, το Ο σύνδεσμος πρέπει να είναι αναγνώσιμος και αρκετά μεγάλη ώστε να περιγράφεται καλά ο σκοπός του.

Οι εικόνες ως σύνδεσμοι είναι ένα ευρέως χρησιμοποιούμενο μοτίβο, οπότε πρέπει να ακολουθούν τους ίδιους κανόνες για τους οποίους μιλήσαμε παραπάνω. Το χαρακτηριστικό alt της εικόνας θα παίξει το ρόλο του κειμένου συνδέσμου και θα ανακοινώνεται από τα προγράμματα ανάγνωσης οθόνης. Υπάρχουν πολλαπλά σενάρια περιπτώσεων όταν αντιμετωπίζουμε τις εικόνες ως συνδέσμους, αν η εικόνα είναι το μοναδικό περιεχόμενο του συνδέσμου, τότε πρέπει να έχει ένα χαρακτηριστικό alt, αν ο σύνδεσμος έχει κάποιο κείμενο και εικόνα σε αυτόν τότε μπορούμε να παραλείψουμε το χαρακτηριστικό alt, εδώ είναι μερικά παραδείγματα:

<a href="/el/notifications/">
  <img src="/img/notification.png" alt="Ειδοποιήσεις">
</a>

Δείτε μερικούς συνδέσμους εδώ για να διαβάσετε σχετικά με την προσβασιμότητα των συνδέσμων:Κείμενο συνδέσμου και εμφάνιση, Λειτουργικές εικόνες.

Λείπει μια ετικέτα στην είσοδο φόρμας

Όλοι έχουμε ξαναδεί αυτές τις εισόδους φόρμας χωρίς ετικέτα και μόνο με ένα εικονίδιο για να περιγράψει το σκοπό της εισόδου. Μια πρώτη σημείωση είναι ότι μόλις ο χρήστης συμπληρώσει όλες τις εισόδους και τα placeholders δεν θα είναι πλέον ορατά δεν θα έχουμε κανένα οπτικό πλαίσιο σχετικά με τον σκοπό των εισόδων αλλά ας επικεντρωθούμε στην προσβασιμότητα εδώ.

Συσχέτιση ενός ετικέτα σε μια είσοδο μας δίνει δύο σημαντικά πλεονεκτήματα: ένας αναγνώστης οθόνης θα διαβάζει την ετικέτα όταν ο χρήστης εστιάζει στην είσοδο της φόρμας και όταν μια ετικέτα πατηθεί ή αγγιχτεί/πατηθεί, το πρόγραμμα περιήγησης μεταφέρει την εστίαση στη σχετική είσοδο. Μια εύκολη λύση για αυτού του είδους τις καταστάσεις είναι να προσθέσετε απλά ετικέτες ως εξής:

    Όνομα

    
  

    Επώνυμο

    
  

    Ηλεκτρονικό ταχυδρομείο

    
  

    Υποβολή
  

```

Αυτό είναι όλο, όλες οι είσοδοι έχουν τις σχετικές ετικέτες που τις καθιστούν προσιτές σε όλους. Μπορούμε ακόμη και να αφαιρέσουμε τα placeholders για να αποφύγουμε την επανάληψη του σκοπού της εισόδου, αλλά όλοι γνωρίζουμε ότι τα σενάρια του πραγματικού κόσμου δεν είναι τόσο εύκολο να αντιμετωπιστούν, έχετε μόλις λάβει ένα σχέδιο που έχει αυτές τις εισόδους φόρμας χωρίς ετικέτες και ο πελάτης δεν θέλει να αλλάξει αυτό το μέρος. Η πρώτη λύση που σας έρχεται στο μυαλό είναι να εφαρμόσετε ένα display: none, ή ορατότητα: hidden, στις ετικέτες μας, αυτό θα τις αποκρύψει, αλλά εξακολουθούν να υπάρχουν, σωστά; Αυτές οι ιδιότητες αποκρύπτουν στοιχεία όχι μόνο στην οθόνη, αλλά και για τους χρήστες που διαβάζουν οθόνη, οπότε αυτό δεν θα λύσει το πρόβλημά μας.

Μπορούμε να χρησιμοποιήσουμε το μοτίβο κλιπ για να το λύσουμε αυτό. Με αυτόν τον τρόπο, θα αποκρύψουμε το περιεχόμενο οπτικά, αλλά θα παρέχουμε το περιεχόμενο στους αναγνώστες οθόνης. Θα δημιουργήσουμε την ακόλουθη CSS sr-only και να την εφαρμόσουμε σε όλες τις ετικέτες μας:

 .sr-only:not(:focus):not(:active) {
   clip: rect(0 0 0 0 0),
   clip-path: inset(50%),
   height: 1px,
   overflow: hidden,
   position: absolute,
   white-space: nowrap,
   width: 1px,
 }

Αυτό θα αποκρύψει τις ετικέτες μας, θα τις καταστήσει διαθέσιμες για αναγνώστες οθόνης και θα ταιριάζει με το σχεδιασμό μας. Το :not(:focus):not(:active) ψευδο-κλάση αποτρέπει τα στοιχεία που μπορούν να εστιάσουν, όπως τα a, κουμπί, είσοδος από το να αποκρύπτεται όταν λαμβάνει εστίαση.

Δεν υπάρχει ένδειξη εστίασης

Μια φορά κι έναν καιρό το έκανα αυτό στο παγκόσμιο φύλλο στυλ CSS μου:

* {
outline: none; /* φρικτό λάθος */
}

Γύρω από το 2020 παρατήρησα μαύρα σύνορα που εμφανίζονται στις εισόδους της φόρμας του Google Chrome όταν εστιάζουν ή στα κουμπιά όταν μπαίνουν σε καρτέλα - αυτό ήταν πραγματικά περίεργο καθώς δεν το καταλάβαινα εκείνη τη στιγμή, μετά από κάποια έρευνα ανακάλυψα ότι οφείλεται στην ιδιότητα περιγράμματος CSS, οπότε η αφαίρεση έλυσε αυτό το "πρόβλημα" για μένα.

Εκείνη την εποχή δεν είχα ιδέα ποιος ήταν ο σωστός τρόπος για να το κάνω. Αφού έκανα κάποια έρευνα σχετικά με τα γιατί και τα πώς αυτής της νέας προεπιλογής, ανακάλυψα ότι το περίγραμμα είναι ένας δείκτης εστίασης στοιχείου και αν αφαιρεθεί πρέπει να παρέχεται ένα προφανές στυλ εστίασης, βασικά αυτό που έκανα θεωρείται κακή πρακτική. Μπορείτε να προσαρμόσετε τους δείκτες εστίασης όπως νομίζετε, αλλά η πλήρης αφαίρεσή τους από τον ιστότοπο αποτελεί μεγάλο ζήτημα προσβασιμότητας. Η προσαρμογή του στυλ εστίασης ενός στοιχείου είναι αρκετά εύκολη, για παράδειγμα:

 a:focus {
   outline: 4px solid #ee7834,
   outline-offset: 4px,
 }

Εργαλεία προσβασιμότητας

Ο έλεγχος όλων των θεμάτων για τα οποία μιλήσαμε μπορεί να είναι πολλή δουλειά, ειδικά γνωρίζοντας ότι υπάρχουν πολλά περισσότερα πράγματα που πρέπει να καλύψουμε σχετικά με την προσβασιμότητα, οπότε για να μας βοηθήσουμε να ασχοληθούμε με την προσβασιμότητα έχουμε 2 εξαιρετικές επεκτάσεις του προγράμματος περιήγησης.

Εργαλείο αξιολόγησης WAVE είναι μια σουίτα εργαλείων αξιολόγησης που μας βοηθάει να κάνουμε το διαδικτυακό μας περιεχόμενο πιο προσβάσιμο. Είναι διαθέσιμο τόσο στο Google Chrome όσο και στον Firefox.

Ας το δοκιμάσουμε σε μια μικρή ιστοσελίδα που περιέχει μια γραμμή πλοήγησης και μια είσοδο που της λείπει μια ετικέτα και ας δούμε τι επιστρέφει, μετά την εγκατάσταση της επέκτασης, αρκεί να κάνουμε κλικ στο εικονίδιο της επέκτασης για να τη χρησιμοποιήσουμε.

Η καρτέλα Σύνοψη εμφανίζει 1 σφάλμα (στοιχείο φόρμας από το οποίο λείπει ετικέτα), 2 σφάλματα αντίθεσης και 1 ειδοποίηση (λείπει δομή επικεφαλίδας), όπως μπορείτε να δείτε, το αποτέλεσμα είναι πολύ σαφές και λεπτομερές. Η καρτέλα Λεπτομέρειες θα αποδώσει μια λίστα με όλα τα σφάλματα, τις ειδοποιήσεις και τα χαρακτηριστικά. Μπορούμε επίσης να αλληλεπιδράσουμε απευθείας στη σελίδα κάνοντας κλικ σε αυτά τα κόκκινα ορθογώνια για να ελέγξουμε την περιγραφή και τον τύπο του σφάλματος.

Axe DevTools είναι μια ισχυρή και ακριβής εργαλειοθήκη προσβασιμότητας. Είναι διαθέσιμο τόσο στον Google Chrome όσο και στον Firefox. Αφού εγκαταστήσουμε την επέκταση, θα πρέπει να ανοίξουμε τα εργαλεία ανάπτυξης του προγράμματος περιήγησης και να μεταβούμε στην καρτέλα axe DevTools και να κάνουμε κλικ στην επιλογή Scan all of my pages (Σάρωση όλων των σελίδων μου).

Μπορείτε να δείτε ότι το Axe DevTools ανέφερε τα ίδια ζητήματα με το εργαλείο αξιολόγησης WAVE, τα οποία είναι ζητήματα αντίθεσης, το στοιχείο φόρμας που δεν έχει ετικέτα και το στοιχείο επικεφαλίδας που λείπει, και μας έδωσε ακόμη και μερικές βέλτιστες πρακτικές για να ακολουθήσουμε.

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

• NVDA
• VoiceOver είναι διαθέσιμο σε συσκευές macOs.
• Orca είναι ένα δωρεάν πρόγραμμα ανάγνωσης οθόνης ανοικτού κώδικα για linux.

Περίληψη

Είδαμε σε αυτό το άρθρο μερικά κοινά προβλήματα προσβασιμότητας στον ιστό, τρόπους επίλυσής τους και μερικά εξαιρετικά εργαλεία για τον έλεγχο της προσβασιμότητας στον ιστό. Υπάρχουν ακόμα πολλά περισσότερα να καλύψουμε σχετικά με την προσβασιμότητα για στοιχεία όπως τα Dialogs, τα Accordions και τα Carousels, αλλά όπως είδατε σε αυτό το άρθρο υπάρχει άφθονη τεκμηρίωση και εργαλεία που σας βοηθούν να ασχοληθείτε με την προσβασιμότητα.

Μερικά βασικά σημεία που πρέπει να θυμάστε:

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