ინტერფეისის ხელმისაწვდომობის ტესტირება

1) რატომ და რას ვთვლით მზად

წვდომა (A11y) არის პირობების გაზომილი ნაკრები, რომელშიც პროდუქტი თანაბრად გასაგებია და აკონტროლებს აღქმის და საავტომობილო, მოწყობილობებისა და კონტექსტების სხვადასხვა მახასიათებლების მქონე პირებს. - ეჲბპვ

შესრულებულია WCAG 2 კრიტერიუმები. 1/2. AA- ს 2 დონე სამიზნე პლატფორმებისთვის;

ინტერფეისი მთლიანად გადის კლავიატურიდან;

სწორი მუშაობა ეკრანის დირიჟორებთან;

კონტრასტები შეესაბამება სტანდარტებს;

ყველა სახელმწიფო/შეცდომა/სტატუსი ხელმისაწვდომია მხედველობიდან და თაგვის გარეშე;

გათვალისწინებულია ლოკალიზაცია, RTL, reduce motion და მობილური მახასიათებლები.

2) ტესტირების სტრატეგია (A11y პირამიდა)

1. Autostes/Linters (სწრაფი საფარი პრობლემების კლასების 40-60% -მდე).
2. შაბლონების სახელმძღვანელო შემოწმება (კლავიატურა, ფოკუსი, შინაარსი, ლოგიკა).
3. Assistive Tech (AT) სესიები: ეკრანის ეკრანები, სკალირება, ფერის ფილტრები.
4. საველე ტესტები მომხმარებლებთან (თუ ეს შესაძლებელია).

მიზანი: სისტემური დეფექტების დაჭერა კომპონენტების/შაბლონების დონეზე, ისე რომ არ გამრავლებულიყო ფიჩებში.

3) ძირითადი შემოწმებების შემოწმების სია (სწრაფი გაშვება)

• კლავიატურა: ყველაფერი მიღწეულია ტაბუდადებული/ისრებით; ფოკუსის რიგი ლოგიკურია; მოდალებში ფოკუსის ხაფანგია; ESC/Enter/Space მუშაობს.
• ფოკუსის ინდიკატორი ვხედავთ ნებისმიერ თემას/ნებისმიერ ფონზე.
• კონტრასტი: ტექსტი 4. 5:1 (ჩვეულებრივი), 3:1 (დიდი), იკონკი/მაკონტროლებელი იკითხება.
• სემანტიკა: სწორი ჭდეები ('button', 'a', 'label', 'ul/li', 'th/td'), როლები და 'aria' მხოლოდ საჭიროების შემთხვევაში.
• Scrinrider: თავები იერარქიაზე, ღილაკების/ბმულების სემანტიკური სახელები, ალტერნატივა ხატებისთვის/სურათებისთვის.
• ფორმები: აშკარა 'label', მინიშნებები/შეცდომები უკავშირდება ('aria-describedby'), შეცდომების ტექსტები სპეციფიკურია.
• დინამიკა: სადღეგრძელოები/ბანერები/შეცდომები გამოცხადებულია 'aria-live' ('polite '/' assertive') საშუალებით.
• ანიმაციებს პატივს სცემენ „prefers-reduced-motion“; ინტერფეისის „შერევის“ გარეშე.
• ლოკალიზაცია/RTL: ძირითადი ეკრანები თანაბარია, რიცხვები/თარიღები/ვალუტები ფორმატირებულია გამონაბოლქვი.
• მობილურობა: შეხების მიზნები 44 × 44 px, ზუმი არ არის აკრძალული, ეკრანის ბრუნვა არ არღვევს შინაარსს.

4) როლები, პასუხისმგებლობები და არტეფაქტები

დიზაინის სისტემა: A11y მოთხოვნები თითოეული კომპონენტის აღწერაში.
დეველოპერები: autoprovers, unit/interaction ტესტები A11y Asserts- ით.
QA: სახელმძღვანელო სცენარები + AT სესიები; ანგარიში სერიოზული/სიხშირით.
UX/შინაარსი: შეცდომების/სტატუსის მიკროკოპია, ხმამაღლა კითხვა.
არტეფაქტები: შემოწმების ფურცლები, სკრიპტები, AT ეკრანიზაცია, WCAG რეფერენდუმით დეფექტების სია, რეკომენდაციები.

5) ავტომატური შემოწმებები

ლინტერი/ანალიზატორი: axe, eslint-plugin-jsx-a11y, pa11y, Lighthouse.
Pipline: ჩვენ ბლოკავს PR- ს კრიტიკულ დარღვევებზე (role/label/კონტრასტი/ტაბლეტის ხაფანგები).
კონტრასტის დარტყმები: თემების/სახელმწიფოების ვიზუალური ტესტები.

6) სახელმძღვანელო ტესტირება: სკრიპტები

6. 1 კლავიატურა

