Διαθεσιμότητα διεπαφής δοκιμής

1) Γιατί και τι πιστεύουμε ότι είναι «έτοιμο»

• Πληρούνται τα κριτήρια WCAG 2. 1/2. 2 επίπεδα ΑΑ για τις πλατφόρμες-στόχους·
• η διεπαφή διέρχεται πλήρως από το πληκτρολόγιο·
• ορθή εργασία με συσκευές ανάγνωσης οθόνης·
• οι αντιθέσεις είναι σύμφωνες με τους κανόνες·
• όλες οι καταστάσεις/σφάλματα/καταστάσεις είναι διαθέσιμες εκτός όρασης και χωρίς ποντίκι·
• λαμβάνονται υπόψη η τοπικοποίηση, το RTL, η μείωση της κίνησης και τα κινητά χαρακτηριστικά.

2) Στρατηγική δοκιμών (A11y πυραμίδας)

1. Autotests/linters (ταχεία κάλυψη έως 40-60% των κατηγοριών προβλημάτων).
2. Χειροκίνητος έλεγχος μοτίβου (πληκτρολόγιο, εστίαση, περιεχόμενο, λογική).
3. Συνεδρίες Assistive Tech (AT): αναγνώστες οθόνης, κλιμάκωση, φίλτρα χρωμάτων.
4. Δοκιμές πεδίου με χρήστες (εάν είναι δυνατόν).

Ο στόχος: να αλιεύονται συστημικά ελαττώματα σε επίπεδο συστατικού/μοτίβου ώστε να μην πολλαπλασιάζονται σε χαρακτηριστικά.

3) Κατάλογος βασικών ελέγχων (ταχεία εκτέλεση)

• Πληκτρολόγιο: όλα είναι προσβάσιμα με καρτέλα/βέλη. η σειρά εστίασης είναι λογική· υπάρχει παγίδα με κόλπα στους τρόπους μεταφοράς· Το ESC/Enter/Space λειτουργεί.
• Ο δείκτης εστίασης είναι ορατός σε οποιοδήποτε θέμα/φόντο.
• Αντίθεση: κείμενο ≥ 4. 5:1 (κανονικό), ≥ 3:1 (μεγάλο), τα εικονίδια/χειριστήρια είναι αναγνώσιμα.
• Σημασιολογία: σωστές ετικέτες ('κουμπί', 'a', 'ετικέτα', 'ul/li', 'th/td'), ρόλοι και 'aria-' μόνο αν είναι απαραίτητο.
• Αναγνώστης οθόνης: τίτλοι ανά ιεραρχία, σημαντικά ονόματα κουμπιών/συνδέσμων, εναλλακτικές λύσεις για εικονίδια/εικόνες.
• Έντυπα: ρητά «ετικέτα», οι υποδείξεις/τα σφάλματα σχετίζονται («aria-description»), τα κείμενα σφαλμάτων είναι συγκεκριμένα.
• Δυναμική: Οι τοστ/πανό/λάθη ανακοινώνονται μέσω 'aria-live' ('ευγενική '/' δυναμική').
• Τα κινούμενα σχέδια σέβονται την «προτιμώμενη-μειωμένη κίνηση». χωρίς «ανακίνηση» της διεπαφής.
• Τοπικοποίηση/RTL: οι οθόνες κλειδιών ευθυγραμμίζονται, οι αριθμοί/ημερομηνίες/νομίσματα διαμορφώνονται από τις επιχειρήσεις κοινής ωφέλειας.
• Κινητικότητα: στόχοι αφής ≥ 44 × 44 px, ο ζουμ δεν απαγορεύεται, η περιστροφή οθόνης δεν σπάει το περιεχόμενο.

4) Ρόλοι, ευθύνες και τεχνουργήματα

