Οι απαιτήσεις για σχεδιασμό ιστοσελίδων περιλαμβάνουν ολοένα και μεγαλύτερη βελτιωμένη προσβασιμότητα στον ιστό. Δεν αρκεί όμως η βελτιστοποίηση του ιστότοπου για όλα τα μεγάλα προγράμματα περιήγησης με πολλαπλή συμβατότητα συσκευών; Μπορείτε εύκολα να μετρήσετε την απόδοση του ιστότοπού σας, την προσβασιμότητα, τις βέλτιστες πρακτικές και το SEO χρησιμοποιώντας το Google Lighthouse. Γιατί λοιπόν έχει σημασία η προσβασιμότητα;

Σύμφωνα με το CDC (Centers for Disease Control and Prevention), πάνω από 60 εκατομμύρια Αμερικανοί ζουν με αναπηρία. Ακολουθώντας τις Οδηγίες Προσβασιμότητας στο Περιεχόμενο Ιστού, μπορείτε να εισαγάγετε μερικές προκαταρκτικές εκτιμήσεις που θα συμβάλουν στη δημιουργία ενός προσβάσιμου ιστότοπου. Εδώ είναι όλα όσα χρειάζεστε για να ξεκινήσετε με την προσβασιμότητα στον ιστό χρησιμοποιώντας HTML και CSS.

Δομημένη HTML με σωστή σημασιολογία

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

Για παράδειγμα, α

Διαβάστε περισσότερα: Απλά παραδείγματα κώδικα HTML Μπορείτε να μάθετε σε 10 λεπτά

Το Semantic HTML είναι πιο εύκολο να αναπτυχθεί καθώς θα έχετε επιπλέον λειτουργίες μαζί με αυτό. Λειτουργεί υπέροχα στο κινητό. Επίσης, όταν δίνετε σημασία σε λέξεις -κλειδιά τυλιγμένες μέσα

ή ετικέτα, βοηθάει στο SEO.

Δομημένο περιεχόμενο για χρήστες του προγράμματος ανάγνωσης οθόνης

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

Καλή σημασιολογική HTML
Ο τίτλος μου

Δείτε πώς μπορείτε να δημιουργήσετε έναν προσβάσιμο ιστότοπο χρησιμοποιώντας HTML και CSS

Ο δεύτερος τίτλος μου

Κακή σημασιολογική HTML
Ο τίτλος μου

Δείτε πώς μπορείτε να δημιουργήσετε έναν προσβάσιμο ιστότοπο χρησιμοποιώντας HTML και CSS

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

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

Γλώσσα και διατάξεις για προσβάσιμο ιστότοπο

Θα πρέπει να χρησιμοποιείτε ακριβή γλώσσα με διευρυμένα ακρωνύμια και συντομογραφίες. Εάν είναι δυνατόν, προσπαθήστε να αποφύγετε τις παύλες γράφοντας 9-5 -> 9 έως 5. Προηγουμένως, πίνακες HTML χρησιμοποιήθηκαν για τη δημιουργία των διατάξεων σελίδων. Συνήθιζε να παρεμποδίζει τις σωστές αναγνώσεις λόγω ένθετων πινάκων που σχημάτισαν μια αρκετά περίπλοκη διάταξη. Ακολουθεί μια σύγχρονη δομή ιστότοπου:

Αυτή είναι μια κεφαλίδα



Περιεχόμενο κύριας σελίδας

που περιέχει το άρθρο

Επικεφαλίδα άρθρου

περιεχόμενο άρθρου



Υποσέλιδο ιστότοπου

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

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

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

Για να δημιουργήσετε προσβάσιμους πίνακες, προσθέστε κεφαλίδες πίνακα

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

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

Στις περισσότερες περιπτώσεις, ο αναγνώστης οθόνης θα διαβάσει το alt κείμενο, το όνομα αρχείου και το χαρακτηριστικό τίτλου (μπορείτε να το παραλείψετε). Επίσης, εάν δεν θέλετε να χρησιμοποιήσετε εναλλακτικό κείμενο ή θέλετε να προσθέσετε την ίδια ετικέτα σε πολλές εικόνες, τότε ακολουθεί μια γρήγορη συμβουλή:

Ένα κόκκινο λουλούδι ...

Χρησιμοποιήσατε το χαρακτηριστικό aria-labelledby για αναφορά σε αυτό το αναγνωριστικό. Θα επιτρέψει στους αναγνώστες οθόνης να χρησιμοποιούν εναλλακτικό κείμενο με τη μορφή αυτής της παραγράφου.

Τυπικό CSS για καλύτερη προσβασιμότητα

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

,

, και

στοιχείο, ένα τυπικό CSS πρέπει να είναι:

η1 {
μέγεθος γραμματοσειράς: 4rem;
}
p, li {
μέγεθος γραμματοσειράς: 1.5rem;
χρώμα: μπλε?
}

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

Διαμόρφωση κειμένου, συνδέσμων και ετικετών

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

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

ένα {
χρώμα: #ff0000;
}
a: active {
χρώμα: #000000;
χρώμα φόντου: #a60000;
}
a: hover, a: επισκέφθηκε, a: focus {
χρώμα: #a60000;
κείμενο-διακόσμηση: κανένα?
}

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

Χρησιμοποιήστε το CSS για να δώσετε μια καθαρή εμφάνιση στα στοιχεία φόρμας και τις ετικέτες. Επίσης, αποφασίστε καταστάσεις εστίασης/τοποθέτησης δείκτη που είναι συνεπείς στα περισσότερα προγράμματα περιήγησης. Θυμηθείτε ότι αυτές οι μικρές ενδείξεις βοηθούν τους ανθρώπους να κατανοήσουν την ιστοσελίδα σας.

Αντίθεση χρώματος και απόκρυψη τιμών

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

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

Διευκολύνετε την παράκαμψη του στυλ

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

Αναδίπλωση: Συνδυάστε HTML και CSS

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

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

Πώς να φτιάξετε έναν ιστότοπο: Για αρχάριους

Σήμερα θα σας καθοδηγήσω στη διαδικασία δημιουργίας ενός πλήρους ιστότοπου από την αρχή. Μην ανησυχείτε αν αυτό σας φαίνεται δύσκολο. Θα σας καθοδηγήσω σε κάθε βήμα.

Διαβάστε Επόμενο

Σχετικά με τον Συγγραφέα

Επέκταση για ανάγνωση ολόκληρης της ιστορίας