UX հասանելիություն և ինտերֆեյսներ բոլորի համար

11) i18n, lokali և RTL

Express 'lang' httml-արմատի վրա։ Տեղական թվեր/դատ/արժույթ։

RTL աջակցություն (արաբերեն/եբրայերեն) 'սրբապատկերների հացահատիկ, նավիգացիայի կարգը, կուրսորները։

Խուսափեք հեգնական բառերից (տեքստը պետք է թարգմանվի)։

Պարզ ձևակերպումներ, խուսափել ժարգոնից։ տերմինների գլոսարիա։

12) Ժամանակը, նստաշրջանները, գլխարկները և այլընտրանքները

Թայմաուտները նախազգուշացում և երկարացնելու հնարավորություն ունեն։

CAPTCHA: Նախընտրեք այլընտրանքներ (հարցեր, անտեսանելի բոտերի վերլուծիչներ, փոստով/հեռախոսով); եթե օգտագործում եք տեքստային այլընտրանք և ոչ միայն տեսողական։

Վավերացում 'գաղտնաբառերի ղեկավարների աջակցություն, «գաղտնաբառ ցույց տալ», LentAuthn։

13) Սենսորային և շարժիչային խախտումների հասանելիությունը

Ժեստերը պետք է ունենան կլիկի/ստեղնաշարի համարժեքներ։

Մի՛ պահանջեք երկար պահեր/կրկնակի տափաստաններ առանց այլընտրանքի։

«Pointer cancellation», գործողությունը պետք է իրականացվի արձակուրդի վրա, ոչ թե «սեղմման» վրա, որպեսզի հնարավորություն տա վերացնել։

14) Վիճակներ, ծանուցումներ և ալտերտեր

Օգտագործեք 'role = «status »/» alment» դինամիկ հաղորդագրությունների համար։

Մի արգելափակեք «կպչուն» բանկերների ֆոկուսը։

To.ru-ծանուցումները 'դադարի հետ ֆոկուսով/hover-ով և ստեղնաշարի հասանելիությամբ։

15) Թեստ պլանը (ձեռքով և մեքենա)

Ձեռքի (նվազագույն)

Անցնել բոլոր հիմնական սցենարները միայն ստեղնաշարով։

Ստուգել ֆոկուսի տեսանելիությունը յուրաքանչյուր տարրի վրա։

Մեծացնել մասշտաբը մինչև 200 տոկոսը, ինտերֆեյսը մնում է ֆունկցիոնալ առանց հորիզոնական սկրոլի։

Միացրեք համակարգային ռեժիմը «շարժման նվազեցումը», անիմացիաները չեն խանգարում։

Անցնել սցենարը սկրինիդերի հետ (NVDA/VoicOver), համոզվել ճիշտ դերերում/ստանդարտներում։

Ավտոտեստներ (CI)

Լինտի հասանելիությունը բաղադրիչների մակարդակում։

Հակադրության ստուգումը, տեքստերի պարունակությունը, վերնագրերի, ARIA-ի վավերականությունը։

Սեմանտիկայի սարքավորումը (role tree) կրիտիկական էկրանների համար։

16) Հասանելիության որակի մետրերը

A1y Coverage 'բաղադրիչների մասնաբաժինը անցնող չեկի տերևներով։

Keyboard-only Pass Rate-ը ստեղնաշարով անցնող փաթեթների տոկոսն է։

Direct Violae/1k տարրեր։

SR Flow Time-ը սկրինիդերի հետ սցենարի անցնելու ժամանակն է։

User-feedback: բողոքներ հասանելիության, արձագանքի և շտկման մասին։

17) Բաղադրիչի չեկի թերթիկը

• Ճիշտ սեմանտիկան/դերը առանց ավելցուկ ARIA-ի
• Ստորագրված կոմպոզիցիաները '«aria-» ճիշտ են
• Ստեղնաշարի ամբողջական կառավարում, տեսանելի ֆոկուս
• Տեքստի/սրբապատկերների/սահմանների հակադրություն նորմայում
• Սխալներն ու վիճակը բարձրաձայնվում են սկրինիդերի կողմից
• Հարգանք wwww.fers-reduced-motion
• Կլիկաբելային տարածքի չափը 40-48 px է
• Տեղայնացումը և RTL-ը չեն կոտրում մոդելը

18) Anti-patterna

«Դիվ կոճակները» առանց դերի/ստեղնաշարի։

Foxus 'entine: none' առանց այլընտրանքի։

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

Սխալները միայն գունավոր են։

Մոդալները առանց ֆոկուսի ծուղակի և առանց «Esc»։

Delag-only առանց ստեղնաշարի։

Երկար մեքենաներ/զուգահեռ առանց տարբերակի անջատման։

19) Դերեր և գործընթաց

A11y սեփականատերը թիմում (Cort/Design/Dev)։

Definishn-of-dan (DoD) ներառում է հասանելիություն։

Դիզայնի հեղափոխություն 'հակադրության, ֆոկուսի, պիտակների ստուգում։

Կոդ-ռևոը 'սեմանտիկա/ARIA, ստեղնաշարի թեստ։

Ռուսական աուդիտները և բարելավման պլանը։

20) Մուտացիաների ներդրումը

Իտերացիա 1 - Հիմքը (երկու շաբաթ)

Սեմանտիկա/վերնագրեր, հակադրություն, ֆոկուս և ստեղնաշար, հիմնական ձևեր և սխալներ։

Iteration 2-Ինտերակտիվ (3-4 շաբաթ)

Մոդալները, տաբերը/ակորդեոնները, սեղանները/գրաֆիկները տեքստային ռեզյումեներով, վիդեո ենթագրերով, նվազեցված անիմացիա։

Iteration 3 - Մասշտաբը և վերահսկումը (անընդհատ)

Ավտոմեքենաներ 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>

Հարգանք ռուսական fers-reduced-motion

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-ը։

Արդյունքը

Հասանելիությունը համակարգային կարգապահություն է 'սեմանտիկ/ֆոկուս, հակադրություն/գույն/սխալի/սխալի www.i18n/RTL/RTL։ Դարձրեք DoD-ի և թիմի մշակույթի մի մասը, և ձեր արտադրանքը կդառնա իսկապես համընդհանուր, հուսալի և հարմար բոլորի համար։