Σύστημα μελέτης: A11y απαιτήσεις στην περιγραφή κάθε κατασκευαστικού στοιχείου.
Προγραμματιστές: αυτόματοι έλεγχοι, δοκιμές μονάδας/αλληλεπίδρασης με A11y-asserts.
QA: χειροκίνητα σενάρια + συνεδρίες AT; αναφορά με σοβαρότητα/συχνότητα.
UX/Περιεχόμενο: μικροεπισκόπηση σφαλμάτων/καταστάσεων, δυνατότητα ανάγνωσης δυνατά.
Τεχνουργήματα: λίστες ελέγχου, σενάρια, οθόνες AT, κατάλογος ελαττωμάτων με αναφορές WCAG, συστάσεις.

5) Αυτοματοποιημένοι έλεγχοι

Linters/αναλυτές: τσεκούρι, eslint-plugin-jsx-a11y, pa11y, Φάρος.
Εν εξελίξει: μπλοκάρουμε τις δημόσιες σχέσεις για κρίσιμες παραβιάσεις (ρόλος/σήμα/αντίθεση/παγίδες καρτέλας).
Στιγμιότυπα αντίθεσης: οπτικές δοκιμές θεμάτων/καταστάσεων.

6) Χειροκίνητες δοκιμές: σενάρια

6. 1 Πληκτρολόγιο

Περάστε από τη σελίδα μόνο με το πληκτρολόγιο (Tab/Shift + Tab/Enter/Space/arrows).
Έλεγχος: ορατότητα εστίασης, προτεραιότητα, διαθεσιμότητα όλων των δράσεων, απουσία «παγίδων» και «νεκρών» στοιχείων.
Σε έναν τρόπο: εστίαση μέσα, όταν κλείσει, επιστρέφει στον δημιουργό.

6. 2 Συσκευές ανάγνωσης οθόνης (ελάχιστο σύνολο)

Επιφάνεια εργασίας: NVDA/JAWS (Windows), VoonOver (macOS).
Κινητό: Voon Over (iOS), TalkBack (Android).
Ελέγχουμε: σωστές επικεφαλίδες (H-ιεραρχία), ονόματα κουμπιών/συνδέσμων, πίνακες ανάγνωσης ('th '/' scope'), δηλώνοντας καταστάσεις, κατανοητά σφάλματα μορφής.

6. Περιεχόμενο και μικροσκόπηση

Διαβάζουμε κριτικά κείμενα δυνατά - χωρίς ασάφεια, χωρίς «λάθος 400».
Σφάλμα = «τι είναι λάθος + πώς να καθορίσετε + περιορισμό/μορφή».

6. 4 Δυναμική και περιοχές διαβίωσης

Η πρόποση της επιτυχίας είναι 'aria-live = «ευγενικό»', το λάθος είναι 'ισχυρό'.
Η πρόοδος/τηλεφόρτωση εξηγείται με κείμενο. Ο σκελετός προτιμάται από τον σπινθηρογράφο.

7) Μορφές και σφάλματα (σε βάθος)

Κάθε πεδίο έχει σχετική ετικέτα (όχι κάτοχο θέσης).
Τα σφάλματα συνδέονται με το πεδίο: 'aria-invalid = "true' ',' aria-description =" [error id] "'.
Οι τύποι μορφοτύπου (ημερομηνία, αριθμός τηλεφώνου) καθορίζονται εκ των προτέρων· οι μάσκες δεν σπάνε την είσοδο/εισαγωγή.
Συνοπτική πινακίδα σφαλμάτων κατά την υποβολή + αυτόματης κύλισης και εστίαση στο πρώτο σφάλμα.
Κείμενα σφάλματος: συγκεκριμένα, χωρίς τεχνική ορολογία.

8) Πίνακες, κατάλογοι, γραφήματα

Πίνακες: τίτλοι 'th' with 'scope = «col/row»', υπογραφές, επανάληψη.
Οι λίστες είναι πραγματικές 'ul/ol/li', όχι ντίβες.
Γραφήματα - εναλλακτικοί πίνακες/περιγραφές· διατίθενται θρύλοι· χρώματα ≠ ένα μόνο σήμα.

9) Πολυμέσα και κινούμενα σχέδια

Βίντεο: υπότιτλοι/αντίγραφα χειριστήριο πληκτρολογίου· χωρίς αυτόματο πλάνο (ή με ησυχία).
GIF/μικροαποικίες: απενεργοποίηση όταν «προτιμά τη μειωμένη κίνηση», αποφυγή εστιών.
Δονήσεις/ήχοι - προαιρετικά και διπλά οπτικά/κείμενα.

