Οι ιστότοποι πρέπει να είναι προσβάσιμοι σε όλους. Εδώ είναι τι πρέπει να ξέρετε.
Η δημιουργία μιας ιστοσελίδας δεν είναι απλώς η δημιουργία μιας ιστοσελίδας. Μια σημαντική πτυχή της ανάπτυξης του front-end είναι η διασφάλιση ότι οι διεπαφές χρήστη είναι προσβάσιμες σε όλους στο διαδίκτυο, συμπεριλαμβανομένων των ατόμων με οπτική και ακουστική αναπηρία. Πρέπει να γράψετε τον κωδικό σας έχοντας αυτά τα άτομα στο μυαλό. Πώς δίνετε σε άτομα με προβλήματα όρασης ίση πρόσβαση στον ιστότοπό σας με άτομα που δεν αντιμετωπίζουν οπτικά προβλήματα; Διαβάστε αυτό το άρθρο για να μάθετε.
Γιατί πρέπει οι προγραμματιστές να ανησυχούν για την προσβασιμότητα στον Ιστό;
Η προσβασιμότητα στον Ιστό περιστρέφεται γύρω από την ιδέα ότι όλοι πρέπει να έχουν ίση πρόσβαση στον Ιστό, ανεξάρτητα από οποιαδήποτε αναπηρία ή αναπηρία. Η ύπαρξη ενός προσβάσιμου ιστότοπου διευκολύνει την προσέγγιση μεγαλύτερου κοινού (περίπου το 16% του κόσμου πάσχει από τη μία ή την άλλη αναπηρία).
Η ψηφιακή προσβασιμότητα δεν θα πρέπει να αποτελεί επιλογή
για προγραμματιστές. Είναι απαραίτητο για κάθε επαγγελματική μάρκα. Αυτό λαμβάνεται σοβαρά υπόψη: όπως αναφέρεται από Ποικιλία, κάποιος μήνυσε την εταιρεία Pokémon το 2019 λόγω μη προσβάσιμου ιστότοπου.Προσβασιμότητα Ιστού με HTML
Στην HTML, υπάρχουν κανόνες που διασφαλίζουν την ανάπτυξη προσβάσιμων ιστότοπων. Αυτή η ενότητα θα εξηγήσει μερικούς από αυτούς τους κανόνες.
Χρησιμοποιήστε Σημασιολογικά Στοιχεία
Τα σημασιολογικά στοιχεία στην HTML είναι στοιχεία που έχουν νόημα. Στην HTML5, υπάρχουν περίπου 100 στοιχεία. Ορισμένα στοιχεία, όπως π.χ και, είναι μη σημασιολογικά, ενώ άλλες ετικέτες HTML είναι σημασιολογικές. Αν και μπορεί να είναι αδύνατο να σταματήσετε να χρησιμοποιείτε αυτά τα μη σημασιολογικά στοιχεία, είναι σημαντικό να ενσωματώσετε όσα περισσότερα σημασιολογικά στοιχεία μπορείτε στην εργασία σας. Ακολουθεί μια λίστα με δημοφιλή σημασιολογικά στοιχεία:
Εξετάστε αυτό το παράδειγμα από το Taaskly:
Μια ματιά στην παραπάνω εικόνα θα αποκαλύψει τα ακόλουθα στοιχεία:
- Μια επικεφαλίδα
- Μια εικόνα
- Μία παράγραφος
- Τρία κουμπιά
Είναι εύκολο να υποθέσουμε ότι οι προγραμματιστές χρησιμοποίησαν ετικέτες για να τακτοποιήσετε τα στοιχεία στην οθόνη. Με μια πιο προσεκτική ματιά στους κωδικούς, θα παρατηρήσετε ότι αντ' αυτού χρησιμοποιούσαν έξι σημασιολογικές ετικέτες. Ο απλοποιημένος κώδικας μοιάζει με αυτό:
<Ενότητα>
<imgsrc="/hero.png"alt="ήρωας">
<άρθρο>
<h1>Βρείτε τα σωστά Προϊόντα και Υπηρεσίες την κατάλληλη στιγμή.h1>
<Π>
Χειροποίητα υποδήματα, ανανέωση μαλλιών, μάνατζερ μέσων κοινωνικής δικτύωσης, αποστολή, πηγή εισοδήματοςσι>— πείτε το, ο Taaskly το κατάλαβε. Βρείτε κάθε προϊόν ή υπηρεσία που χρειάζεστε σήμερα όταν εγγραφείτε και χρησιμοποιείτε το Taaskly.
Π>
<έναhref="/main/home">Εξωτερική ανάθεση εργασίαςένα>
<έναhref="/κύρια/υπηρεσίες"> Βρείτε μια υπηρεσίαένα>
<έναhref="/main/marketplace" >Βρείτε ένα κατάστημαένα>
άρθρο>
Ενότητα>
Από το απόσπασμα HTML, μπορείτε να παρατηρήσετε τα εξής:
- Οι εικόνες, το κείμενο και τα κουμπιά βρίσκονται μέσα στο α στοιχείο.
- ο στοιχείο διαιρεί εξίσου το
και στοιχεία.
- ο στοιχείο κρατά το, , και στοιχεία.
- Τα κουμπιά κωδικοποιούνται ως στοιχεία; Ως εκ τούτου, είναι σύνδεσμοι, όχι κουμπιά. Κατά γενικό κανόνα, χρησιμοποιείτε πάντα συνδέσμους για να κατευθύνετε τον χρήστη σε άλλη σελίδα ή προβολή και χρησιμοποιείτε κουμπιά όταν θέλετε μόνο ο χρήστης να εκτελέσει μια ενέργεια στην ίδια προβολή. Βλέπω Σελίδα Angular's Button για περισσότερες πληροφορίες σχετικά με αυτό.
Χρησιμοποιήστε ορόσημα για να παρέχετε μια καθαρή δομή σελίδας
Τα ορόσημα είναι σημασιολογικές ετικέτες που βοηθούν τους τυφλούς χρήστες να πλοηγηθούν σε μια ιστοσελίδα με προγράμματα ανάγνωσης οθόνης. Με τα ορόσημα, είναι εύκολο να ορίσετε διαφορετικά μέρη μιας ιστοσελίδας. ιστοσελίδα της Apple χρησιμοποιεί Landmarks.
Η παραπάνω εικόνα δείχνει τέσσερα διαφορετικά ορόσημα. Μπορείτε να χρησιμοποιήσετε το Προσβασιμότητα Insights επέκταση για την οπτικοποίηση αυτών των ορόσημων.
Στην εικόνα, μπορούμε να συμπεράνουμε α στην κορυφή, α που περιέχει α, και ένα στοιχείο. Αξίζει να σημειωθεί ότι η εικόνα δείχνει "πλοήγηση", "περιοχή", και “πληροφορίες περιεχομένου”. Αυτοί είναι γνωστοί ως ρόλοι, τους οποίους θα δούμε αργότερα.
Κάθε φορά που πρέπει να χρησιμοποιήσετε πολλά ορόσημα για μια σελίδα, να τα διαφοροποιείτε πάντα με μια ετικέτα. Για παράδειγμα, εάν χρησιμοποιείτε πολλά στοιχεία όπως έχει η Apple, πρέπει να τα χαρακτηρίσετε. Θα πρέπει να τους επισημάνετε με το άρια-ετικέτα Χαρακτηριστικό. Έτσι, μπορείτε να γράψετε κάτι σαν οποιοδήποτε από αυτά:
<navάρια-ετικέτα = "παγκόσμια">
<navάρια-ετικέτα = "τοπική πλοήγηση">
<navάρια-ετικέτα = "κατάλογος της Apple">
Η χρήση ετικετών μπορεί να βοηθήσει τους αναγνώστες οθόνης να μεταβούν σε οποιαδήποτε πλοήγηση.
Χρησιμοποιήστε τα χαρακτηριστικά ρόλου, ονόματος και τιμής
Μερικές φορές, μπορεί να είναι αδύνατο να χρησιμοποιηθούν στοιχεία HTML με ενσωματωμένες δυνατότητες προσβασιμότητας. Τέτοιες περιπτώσεις μπορεί να είναι μία από τις δύο:
- Δεν υπάρχει εγγενές στοιχείο HTML για αυτό που θέλετε να επιτύχετε. Για παράδειγμα, εάν πρέπει να χρησιμοποιήσετε α γιατί κανένα άλλο στοιχείο δεν φαίνεται να ταιριάζει στον ρόλο.
- Δεν μπορείτε να χρησιμοποιήσετε σημασιολογικά στοιχεία λόγω τεχνικών προβλημάτων. Εάν χρησιμοποιείτε ένα πλαίσιο που χρησιμοποιεί όταν θα ήταν καλύτερο να το χρησιμοποιήσετε, θα είναι καθήκον σας να ορίσετε έναν προσαρμοσμένο έλεγχο.
Για να ορίσετε ένα προσαρμοσμένο στοιχείο ελέγχου, χρειάζεστε έναν ρόλο, ένα όνομα και μια τιμή (μερικές φορές) για το στοιχείο σας.
Ρόλος
Από προεπιλογή, α στοιχείο έχει το ρόλο πλοήγησης, ενώ α στοιχείο έχει τον ρόλο banner. Θα πρέπει να χρησιμοποιείτε αυτά τα στοιχεία μόνο για τους σκοπούς που προορίζονται για να βοηθήσετε τις υποστηρικτικές τεχνολογίες να κατανοήσουν τη δομή μιας ιστοσελίδας. Εάν πρέπει να χρησιμοποιήσετε το ένα στη θέση του άλλου, θα πρέπει να καθορίσετε τον ρόλο ως εξής:
<επί κεφαλήςρόλος = "πλοήγηση">
<navρόλος = "πανό">
<divρόλος = "πλοήγηση">
Ονομα
Το όνομα είναι ένα περιγραφικό κείμενο ή ετικέτα που σχετίζεται με ένα στοιχείο HTML. Η ευκολότερη μορφή ενός ονόματος είναι το κείμενο ενός στοιχείου. Εδώ είναι ένα παράδειγμα:
<divρόλος = "κουμπί">Κάντε κλικ με!div>
Στο παραπάνω απόσπασμα, "Κάντε κλικ με!"είναι το όνομα του στοιχείο. Είναι επίσης γνωστό ως το προσβάσιμο όνομα.
Για στοιχεία όπως η πλοήγηση, τα αναπτυσσόμενα μενού κ.λπ., η εκχώρηση ονόματος είναι πιο περίπλοκη από ό, τι στο προηγούμενο παράδειγμα. Είναι διαφορετικό γιατί αυτά τα στοιχεία έχουν θυγατρικά στοιχεία μέσα τους. Για να εκχωρήσετε ένα όνομα για την παραπάνω πλοήγηση, χρησιμοποιήστε το άρια-ετικέτα Χαρακτηριστικό. Δείτε αυτό το παράδειγμα:
<navρόλος = "πλοήγηση"άρια-ετικέτα = "παγκόσμια πλοήγηση">...nav>
Θα πρέπει να σημειώσετε ότι α όνομα το χαρακτηριστικό είναι διαφορετικό από ένα προσβάσιμο όνομα. Αυτό το απόσπασμα κώδικα δίνει μια καλύτερη κατανόηση:
χαρακτηριστικό όνομα
<navρόλος = "πλοήγηση"όνομα = "παγκόσμια πλοήγηση">...nav>
προσβάσιμο όνομα
<navρόλος = "πλοήγηση"άρια-ετικέτα = "παγκόσμια πλοήγηση">...nav>
Βλέπω Το άρθρο του TGPi για τα προσβάσιμα ονόματα για να κατανοήσουν καλύτερα αυτό.
αξία
Σε HTML, το χαρακτηριστικό value μπορεί να παρέχει πρόσθετες πληροφορίες για ένα στοιχείο. Οι τιμές παρέχουν πληροφορίες σχετικά με την κατάσταση του εξαρτήματος για προσαρμοσμένα εξαρτήματα όπως τα ακορντεόν. Για παράδειγμα, ένα ακορντεόν μπορεί είτε να ανοίξει είτε να κλείσει.
Μπορείτε να προσθέσετε αξία στα στοιχεία σας με διάφορους τρόπους. Αυτό το απόσπασμα δείχνει μερικούς από τους τρόπους με τους οποίους μπορείτε να το κάνετε αυτό:
aria-valuenow
αξία
<εισαγωγήτύπος="πλαίσιο ελέγχου"όνομα="προϊόν[]"αξία="1">
Δίνοντας προτεραιότητα στην προσβασιμότητα στον Ιστό για μια ολοκληρωμένη διαδικτυακή εμπειρία
Η προσβασιμότητα στον Ιστό υπερβαίνει τους κανόνες που ακολουθούν. αφορά επίσης τη διασφάλιση ότι όλοι έχουν ίση πρόσβαση στον ιστότοπό σας. Η ενσωμάτωση σημασιολογικών στοιχείων, ορόσημων και χαρακτηριστικών όπως ο ρόλος, το όνομα και η αξία στον HTML σας μπορεί να καταστήσει τον ιστότοπό σας πιο προσβάσιμο σε άτομα με ειδικές ανάγκες. Μην σκεφτείτε την προσβασιμότητα στον Ιστό ως επιλογή. το θεωρούν αναγκαιότητα.