Ինտերֆեյսների հասանելիության փորձարկումը

1) Ինչու՞ և ինչ ենք կարծում «պատրաստ»

Հասանելիությունը (A1y) չափված պայմանների հավաքածու է, որտեղ ապրանքը հավասարապես հասկանալի է և կառավարվում է մարդկանց համար, ովքեր ունեն ընկալման և շարժիչների, սարքերի և ենթատեքստերի տարբեր առանձնահատկություններ։ Պատրաստ է նշանակում

պատրաստված են WCAG 2 չափանիշները։ 1/2. Երկու AA մակարդակ ռուսական պլատֆորմների համար;

ինտերֆեյսը ամբողջովին անցնում է ստեղնաշարից;

ճիշտ աշխատանք սկրինիդերների հետ;

հակադրությունները համապատասխանում են ստանդարտներին.

բոլոր վիճակները/սխալները հասանելի են առանց տեսողության և առանց մկնիկի։

հաշվի առնել, RTL, reduce motion և բջջային հատկությունները։

2) Թեստավորման ռազմավարությունը (A1y բուրգը)

1. Ավտոտեստներ/ոսպնյակներ (արագ ծածկումը մինչև խնդիրների դասարանների 40-60 տոկոսը)։

2. Պաթոգենների ձեռքով ստուգումը (ստեղնաշար, ֆոկուս, բովանդակություն, տրամաբանություն)։

3. Assistive Tech (AT) նստաշրջան 'սկրինդերներ, մասշտաբներ, գունային ֆիլտրեր։

4. Դաշտային փորձարկումներ օգտագործողների հետ (հնարավորության դեպքում)։

Նպատակը 'բռնել համապատասխան թերությունները բաղադրիչների/պաթոգենների մակարդակում, որպեսզի չարտապատկվեն։

3) Հիմնական ստուգումների չեկի թերթիկը (արագ պրոգոն)

• Ստեղնաշար ՝ ամեն ինչ հասնում է տաբի/սլաքների; ֆոկուսի կարգը տրամաբանական է. մոդալներում ճոճանակ կա։ ESC/Enter/Space աշխատում են։
• Ֆոկուս ցուցիչը տեսնում ենք ցանկացած թեմայում/ցանկացած ֆոնի վրա։
• Հակադրություն ՝ թիվ 4 տեքստը։ 5:1 (սովորական), 243:1 (մեծ), իկոնիկները/վերահսկիչները կարդացված են։
• Սեմանտիկա 'ճիշտ թեգեր («button», «a», «label», «ul/li», «th/td»), դերեր և «aria-» միայն անհրաժեշտության դեպքում։
• Scrinrider: Հիերարխիայի վերնագրեր, կոճակների/հղումների իմաստային անուններ, պատկերների/պատկերների այլընտրանքներ։
• Ձևեր ՝ ակնհայտ «label», հուշումներ/սխալներ կապված են («aria-describedby»), սխալների տեքստերը կոնկրետ են։
• Դինամիկա 'tosts/banners/սխալներ հայտարարվում են "aria-international" ("polite '/" assertive") միջոցով։
• Անիմացիաները հարգում են «wwww.fers-reduced-motion»; առանց «հյուսելու» ինտերֆեյսի։
• Տեղայնացումը/RTL: հիմնական էկրանները հավասարեցված են, թվերը/ամսաթվերը/արժույթը կարգավորվում են անջատումներով։
• Շարժունակություն '44-44 px, zum արգելված չէ, էկրանի շրջադարձը չի կոտրում բովանդակությունը։

4) Դերեր, պատասխանատվություններ և արտեֆակտներ

Դիզայնի համակարգը 'A1y պահանջները յուրաքանչյուր բաղադրիչի նկարագրության մեջ։

Զարգացողները 'ավտոմեքենաներ, unit/interaction թեստեր A11y-ի հետ։

QA: ձեռքի սցենարներ + AT նստաշրջաններ; զեկույցը լուրջ/արագ է։

UX/Content: microcopy սխալներ/ստատուսներ, բարձրաձայն ընթերցանություն։

Արտեֆակտներ ՝ չեկի թերթիկներ, սցենարներ, AT սքրինքաստներ, WCAG հանրաքվեների թերությունների ցուցակը, առաջարկությունները։

5) Ավտոմատացված ստուգումներ

Լինդերներ/վերլուծողներ ՝ axe, eslint-plugin-jsx-a1y, pa1y, Lightouse։