10) Κινητή προσβασιμότητα

Διαδραστικό ≥ 44 × 44 px, επαρκή διαστήματα.
Μην απαγορεύετε την κλιμάκωση (meta viewport χωρίς 'user-scalable = no').
Μορφή/πληκτρολόγιο: σωστοί τύποι ('tel', 'email', 'number'), μην αποκρύπτετε τις δυνατότητες του συστήματος.
Ελέγξτε σε σκοτεινό θέμα και με γραμματοσειρές συστήματος «περισσότερα».

11) Εντοπισμός, αριθμοί και RTL

Συμβολοσειρές μέσω πλήκτρων i18n με το πλαίσιο. οι μακρές γλώσσες (DE/TR) δεν σπάνε τη διάταξη.
Ημερομηνία/μορφότυπος νομίσματος - επιχειρήσεις κοινής ωφέλειας, όχι συμβολοσειρές.
Τρόπος RTL: κάτοπτρο των εικονιδίων πλοήγησης, έλεγχος της σειράς εστίασης και μεταφοράς, αμφίδρομη είσοδος.

12) Ιδιαιτερότητα της κρίσιμης ροής (iGaming)

Πληρωμές/Συμπεράσματα

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

CCM/επαλήθευση

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

13) Εκτίμηση της σοβαρότητας των ελαττωμάτων

Αποκλεισμός: Η εργασία κλειδί (ανάγνωση πληκτρολογίου/οθόνης) δεν μπορεί να ολοκληρωθεί.
Κρίσιμη: η κρίσιμη λειτουργικότητα λειτουργεί, αλλά με σοβαρά εμπόδια.
Ταγματάρχης: μπαίνει εμπόδιο, υπάρχει μια εργασία γύρω.
Ήσσονος σημασίας: καλλυντικά/μη συμμόρφωση με τους οδηγούς χωρίς να επηρεάζεται το έργο.

Κάθε ελάττωμα αποτελεί αναφορά στο κριτήριο WCAG και αναπαράγεται το σενάριο.

14) Ορισμός του αποτελέσματος (A11y)

Η διέλευση του σεναρίου πληκτρολογίου χωρίς ποντίκι είναι 100%.
τσεκούρι/Φάρος: καμία κρίσιμη/υψηλή παραβίαση.
Οι ΑΑ έρχονται σε αντίθεση με όλα τα θέματα/κράτη.
Οθόνη ανάγνωσης βασικών οδών (navbar, καλούπια, modals, τοστ).
τεκμηρίωση για νέα συστατικά/χαρακτηριστικά (μοντέλο ρόλων, άρια, εστίαση, παραδείγματα).
Παλινδρόμηση A11y δοκιμών πράσινου χρώματος στον ΚΚΠ.

15) Διαδικασίες και αυτοματοποίηση

Πριν από την ανάπτυξη: A11y-criteria σε εργασίες, η διάταξη με εστίαση/σφάλμα δηλώνει.
Στην ανάπτυξη: linters/ahe κατά τη διάρκεια της τοπικής συναρμολόγησης. οπτικά στιγμιότυπα αντίθεσης/εστίασης.
Στο ΚΚΠ: pa11y/αξονική σάρωση από κρίσιμες σελίδες. κατασκευή πτώσης υπό Blocker/Critical.
Μετά την κοινοποίηση: τριμηνιαίοι έλεγχοι, παρακολούθηση των καταγγελιών των χρηστών ανά A11y-tag.

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

Ο κάτοχος της θέσης αντί της ετικέτας.
'div' instead of 'button '/' a'.
Δαχτυλίδια εστίασης για άτομα με ειδικές ανάγκες «για χάρη της ομορφιάς».
Χρώμα ως μοναδικός φορέας κατάστασης.
Τρόποι χωρίς παγίδα εστίασης/ESC.
Καμία κλιμάκωση στο κινητό.
«Σφάλμα 400/500» χωρίς ανθρώπινη εξήγηση.

