Τι είναι τα χαρακτηριστικά Aria σε HTML και γιατί είναι σημαντικά;

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

Τα χαρακτηριστικά ARIA εξυπηρετούν έναν σημαντικό σκοπό στην προσβασιμότητα των ιστοσελίδων σας. Περιγράφουν τόσο το περιεχόμενο ενός δεδομένου στοιχείου όσο και τον τρόπο που ένα στοιχείο σχετίζεται με μια σελίδα ή τα άλλα στοιχεία γύρω από αυτήν.

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

Τι είναι τα χαρακτηριστικά ARIA;

Το ARIA είναι ένα αρκτικόλεξο του Accessible Rich Internet Applications. Στη σύγχρονη HTML, ειδικά σε εφαρμογές πλούσιες σε JavaScript, δεν είναι πάντα προφανές με βάση τη σύνταξη τον ρόλο που διαδραματίζουν μεμονωμένα στοιχεία.

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

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

Γιατί είναι σημαντικά τα χαρακτηριστικά ARIA;

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

Υπάρχει μια μεγάλη ποικιλία χαρακτηριστικών ARIA που μπορείτε να εκχωρήσετε. Θα πρέπει να τα χρησιμοποιήσετε οπουδήποτε χρειάζεται πρόσθετο πλαίσιο για να επιτρέψετε στο έγγραφο να έχει νόημα με μη οπτικό τρόπο.

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

<divτάξη="nav">
<ul>
<li>Σπίτιli>
<li>Κατάστημαli>
<li>Σχετικά μεli>
ul>
div>

Μπορείτε να χρησιμοποιήσετε τα χαρακτηριστικά ARIA για να βοηθήσετε τους χρήστες να πλοηγηθούν. Προσθέτοντας τα χαρακτηριστικά του ρόλου και της ετικέτας aria στο Το στοιχείο επιτρέπει στο πρόγραμμα ανάγνωσης οθόνης και στις βοηθητικές τεχνολογίες να γνωρίζουν πού βρίσκεται το μενού σας.

<divτάξη="nav">
<ulρόλος="πλοήγηση"άρια-ετικέτα="Κύριος">
<li>Σπίτιli>
<li>Κατάστημαli>
<li>Σχετικά μεli>
ul>
div>

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

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

Ορίζοντας το ρόλο του περιτυλίγματος σε γραμμή προόδουκαι προσθέτοντας aria-valuenow, aria-valuemin, και aria-valuemax χαρακτηριστικά στο περιτύλιγμα, μπορείτε ακόμα να υποδείξετε την πρόοδο.

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

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

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

Ποια χαρακτηριστικά ARIA πρέπει να χρησιμοποιήσω;

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

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

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

Εάν έχετε ένα πεδίο με ετικέτα, αυτό το πεδίο θα πρέπει να έχει το aria-labeledby Χαρακτηριστικό. Εφόσον τα χαρακτηριστικά που χρησιμοποιείτε έχουν νόημα, απλώς κάνετε τον ιστότοπό σας πιο προσβάσιμο προσθέτοντάς τα.

Τα χαρακτηριστικά widget είναι η πολύ μεγαλύτερη κατηγορία. Περιέχει τα περισσότερα από τα χαρακτηριστικά ARIA που θα χρειαστεί να προσθέσετε σε μια τυπική τοποθεσία. Στο προηγούμενο παράδειγμα της προσαρμοσμένης γραμμής προόδου, τα aria-valuenow, aria-valuemin και aria-valuemax είναι όλα χαρακτηριστικά γραφικού στοιχείου. Περιγράφουν την κατάσταση ή τις πιθανές καταστάσεις του στοιχείου στο οποίο βρίσκονται.

Υπάρχουν πολλά διαφορετικά χαρακτηριστικά που μπορείτε να χρησιμοποιήσετε για να περιγράψετε την κατάσταση ενός στοιχείου. Ένα από τα πιο κοινά είναι άρια-ετικέτα. Αυτό το χαρακτηριστικό εφαρμόζει μια ετικέτα στο στοιχείο που το τοποθετείτε που είναι ορατό μόνο σε υποστηρικτικές τεχνολογίες.

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

Ιδιότητες Σχέσεων

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

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

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

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

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

Γιατί είναι τόσο σημαντικό να συμπεριλάβετε χαρακτηριστικά ARIA στο HTML σας

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

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