გაიარეთ გვერდი მხოლოდ კლავიატურით (Tab/Shift + Tab/Enter/Space/ისრები).
შეამოწმეთ: ფოკუსის ხილვადობა, რიგითობა, ყველა მოქმედების ხელმისაწვდომობა, „ხაფანგების“ და „მკვდარი“ ელემენტების არარსებობა.
მოდალკაში: ფოკუსი შიგნით, როდესაც დახურულია, ის დაუბრუნდება ინიციატორს.

6. 2 ეკრანები (მინიმალური ნაკრები)

Desktop: NVDA/JAWS (Windows), VoiceOver (macOS).
Mobile: VoiceOver (iOS), TalkBack (Android).
ჩვენ ვამოწმებთ: სწორი სათაურები (H- იერარქია), ღილაკების/ბმულების სახელები, ცხრილების კითხვა ('th '/' scope'), სტატუსის გამოცხადება, ფორმების გასაგები შეცდომები.

6. 3 შინაარსი და მიკროკოპი

ჩვენ ვკითხულობთ კრიტიკულ ტექსტებს ხმამაღლა - ორაზროვნების გარეშე, „400 შეცდომა“ გარეშე.
შეცდომა = „რაც არასწორია + შეზღუდვის/ფორმატის გამოსწორება“.

6. 4 დინამიკა და ცოცხალი რეგიონები

წარმატების სადღეგრძელო - 'aria-live = „polite“', შეცდომა - 'assertive'.
პროგრესი/დატვირთვა ახსნილია ტექსტით; skeleton სასურველია spinner.

7) ფორმები და შეცდომები (სიღრმისეულად)

თითოეულ ველს აქვს დაკავშირებული ლაბელი (არა placeholder).
შეცდომები უკავშირდება ველს: 'aria-invalid = „ნამდვილი“ „, aria-describedby =“ [id შეცდომები] „“.
ფორმატის ფორმულები (თარიღი, ტელეფონი) წინასწარ არის მითითებული; ნიღბები არ არღვევს შეყვანას/ჩანართს.
შეცდომების მთლიანი ბანერი subit + auto-croll და აქცენტი პირველი შეცდომის შესახებ.
შეცდომების ტექსტები: სპეციფიკური, ტექნიკური ჟარგონის გარეშე.

8) ცხრილი, სიები, გრაფიკა

ცხრილები: სათაურები 'th' scope = „col/row“, ხელმოწერები, რეზიუმეები.
სიები - ნამდვილი 'ul/ol/li', არა divami.
გრაფიკა - ალტერნატიული ცხრილი/აღწერილობები; ლეგენდები ხელმისაწვდომია; ფერები ერთადერთი სიგნალია.

9) მულტიმედია და ანიმაცია

ვიდეო: სუბტიტრები/გაშიფვრა; კლავიატურაზე კონტროლი; ავტოპლეის გარეშე (ან მშვიდი).
GIF/მიკროანიმაცია: გამორთეთ 'prefers-reduced-motion'; თავიდან აიცილეთ ციმციმები.
ვიბრაცია/ხმები არჩევითია და დუბლირებულია ვიზუალურად/ტექსტით.

10) მობილური წვდომა

ინტერაქტივები - 44 × 44 px, საკმარისი ინტერვალები.
სკალირება არ არის აკრძალული (meta viewport 'user-scalable = no').
ფორმა/კლავიატურა: სწორი ტიპები ('tel', 'email', 'number'), სისტემის მახასიათებლების გარეშე.
შემოწმება ბნელ თემაში და სისტემის შრიფტებით „მეტი“.

11) ლოკალიზაცია, ნომრები და RTL

ხაზები i18n კლავიშებით კონტექსტით; გრძელი ენები (DE/TR) არ არღვევს განლაგებას.
თარიღის/ვალუტის ფორმატები - იხვები, არა სტრიქონები.
RTL რეჟიმი: მარცვლეულის ნავიგაციის ხატები, შეამოწმეთ ფოკუსისა და ვაგონების რიგი, ორმხრივი შეყვანა.

12) კრიტიკული ნაკადების სპეციფიკა (iGaming)

გადახდები/დასკვნები

მკაფიო მითითებები, ლიმიტები/ვადები/საკომისიო - ტექსტი.
პროვაიდერის შეცდომები აშკარად გამოცხადებულია კოდების გარეშე; მოქმედების ალტერნატივა არსებობს.
ოპერაციის დადასტურება: ფოკუსი ლოგიკურ CTA- ზე, გაუქმების შესაძლებლობა.

KUS/გადამოწმება

ეტაპობრივი რჩევები ფოტო/დოკუმენტებისთვის; პროგრესი და ETA.
შეცდომები „ბუნდოვანი/ბლიკი/მოჭრილი“ - კორექტირების მაგალითებით.
ნეიტრალური ტონი, იუმორი არ არის.

13) დეფექტების სერიოზულობის შეფასება