Ռուսական pline: Մենք արգելափակում ենք PR-ը կրիտիկական խախտումների ժամանակ (role/label/հակադրություն/108-թակարդներ)։

Հակաբիոտիկներ 'տեսողական թեստեր թեմաներով/նահանգներում։

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 Բովանդակություն և microcopy

Մենք կարդում ենք քննադատական տեքստերը բարձրաձայն 'առանց երկիմաստ, առանց «400-ի սխալի»։

Սխալ = «որ ոչ թե + ինչպես շտկել + սահմանափակումը/ձևաչափը»։

6. 4 Դինամիկա և կենդանի տարածքներ

Հաջողության տոստը '"aria-no =" polite ", սխալը'" assertive "։

Առաջընթացը/բեռնումը բացատրվում է տեքստով։ skeleton նախընտրելի է ավելի նախընտրելի է, քան սպինները։

7) Ձևեր և սխալներ (խորը)

Յուրաքանչյուր դաշտ ունի կապված label (ոչ placeholder)։

Սխալները կապված են դաշտի հետ '«aria-medalid =» media «,» aria-describedby = «[id սխալներ]»։

Բանաձևերը (ամսաթիվը, հեռախոսը) նախօրոք նշվում են. դիմակները չեն կոտրում մուտքագրումը/ներդիրը։

Ընդհանուր սխալների դրոշը, երբ անջատվում է it + avto-scroll և առաջին սխալի վրա։

Սխալների տեքստերը 'կոնկրետ, առանց տեխնոլոգիական ժարգոնի։

8) Սեղաններ, ցուցակներ, գրաֆիկներ

Աղյուսակներ ՝ "th's's 'scope =" col/row ", ստորագրություններ, ռեզյումեներ։

Ցուցակները իրական «ul/ol/li» են, մի փչեք։

Գրաֆիկները այլընտրանքային սեղաններ/նկարագրություններ են։ լեգենդները հասանելի են. գույները միակ ազդանշանն են։

9) Մուլտիմեդիա և անիմացիա

Տեսահոլովակը 'ենթածրագրեր/ապակոդավորում; ստեղնաշարից կառավարումը; առանց շարժիչի (կամ հանգիստ)։

GIF/միկրո անիմացիա. Մենք անջատում ենք «www.fers-reduced-motion»; խուսափում ենք բռնկումներից։

Թրթռումներ/հնչյուններ 'հակաբիոտիկ և կրկնօրինակվում են տեսողական/տեքստով։

10) Բջջային հասանելիությունը

Ինտերակտիվ թիվ 44-44 px, բավարար ընդմիջումներ։

Մեծացումը չի արգելվում (meta view.ru առանց «user-scalable = www.ru»)։

Ձևը/ստեղնաշարը 'ճիշտ տեսակներ («tel», «email», «nummium»), չի թաքցնում տեխնիկական հնարավորությունները։

Ստուգումը մութ թեմայում և համակարգային տառերով «ավելին»։

11) Տեղայնացում, թվեր և RTL

Տողերը i18n-բանալիների միջոցով համատեքստով։ Երկար լեզուները (DE/TR) չեն կոտրում մոդելը։

Դելդաթ/վալուտներ - ուտել, ոչ թե տող։

RTL-ռեժիմը 'հացահատիկ նավիգացիայի իկոններին, ստուգում ենք ֆոկուսի և կարետայի կարգը, երկչոտ մուտքագրումը։

12) Քննադատական ֆլոուի առանձնահատկությունները (iGaming)

Վճարումներ/եզրակացություններ

Հստակ հրահանգներ, սահմանումներ/ժամկետներ/- տեքստը։

Պրովայդերի սխալները հստակ հայտարարվում են առանց գործողությունների։ գործողության այլընտրանք կա։

Վիրահատության ապացույցը 'տրամաբանական CTA-ի վրա կենտրոնացումը, ինտեգրման հնարավորությունը։

KUS/veriation

Կոպիտ հուշումներ լուսանկարների/փաստաթղթերի համար։ առաջընթաց և ETA։

Սխալները «կոտրված/բլիկ/կտրված» 'ուղղման օրինակներով։

Չեզոք երանգ, հումոր։

13) Թերությունների լրջությունը գնահատելը

Blocker: Անհնար է ավարտել ռուսական առաջադրանքը (ստեղնաշար/սկրինիդեր)։

Critical: կրիտիկական ֆունկցիոնալը աշխատում է, բայց ռուսական խոչընդոտների հետ։

Major 'խանգարում է, կա շրջանցիկ ճանապարհ։

