Διαθεσιμότητα UX και διεπαφές για όλους

1) Γιατί έχει σημασία

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

2) Θεμελιώδη στοιχεία και αρχές (POUR)

Αντιληπτό: αντίθεση, εναλλακτικά κείμενα, υπότιτλοι.
Λειτουργική: όλα είναι προσβάσιμα από το πληκτρολόγιο, ορατή εστίαση, παύση/διακοπή κινουμένων σχεδίων.
Κατανόηση: προβλέψιμη πλοήγηση, σαφή σφάλματα, απλές συνθέσεις.
Εύρωστη: σωστή σημασιολογία HTML/ARIA, συμβατότητα με βοηθητικές τεχνολογίες.

3) Σημασιολογία, τίτλοι και ARIAs

Σημασιολογική σήμανση πριν από την ARIA: '<button>', '<nav>', '<form>', '<table>' - κατά σκοπό.
Ιεραρχία κεφαλίδας: ένα '<h1>' ανά σελίδα, στη συνέχεια λογική δομή '<h2>' - '<h3>'.
Ορόσημα: '<κεφαλίδα>', '<κύρια>', '<κατά μέρος>', '<footer>', '<nav>' - βοηθούν τους αναγνώστες οθόνης.
ARIA μόνο όταν χρειάζεται: «ρόλος», «σήμα aria», «aria-περιγράφεται», «aria-επεκταθεί», «aria-live».
Κράτη/σφάλματα μέσω «aria-άκυρων», «aria-errormessage».

4) Διαχείριση πληκτρολογίου και εστίασης

Πλήρης έλεγχος πληκτρολογίου: 'Tab/Shift + Tab' - σειρά, 'Enter/Space' - ενεργοποιήστε, 'Esc' - έξοδος.
Ορατή πάντα εστίαση. δεν απενεργοποιούν το περίγραμμα.
Παγίδες εστίασης: σε τρόπους μεταφοράς - κυκλική εστίαση, επιστροφή της εστίασης στην πηγή μετά το κλείσιμο.
Τα κρυμμένα στοιχεία δεν πρέπει να εμπίπτουν στη σειρά καρτέλας (' εμφάνιση: κανένα', 'aria-κρυμμένο =» αληθινό»').
Παραλείψτε τους συνδέσμους: «Πηγαίνετε στο κύριο περιεχόμενο» - στην αρχή της σελίδας.

5) Χρώμα, αντίθεση και τυπογραφία

Αντιγραφή κειμένου: τουλάχιστον 4. 5:1 για απλό κείμενο και 3:1 για μεγάλο κείμενο.
Μην βασίζεστε μόνο στο χρώμα: αντίγραφο με εικονίδιο/μοτίβο/υπογραφή.
Μέγεθος κλικ στόχων: τουλάχιστον 40-48 px, επαρκή πεδία γύρω.
Γραμματοσειρές: αναγνώσιμοι τύποι, γραμμή προς γραμμή 1. 4–1. 6, μήκος γραμμής 45-90 χαρακτήρες.

6) Κίνηση, κινούμενα σχέδια και επιληπτογόνο φλας

Σεβαστείτε το σύστημα προτιμά τη σημαία μειωμένης κίνησης - προσθέστε απλοποιημένες κινήσεις/απενεργοποιήστε την παράλλαξη.
Αποφύγετε τα τρεμοπαίζοντα> 3 φορές/sec.
Όλες οι αυτόματες κινήσεις πρέπει να έχουν παύση/διακοπή/απόκρυψη.

7) Έντυπα, σφάλματα και επικύρωση

Δεσμεύουν ρητά τις ετικέτες και τα πεδία: '<ετικέτα = «id»>'.
Ο κάτοχος της θέσης δεν είναι ετικέτα.
Σφάλμα μηνυμάτων δίπλα στο πεδίο και στην περίληψη σφάλματος στην κορυφή. δεσμεύονται μέσω «aria-descripted».
Εξηγήστε το μορφότυπο εισόδου, παράδειγμα, μάσκα. Προσδιορίστε τις μονάδες και το νόμισμα.
Μη επαναφορά ολοκληρωμένων πεδίων όταν συμβαίνει κάποιο σφάλμα. να επικεντρώνεται στο προβληματικό πεδίο.

html
<label for="email">Эл. почта</label>
<input id="email" name="email" type="email" aria-describedby="email-hint email-err">
<div id="email-hint" class="hint">Мы не рассылаем спам</div>
<div id="email-err" class="error" role="alert">Укажите адрес в формате name@example.com</div>