17) Πρότυπα σεναρίου δοκιμών

Σενάριο 1 - Πλοήγηση πληκτρολογίου (Έντυπο σελίδας)

1. Καρτέλα στο πρώτο πεδίο, εισάγετε τα δεδομένα.
2. Shift + Καρτέλα πίσω - Ελέγξτε τη σωστή σειρά.
3. Επικύρωση κλήσης (υποβολή) - μετατόπιση εστίασης στο πρώτο σφάλμα.
4. Κλείσιμο του διαμορφωτή με το κλειδί της ΟΚΕ και επιστροφή της εστίασης στον δημιουργό.

Σενάριο 2 - Οθόνη ανάγνωσης (Σελίδα πληρωμής)

1. Πηγαίνετε στην κεφαλίδα της σελίδας (η1), ακούστε τα τμήματα.
2. Άνοιγμα της επιλογής της μεθόδου - ακούγεται η δήλωση ρόλων/κρατών.
3. Εσκεμμένα κάντε ένα σφάλμα αθροίσματος - το μήνυμα διαβάζεται και σχετίζεται με το πεδίο.
4. Επιτυχής πρόποση πληρωμής που δηλώθηκε «ευγενική».

Σενάριο 3 - Δυναμική

1. Έναρξη λειτουργίας με αναμονή> 3 δευτερόλεπτα - υπάρχει κείμενο σχετικά με τη διαδικασία/ETA.
2. Σε περίπτωση σφάλματος δικτύου - το 'ισχυρό' πανό, προσβάσιμο από το πληκτρολόγιο, υπάρχει μια διαδρομή «επανάληψης/βοήθειας».

18) Χρήσιμα υποδείγματα

Ρόλοι/άρια για τοστ

html
<div role = "status" aria-live = "polite"> Payment accepted. Balance updated. </div>
<div role = "alert" aria-live = "assertive"> The payment was denied. Try another method. </div>

Σφάλμα σύνδεσης στο πεδίο

html
<label for = "amount "> Amount </label>
<input id="amount" aria-invalid="true" aria-describedby="amount-error">
<div id = "amount-error "> Minimum 100 UAH. Please enter a larger amount. </div>

Modalka (σημασιολογικά χαρακτηριστικά)

html
<div role="dialog" aria-modal="true" aria-labelledby="m-title">
<h2 id =" m-title "> Confirm Payment </h2>
<! -- content -->
<button> Confirm </button>
<button> Cancel </button>
</div>

19) Σχέδιο ταχείας εφαρμογής των A11y πρακτικών

1. Έλεγχος των σημερινών συνιστωσών/προτύπων (αντίθεση/εστίαση/σημασιολογία ρόλων).
2. Επεξεργασία συστήματος σχεδιασμού: Προσθήκη μιας κατάτμησης A11y σε κάθε συστατικό.
3. Εργαλεία: Ορίστε τα χιτώνια τοπικά και σε CI.
4. Κατάρτιση: σύντομοι οδηγοί για σχεδιαστές/προγραμματιστές/αντιγραφείς.
5. Χειριστής: καθορίστε 3-5 από τα πιο κοινά ελαττώματα (τρόποι, μορφές, τοστ).
6. Κανονισμός: DOD με A11y κριτήρια. τριμηνιαίος έλεγχος.

Τελικό φύλλο εξαπάτησης

Ελέγξτε πληκτρολόγιο, εστίαση, αντιθέσεις, οθόνη ανάγνωσης, δυναμική.
Αναγγελία καταστάσεων μέσω aria-live; σφάλματα - που σχετίζονται με πεδία.
Σεβαστείτε τη μείωση της κίνησης, μην απαγορεύετε την κλιμάκωση.
Σκεφτείτε σημασιολογία (ετικέτες/ρόλοι), όχι «πώς μοιάζει».
Αυτόματοι έλεγχοι, αλλά πάντα συμπληρώνονται με χειροκίνητους ελέγχους.
Διορθώστε τα ελαττώματα σε σχέση με το σενάριο WCAG, τη σοβαρότητα και την αναπαραγωγή.