Blocker: შეუძლებელია ძირითადი დავალების დასრულება (კლავიატურა/სკრინრიდი).
კრიტიკული: კრიტიკული ფუნქციონირება მუშაობს, მაგრამ სერიოზული ბარიერებით.
მაიორი: ერევა, არის გზა.
მინორი: კოსმეტიკა/ჰაიდების შეუსაბამობა დავალებაზე გავლენის გარეშე.

თითოეული დეფექტი არის WCAG კრიტერიუმის ბმული და რეპროდუქციული სცენარი.

14) მიღების კრიტერიუმები (Done Done, A11y)

კლავიატურის სცენარის გავლა მაუსის გარეშე 100% -ით.
axe/Lighthouse: არ არსებობს კრიტიკული/მაღალი დარღვევები.
AA- ს კონტრასტი ყველა თემაში/შტატში.
საკვანძო ტრასების ეკრანული რგოლი (ნავბარი, ფორმები, მოდალები, სადღეგრძელოები).
A11y დოკუმენტაცია ახალი კომპონენტებისთვის/fich (როლური მოდელი, aria, ფოკუსი, მაგალითები).
A11y ტესტების რეგრესია მწვანეა CI- ში.

15) პროცესები და ავტომატიზაცია

შემუშავებამდე: A11y კრიტერიუმები დავალებებში, მოდელები ფოკუსის/შეცდომების პირობებით.
განვითარებაში: linters/ach ადგილობრივ შეკრებაში; კონტრასტების/ფოკუსის ვიზუალური დარტყმები.
CI: pa11y/axe სკანი კრიტიკულ გვერდებზე; Blocker/Critical- ის ბილეთის ვარდნა.
გამოშვების შემდეგ: კვარტალური აუდიტი, მომხმარებლის საჩივრების მონიტორინგი A11y tegu- ზე.

16) ანტი შაბლონები

პლეიშოლდერი ლაბელის ნაცვლად.
'div' ნაცვლად 'button '/' a'.
გამორთული ფოკუსის რგოლები „სილამაზის გულისთვის“.
ფერი, როგორც სტატუსის ერთადერთი მატარებელი.
მოდალკი ფოკუს ტრეპის გარეშე/ESC.
მობილური მასშტაბის აკრძალვა.
„შეცდომა 400/500“ ადამიანის ახსნის გარეშე.

17) ტესტის სკრიპტის შაბლონები

სცენარი 1 - კლავიატურის ნავიგაცია (გვერდი ფორმის)

1. Tab პირველ ველში, შეიყვანეთ მონაცემები.
2. Shift + Tab უკან - დარწმუნდით სწორად.
3. გამოიძახეთ ვალიდაცია (subit) - ფოკუსი გადადის პირველ შეცდომაზე.
4. დახურეთ მოდალური კლავიშები ESC- ით, ფოკუსი დაუბრუნდა ინიციატორს.

სცენარი 2 - Scrinrider (გადახდის გვერდი)

1. დააჭირეთ გვერდის სათაურს (h1), მოუსმინეთ სექციებს.
2. შეარჩიეთ მეთოდი - ისმის როლები/სახელმწიფოების გამოცხადება.
3. შეგნებულად დაუშვათ თანხის შეცდომა - შეტყობინება წაიკითხა და უკავშირდება ველს.
4. წარმატებული საფასურის სადღეგრძელო გამოცხადდა 'polite'.

სცენარი 3 - დინამიკა

1. დაშიფვრის ოპერაცია, მოლოდინი> 3 წმ - არსებობს ტექსტი პროცესის შესახებ/ETA.
2. ქსელის შეცდომით - ბანერი 'assertive', რომელიც კლავიატურიდან არის შესაძლებელი, არსებობს გზა „განმეორება/დახმარება“.

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>

მოდალკა (სემანტიკური ატრიბუტები)

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. ინსტრუმენტები: საბრძოლო ხომალდების/axe/pa11y/Lighthouse- ის კონფიგურაცია ადგილობრივად და CI- ში.
4. ტრენინგი: მოკლე ჰაიდები დიზაინერების/დეველოპერებისთვის/საავტორო უფლებებისთვის.
5. მფრინავი: შეაკეთეთ 3-5 ყველაზე გავრცელებული დეფექტი (მოდალები, ფორმები, სადღეგრძელოები).
6. რეგლამენტი: DoD A11y კრიტერიუმებით; კვარტალური აუდიტი.

საბოლოო ყალბი ფურცელი

შეამოწმეთ კლავიატურა, ფოკუსი, კონტრასტები, სკრინრიდერი, დინამიკა.
გამოაცხადეთ სტატუსები aria-live- ით; შეცდომები უკავშირდება სფეროებს.
პატივისცემით reduce motion, არ კრძალავს მასშტაბს.
იფიქრეთ სემანტიკაზე (ჭდეები/როლები) და არა „როგორ გამოიყურება“.
შემოწმების ავტომატიზაცია, მაგრამ ყოველთვის შეავსეთ ხელით.
დაფიქსირდა დეფექტები WCAG- ს მითითებით, სერიოზულობა და რეპროდუქციის სცენარი.