Προσιτότητα

Μια σύντομη επισκόπηση των δυνατοτήτων και των περιορισμών του Bootstrap για τη δημιουργία προσβάσιμου περιεχομένου.

Σε αυτήν την σελίδα

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

Επισκόπηση και περιορισμοί

Η συνολική προσβασιμότητα οποιουδήποτε έργου που έχει δημιουργηθεί με το Bootstrap εξαρτάται σε μεγάλο βαθμό από τη σήμανση του συγγραφέα, το πρόσθετο στυλ και το σενάριο που έχει συμπεριλάβει. Ωστόσο, υπό την προϋπόθεση ότι έχουν εφαρμοστεί σωστά, θα πρέπει να είναι απολύτως δυνατή η δημιουργία ιστοτόπων και εφαρμογών με Bootstrap που πληρούν το WCAG 2.1 (A/AA/AAA), Ενότητα 508 και παρόμοια πρότυπα και απαιτήσεις προσβασιμότητας.

Δομική σήμανση

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

Διαδραστικά στοιχεία

Τα διαδραστικά στοιχεία του Bootstrap—όπως τα modal dialogs, τα αναπτυσσόμενα μενού και οι προσαρμοσμένες συμβουλές εργαλείων— έχουν σχεδιαστεί για να λειτουργούν για χρήστες αφής, ποντικιού και πληκτρολογίου. Μέσω της χρήσης των σχετικών ρόλων και χαρακτηριστικών WAI - ARIA , αυτά τα στοιχεία θα πρέπει επίσης να είναι κατανοητά και να λειτουργούν με τη χρήση βοηθητικών τεχνολογιών (όπως προγράμματα ανάγνωσης οθόνης).

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

Αντίθεση χρώματος

Ορισμένοι συνδυασμοί χρωμάτων που αποτελούν αυτήν τη στιγμή την προεπιλεγμένη παλέτα του Bootstrap—που χρησιμοποιούνται σε όλο το πλαίσιο για πράγματα όπως παραλλαγές κουμπιών, παραλλαγές ειδοποίησης, δείκτες επικύρωσης φόρμας—μπορεί να οδηγήσουν σε ανεπαρκή χρωματική αντίθεση (κάτω από την προτεινόμενη αναλογία αντίθεσης χρώματος κειμένου WCAG 2.1 4,5:1 και η αναλογία αντίθεσης χρωμάτων χωρίς κείμενο WCAG 2.1 3:1 ), ιδιαίτερα όταν χρησιμοποιείται σε ανοιχτόχρωμο φόντο. Οι συγγραφείς ενθαρρύνονται να δοκιμάσουν τις συγκεκριμένες χρήσεις του χρώματος και, όπου είναι απαραίτητο, να τροποποιήσουν/επεκτείνουν χειροκίνητα αυτά τα προεπιλεγμένα χρώματα για να εξασφαλίσουν επαρκείς αναλογίες χρωματικής αντίθεσης.

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

<p class="text-danger">
  <span class="visually-hidden">Danger: </span>
  This action is not reversible
</p>

Για οπτικά κρυφά διαδραστικά στοιχεία ελέγχου, όπως παραδοσιακούς συνδέσμους "παράβλεψης", χρησιμοποιήστε την .visually-hidden-focusableκλάση. Αυτό θα διασφαλίσει ότι το στοιχείο ελέγχου γίνεται ορατό μόλις εστιαστεί (για χρήστες πληκτρολογίου με όραση). Προσέξτε, σε σύγκριση με το αντίστοιχο .sr-onlyκαι .sr-only-focusableτις κλάσεις σε προηγούμενες εκδόσεις, το Bootstrap 5 .visually-hidden-focusableείναι μια αυτόνομη κατηγορία και δεν πρέπει να χρησιμοποιείται σε συνδυασμό με την .visually-hiddenκατηγορία.

<a class="visually-hidden-focusable" href="#content">Skip to main content</a>

Μειωμένη κίνηση

Το Bootstrap περιλαμβάνει υποστήριξη για τη prefers-reduced-motionδυνατότητα πολυμέσων . Σε προγράμματα περιήγησης/περιβάλλοντα που επιτρέπουν στον χρήστη να προσδιορίσει την προτίμησή του για μειωμένη κίνηση, τα περισσότερα εφέ μετάβασης CSS στο Bootstrap (για παράδειγμα, όταν ανοίγει ή κλείνει ένας τρόπος διαλόγου ή η συρόμενη κινούμενη εικόνα σε καρουζέλ) θα απενεργοποιούνται και τα ουσιαστικά κινούμενα σχέδια ( όπως spinners) θα επιβραδυνθεί.

Σε προγράμματα περιήγησης που υποστηρίζουν prefers-reduced-motionκαι όπου ο χρήστης δεν έχει δηλώσει ρητά ότι προτιμά μειωμένη κίνηση (δηλ. όπου prefers-reduced-motion: no-preference), το Bootstrap επιτρέπει την ομαλή κύλιση χρησιμοποιώντας την scroll-behaviorιδιότητα.