GO BACK
Στις μέρες μας, η προσβασιμότητα (A11y) είναι ζωτικής σημασίας σε όλα τα στάδια της κατασκευής προϊόντων προσαρμοσμένου λογισμικού. Ξεκινώντας από το κομμάτι του σχεδιασμού UX/UI, φτάνει σε προχωρημένα επίπεδα κατασκευής χαρακτηριστικών στον κώδικα. Παρέχει πολλά οφέλη για τους προγραμματιστές που εργάζονται για την αύξηση της DX, αλλά κυρίως για τους τελικούς χρήστες. Ένα από αυτά τα a11y μέρη στην HTML είναι οι σημασιολογικές ετικέτες και αυτό είναι που θα ήθελα να καλύψω εδώ.
Οι προγραμματιστές front-end πρέπει να είναι στενά εξοικειωμένοι με Ετικέτες HTML δεδομένου ότι αυτό είναι το φυσικό τους περιβάλλον σε καθημερινή βάση. Στοιχηματίζω ότι όλοι σας γνωρίζετε κάποιες βασικές ετικέτες όπως
Ας υποθέσουμε ότι εργάζεστε σε κάποιον ιστότοπο ή εφαρμογή για έναν Γερμανό πελάτη. Όπως γνωρίζετε, οι γερμανικές λέξεις μπορεί να είναι πολύ μεγάλες. Έτσι, έχετε το σχέδιο με κάποιο περιεχόμενο κειμένου που πρέπει να αναπαραγάγετε σε κωδικός και αυτό το περιεχόμενο πρέπει να σπάσει σε πολύ συγκεκριμένες στιγμές. Εδώ έρχεται το
GeburtstagskuchenΑυτό είναι! Με μια τόσο απλή ετικέτα, μπορείτε να χειριστείτε τα περιεχόμενα του κειμένου όπως επιθυμείτε.
Αλλά τι γίνεται με την υποστήριξη του προγράμματος περιήγησης; Για να είμαι ειλικρινής, είναι αρκετά καλή. Τα περισσότερα προγράμματα περιήγησης θα καταλάβουν αυτή την ετικέτα, αλλά ο Opera στο Android και ο Safari στο iOS ενδέχεται να έχουν προβλήματα.
Φανταστείτε ότι κατασκευάζετε μια εφαρμογή διαχείρισης αποθήκευσης δίσκων. Πρέπει με κάποιο τρόπο να δείξετε στο UI πόσος αποθηκευτικός χώρος είναι ακόμα διαθέσιμος και θέλετε πραγματικά να το κάνετε όσο το δυνατόν πιο προσιτό. Αυτή είναι μια τέλεια περίπτωση χρήσης για το ετικέτα. Θα σας δώσει μόνο την τιμή εντός ενός καθορισμένου εύρους. Ένα άλλο καλό πράγμα σχετικά με αυτή την ετικέτα είναι τα χαρακτηριστικά της:
Ίσως γνωρίζετε επίσης μια παρόμοια ετικέτα, η οποία είναι η πρόοδος. Ποια είναι λοιπόν η διαφορά μεταξύ τους; Η ετικέτα progress πρέπει να χρησιμοποιείται για τρέχουσες εργασίες. Με άλλα λόγια, χρησιμοποιήστε την ετικέτα προόδου όταν ασχολείστε με μια συγκεκριμένη εργασία. Με την ετικέτα μετρητή, θα πρέπει να χρησιμοποιείται για να δείχνει τη χρήση του δίσκου ή της μνήμης. Μια άλλη διαφορά είναι ότι η ετικέτα meter δεν υποστηρίζεται από τον IE και ότι αυτό είναι στην πραγματικότητα το μοναδικό μειονέκτημα αυτής της ετικέτας.
Αναρωτηθήκατε ποτέ πώς να δημιουργήσετε μια προσβάσιμη ένδειξη των διαγραμμένων και προστιθέμενων τμημάτων περιεχομένου (diff στο GitHub ή ειδοποιήσεις μέσω email από το Jira όταν το ticket έχει ενημερωθεί); Το μόνο που χρειάζεται είναι να τυλίξετε το διαγραμμένο περιεχόμενο με το<del><p>Μόλις διαγράφηκε το περιεχόμενο</p></del>. Για να εμφανίσετε μόνο το προστιθέμενο μέρος του περιεχομένου, μπορείτε να χρησιμοποιήσετε την εντολή με τον ίδιο ακριβώς τρόπο. Αυτή η ετικέτα προσφέρει επίσης δύο χαρακτηριστικά:
Υπάρχουν, φυσικά, πολύ πιο χρήσιμα ετικέτες στην HTML . Συνιστώ ανεπιφύλακτα τη χρήση όλων αυτών, όταν αυτό είναι δυνατό και σκόπιμο. Οι πελάτες σας και οι χρήστες της εφαρμογής θα σας ευχαριστήσουν για μια τέτοια προσέγγιση. Να είστε προσεκτικοί όμως, επειδή ορισμένες ετικέτες ενδέχεται να έχουν καταργηθεί. Μπορείτε πάντα να βεβαιωθείτε ότι μια λιγότερο συνηθισμένη ετικέτα που θέλετε να χρησιμοποιήσετε είναι ακόμα έγκυρη και έχει καλή υποστήριξη στο Τεκμηρίωση MDN.
Greek 
English 
German 
Swedish 
Danish 
Norwegian 
Finnish 
French 
Polish 
Arabic 
Italian 
Japanese 
Korean 
Spanish 
Dutch 
Estonian