8) Συστατικά μέρη και διαδραστικά: μοτίβα

Κουμπιά έναντι συνδέσμων: δράση = '<κουμπί>', άλμα = '<a>'.
Tabs/ακορντεόν: βέλη πλοήγησης, 'aria-control', 'aria-selected'.
Τρόποι/διάλογοι: 'role =' dialogue '', 'aria-modal = "true' ', focus trap,' Esc 'κλείνει.
Εργαλείο/Popover: προσβασιμότητα πληκτρολογίου, timeouts δεν παρεμβαίνουν στην ανάγνωση.
Drag & Drop: εναλλακτικές λύσεις - μετακίνηση κουμπιών πάνω/κάτω, βέλη πληκτρολογίου; γεγονότα όχι μόνο με το ποντίκι.

9) Μέσα: Βίντεο/Ήχος/Γραφικά

Βίντεο: υπότιτλοι, μεταγραφή, εναλλακτική περιγραφή ήχου (AD).
Ήχος: μεταγραφή κειμένου.
Γραφήματα/διαγράμματα: περίληψη κειμένου («τι είναι σημαντικό»), πίνακας δεδομένων, περιγραφικές ετικέτες αξόνων.
Περιοχές διαβίωσης: 'aria-live = «ευγενική «/» δυναμική «'- προσέξτε να μην» ουρλιάζετε »πολύ συχνά.

10) Πίνακες και κατάλογοι

11) i18n, τοπικοί και RTL

το χαρακτηριστικό 'lang' στη ρίζα html; τοπικός αριθμός/ημερομηνία/μορφότυπος νομίσματος.
Υποστήριξη RTL (Αραβικά/Εβραϊκά): αντικατοπτρίζοντας εικόνες, τάξη πλοήγησης, δρομείς.
Αποφύγετε λέξεις ραμμένες σε εικονίδια (το κείμενο πρέπει να μεταφράζεται).
Απλές συνθέσεις, αποφυγή ορολογίας. γλωσσάριο όρων.

12) Χρόνος, σύνοδοι, captchas και εναλλακτικές λύσεις

Timeouts - με προειδοποίηση και δυνατότητα επέκτασης.
CAPTCHA: προτιμούν εναλλακτικές λύσεις (ερωτήσεις, αόρατοι αναλυτές bot, επιβεβαίωση μέσω ταχυδρομείου/τηλεφώνου)· Εάν χρησιμοποιήσετε - ένα κείμενο εναλλακτικό και όχι μόνο οπτικό.
Ταυτοποίηση: υποστήριξη για διαχειριστές κωδικών πρόσβασης, «εμφάνιση κωδικού πρόσβασης», WebAuthn.

13) Προσβασιμότητα για αισθητηριακές και κινητικές βλάβες

Οι χειρονομίες πρέπει να έχουν κλικ/ισοδύναμα πληκτρολογίου.
Μην απαιτείτε μακριές λαβές/διπλές βρύσες χωρίς εναλλακτική λύση.
«Ακύρωση δείκτη»: η ενέργεια πρέπει να εκτελείται μετά την κυκλοφορία και όχι στο «πιεστήριο» για να δοθεί η δυνατότητα ακύρωσης.

14) Κράτη, ανακοινώσεις και προειδοποιήσεις

Χρησιμοποιήστε το 'role =' status '/' alert '' για δυναμικά μηνύματα.
Μην καλύπτετε την εστίασή σας με κολλώδη πανό.
Ειδοποιήσεις για τοστ - με παύση στο focus/hover και πρόσβαση από το πληκτρολόγιο.

15) Σχέδιο δοκιμής (εγχειρίδιο και αυτόματο)

• Περάστε όλα τα βασικά σενάρια μόνο με το πληκτρολόγιο.
• Ελέγξτε την προβολή εστίασης σε κάθε αντικείμενο.
• Ζουμ έως 200% - η διεπαφή παραμένει λειτουργική χωρίς οριζόντια κύλιση.
• Ενεργοποιήστε τη λειτουργία συστήματος «μειωμένη κίνηση» - οι κινούμενες εικόνες δεν παρεμβαίνουν.
• Περάστε το σενάριο με έναν αναγνώστη οθόνης (NVDA/VoonOver), βεβαιωθείτε ότι οι ρόλοι/ετικέτες/παραγγελία είναι σωστοί.