Minor: կոսմետիկա/անհամապատասխանություն տենդներին առանց խնդրի վրա ազդելու։

Յուրաքանչյուր թերություն հղում է WCAG-ի չափանիշներին և վերարտադրված սցենարը։

14) Ընդունելու չափանիշները (Done of Done, A11y)

Ստեղնաշարի սցենարի անցումը առանց մկնիկի 100 տոկոսով։

axe/Lighthouse: չկան քննադատական/բարձր խախտումներ։

AA-ի հակադրությունը բոլոր թեմաներում/։

Սկրինիդեր-գոթոն հիմնական ճանապարհները (նաբար, ձևեր, մոդելներ, տոստներ)։

DirectA1y-ը նոր բաղադրիչների/ֆիչի համար (ռելեային մոդել, aria, ֆոկուս, օրինակներ)։

A1y-թեստերի ռեգրեսիա կանաչ CI-ում։

15) Գործընթացներ և ավտոմատիզացիա

Մինչ զարգացումը 'A11y-չափանիշները առաջադրանքներում, մոդելները ֆոկուսի/սխալների հետ։

Զարգացման մեջ 'ոսպնյակներ/աահ տեղական հավաքման ժամանակ; հակաբիոտիկներ/ֆոկուսներ։

CI: pa11y/axe-սկանը կրիտիկական էջերով։ Blocker/Critical։

Թողարկումից հետո 'եռամսյակային աուդիտներ, A11y-tegu-ի օգտագործողների բողոքներ։

16) Anti-patterna

Պլեյշոլդերը label-ի փոխարեն։

«dom» -ի փոխարեն «button »/« a»։

Անջատված ֆոկուս օղակները «գեղեցկության համար»։

Գույնը որպես կարգավիճակի միակ կրողը։

Մոդալները առանց ֆոկուս-տրեպի/ESC-ի։

Mobile-ի վրա մեծացման արգելքը։

«Սխալ 400/500» առանց մարդկային բացատրության։

17) Փորձարկման մեթոդները

Սցենարը 1 - Ստեղնաշարային ռոտացիա (էջ ձևով)

1. Tab-ը մինչև առաջին դաշտը, մուտքագրեք տվյալները։

2. Shift + Tab ետ 'համոզվել ճիշտ կարգով։

3. Զանգահարեք վալիդացիան (քլորիդ) - ֆոկուսը տեղափոխվում է առաջին սխալի։

4. Փակեք ESC բանակի մոդելը, ֆոկուսը վերադարձավ նախաձեռնությանը։

Սցենարը 2 - Սկրինիդեր (էջ 112)

1. Գնացեք էջի վերնագրին (h1), լսեք բաժինները։

2. Բացեք մեթոդի ընտրությունը 'դերերի/պետությունների հայտարարությունը լսելի է։

3. Գիտակցաբար թույլ տվեք գումարի սխալը, հաղորդագրությունը կարդացված է և կապված է դաշտի հետ։

4. Պլատինի հաջողակ տոստը հայտարարվում է «polite»։

Սցենարը 3 - Դինամիկա

1. Վիրահատությունը սպասելով> 3 s - կա գործընթացի/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. Դիզայնի համակարգի ուղղությունները 'ավելացնել A1y-բաժինը յուրաքանչյուր բաղադրիչի համար։

3. Գործիքներ 'տեղադրեք ոսպնյակներ/axe/pa1y/Lighthouse տեղական և CI-ում։

4. Ուսուցում 'կարճ մրցույթներ դիզայներների/մշակողների/կոպիրայիստների համար։

5. Օդաչուն '3-5 ամենատարածված թերությունները (մոդելներ, ձևեր, տոստներ)։

6. Կլեմենտ ՝ DoD A1Y չափանիշներով։ եռամսյակային աուդիտ։

Գլամուրային փուչիկ

Ստուգեք ստեղնաշարը, ֆոկուսը, հակադրությունները, սկրինիդերը, դինամիկան։

Հայտարարեք կարգավիճակները aria-2019 միջոցով։ սխալները կապված են դաշտերի հետ։

Հարգեք reduce motion-ը, մի արգելեք մեծացումը։

Մտածիր սեմանտիկայի (թեգեր/դերեր), ոչ թե «նման»։

Ավտոմատիզացրեք ստուգումները, բայց միշտ լրացրեք ձեռքով։

Գրանցեք թերություններ, որոնք հղում են WCAG-ին, լուրջ և սցենարը։