Κάνοντας την ιστοσελίδα σας προσβάσιμη για άτομα με ειδικές ανάγκες

Προσέλκυσε περισσότερους αναγνώστες με έναν ιστότοπο που ταιριάζει στις ανάγκες όλων

Κάνοντας την ιστοσελίδα σας προσβάσιμη σε άτομα με αναπηρίες, καταλήγετε καθιστώντας προσιτή σε όλους. Στην πραγματικότητα, καθιστώντας την ιστοσελίδα σας πιο προσιτή μπορεί ακόμη και να βοηθήσει τους ανθρώπους να βρουν τον ιστοχώρο σας στις μηχανές αναζήτησης. Γιατί; Επειδή οι μηχανές αναζήτησης χρησιμοποιούν μερικά από τα ίδια σήματα που κάνουν οι αναγνώστες οθόνης για να βρουν και να κατανοήσουν το περιεχόμενο του ιστότοπού σας.

Αλλά πώς ακριβώς να φτιάξετε έναν προσιτό ιστότοπο χωρίς να γίνει εμπειρογνώμονας κωδικοποίησης;

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

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

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

Σχετική ανάγνωση: Τι είναι η βοηθητική τεχνολογία και πώς λειτουργεί;

Κατανόηση των αναγνωστών οθόνης

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

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

  1. Μεταβείτε στις Προτιμήσεις συστήματος.
  2. Επιλέξτε Προσβασιμότητα.
  3. Επιλέξτε VoiceOver.
  4. Επιλέξτε το πλαίσιο για το Enable VoiceOver.

Μπορείτε να την ενεργοποιήσετε και να την απενεργοποιήσετε χρησιμοποιώντας την εντολή-F5.

Εάν βρίσκεστε σε ένα μηχάνημα των Windows, μπορεί να θέλετε να κάνετε λήψη του NVDA. Μπορείτε να το ρυθμίσετε για να ενεργοποιήσετε και να απενεργοποιήσετε το χειριστήριο συντόμευσης + alt + n.

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

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

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

Μπορείτε να το διορθώσετε.

Alt-Ετικέτες ή Εναλλακτικό Χαρακτηριστικό

Το χαρακτηριστικό alt-tag ή εναλλακτική (alt) χρησιμοποιείται στην HTML για να περιγράψει μια εικόνα. Σε HTML, φαίνεται κάτι τέτοιο:

Ακόμη και αν δημιουργήσετε τον ιστότοπό σας με ένα οπτικό εργαλείο που αποκρύπτει τον κώδικα HTML, θα έχετε σχεδόν πάντα την ευκαιρία να εισαγάγετε μια περιγραφή εικόνας. Δεν μπορείτε να εισάγετε τίποτα (alt = "") αλλά θα ήταν καλύτερα να δώσετε σε κάθε εικόνα μια χρήσιμη περιγραφή. Εάν ήσασταν τυφλός, τι θα έπρεπε να ξέρετε για την εικόνα; "Γυναίκα" δεν είναι πολύ βοήθεια, αλλά ίσως "Γυναίκα σχεδίαση διάγραμμα ροής σχεδιασμού συμπεριλαμβανομένης της προσβασιμότητας, της χρηστικότητας, branding, και το σχεδιασμό."

Κείμενο κειμένου

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

Δώστε στην ιστοσελίδα σας καλή ιεραρχία πληροφοριών

Διαχωρίστε μεγάλα κομμάτια κειμένου με κεφαλίδες και, ει δυνατόν, χρησιμοποιήστε τις κεφαλίδες με την ιεραρχία H1, H2, H3 κατάλληλα. Όχι μόνο καθιστά την ιστοσελίδα σας ευκολότερη για αναγνώστες οθόνης, καθιστά ευκολότερο για όλους τους άλλους. Είναι επίσης ένα εξαιρετικό μήνυμα για την Google και άλλες μηχανές αναζήτησης που θα σας βοηθήσουν να κατατάξετε καλύτερα τον ιστότοπό σας.

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

Κάνετε καλύτερους πίνακες

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

Πλοήγηση πληκτρολογίου

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

Closed Captions

Εάν προσθέσετε βίντεο ή στοιχεία ήχου στον ιστότοπό σας, θα πρέπει να έχουν υπότιτλους. Το HTML5 και πολλές υπηρεσίες συνεχούς ροής βίντεο (όπως το YouTube) προσφέρουν υποστήριξη για την υποστήριξη υπότιτλων. Οι κλειστοί υπότιτλοι είναι χρήσιμοι όχι μόνο για την προσβασιμότητα αλλά και για τους χρήστες που ενδέχεται να περιηγούνται στον ιστότοπό σας κάπου όπου δεν μπορούν να παίξουν ήχο, όπως σε ένα γραφείο ή σε μια θορυβώδη τοποθεσία.

Για podcasts ή άλλα στοιχεία ήχου, εξετάστε το ενδεχόμενο παροχής αντιγράφου κειμένου. Όχι μόνο είναι χρήσιμο για άτομα που δεν μπορούν να ακούσουν τον ήχο, έχοντας το κείμενο, θα διευκολύνει το Google και άλλες μηχανές αναζήτησης να αναδείξουν αυτό το περιεχόμενο και να βοηθήσουν την κατάταξη της Google σας .

ΑΡΙΑ

Εάν θέλετε να μεταβείτε στο προχωρημένο επίπεδο προσβασιμότητας, οι προδιαγραφές HTML5 ARIA ή WAI-ARIA στοχεύουν να είναι το νέο πρότυπο προς τα εμπρός. Ωστόσο, αυτό είναι ένα πολύπλοκο (και εξελισσόμενο) τεχνικό εγχειρίδιο, οπότε αυτό που θα μπορούσατε να κάνετε είναι να χρησιμοποιήσετε έναν έλεγχο ARIA για να σαρώσετε για να δείτε εάν ο ιστότοπός σας έχει προβλήματα που μπορείτε να αντιμετωπίσετε. Το Mozilla έχει επίσης έναν πιο προσιτό οδηγό για να ξεκινήσετε με την ARIA.