• Χνούδια προσβασιμότητας σε επίπεδο κατασκευαστικού στοιχείου.
• Ελέγξτε για αντίθεση, εναλλακτικά κείμενα, σειρά κεφαλίδας, εγκυρότητα ARIA.
• Στιγμιότυπα σημασιολογίας (δέντρο ρόλων) για κριτικές οθόνες.

16) Μετρήσεις ποιότητας διαθεσιμότητας

Κάλυψη: το ποσοστό των εξαρτημάτων με ολοκληρωμένους καταλόγους ελέγχου.
Ρυθμός πρόσβασης μόνο πληκτρολογίου: ποσοστό σεναρίων που διασχίζονται από το πληκτρολόγιο.
Αντίθεση Violations/1k στοιχείων.
Χρόνος ροής SR: Χρόνος εκτέλεσης σεναρίου με αναγνώστη οθόνης.
Ανάδραση χρήστη: καταγγελίες σχετικά με διαθεσιμότητα, χρόνο απόκρισης και διορθώσεις.

17) Κατάλογος σημείων ελέγχου

• Διόρθωση σημασιολογίας/ρόλου χωρίς περιττό ARIA
• Υπογεγραμμένες ετικέτες, 'aria-' σωστή
• Πλήρης έλεγχος πληκτρολογίου, ορατή εστίαση
• Η αντίθεση κειμένου/εικονιδίου/συνόρων είναι φυσιολογική
• Τα σφάλματα και οι συνθήκες εκφράζονται από τον αναγνώστη οθόνης
• Σεβασμός των προτιμώμενων μειωμένων κινήσεων
• Μέγεθος εμβαδού Clickable ≥ 40-48 px
• Εντοπισμός και RTL δεν σπάσει τη διάταξη

18) Αντι-μοτίβα

«Div-κουμπιά» χωρίς ρόλο/πληκτρολόγιο.
Κρύβει το «περίγραμμα: κανένα» χωρίς εναλλακτική λύση.
Ο κάτοχος της θέσης αντί της ετικέτας.
Σφάλματα μόνο σε χρώμα.
Τρόποι χωρίς παγίδα εστίασης και χωρίς «Esc».
Σύρετε μόνο χωρίς πληκτρολόγιο.
Long auto-scrolling/parallax χωρίς δυνατότητα απενεργοποίησης.

19) Ρόλοι και διαδικασία

στην εντολή (Προϊόν/Σχεδιασμός/Dev).
Ο ορισμός των δεδομένων (DoD) περιλαμβάνει τη διαθεσιμότητα.
Ανασκόπηση σχεδιασμού: έλεγχος αντίθεσης, εστίασης, ετικετών.
Ανασκόπηση κώδικα: σημασιολογία/ARIA, δοκιμή πληκτρολογίου.
Τακτικοί έλεγχοι και σχέδιο βελτίωσης.

20) Εφαρμογή με επανάληψη

• Σημασιολογία/τίτλοι, αντίθεση, εστίαση και πληκτρολόγιο, βασικές μορφές και σφάλματα.

• Τροπικά, καρτέλες/ακορντεόν, πίνακες/γραφήματα με περίληψη κειμένου, υπότιτλους βίντεο, μειωμένη εικονογράφηση.

• Αυτόματες δοκιμές σε CI, RTL/i18n, μετρήσεις, τακτικούς ελέγχους, ομαδική εκπαίδευση.

21) Υποδείγματα και υποδείγματα

html
<div role="dialog" aria-modal="true" aria-labelledby="dlg-title" aria-describedby="dlg-desc">
<h2 id="dlg-title">Подтвердите действие</h2>
<p id="dlg-desc">Эта операция необратима.</p>
<button>Отмена</button>
<button>Подтвердить</button>
</div>

html
<a class="skip-link" href="#main">Перейти к основному содержимому</a>
<main id="main">...</main>

css
@media (prefers-reduced-motion: reduce) {
{ animation-duration: 0.01ms!important; animation-iteration-count: 1!important; transition: none!important; }
}

22) Mini-FAQ

Χρειάζομαι ξεχωριστή «έκδοση με προβλήματα όρασης»

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

Αρκεί να ελέγξουμε μόνο την αντίθεση

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

ARIA θα λύσει τα πάντα

Η ARIA δεν θα διορθώσει την εσφαλμένη σημασιολογία. Πρώτα σωστές ετικέτες και μετά βελτιώσεις του ARIA.

Αποτέλεσμα

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