> - նպատակային։
Վերնագրերի հիերարխիա 'մեկ'
> էջի վրա, ապա տրամաբանական կառուցվածքը '' ։
Landmarks: <>, >,
ARIA-ն միայն անհրաժեշտության դեպքում '«role», «aria-label», «aria-describedby», «aria-expanded», «aria-2019»։
Վիճակը/սխալները «aria-medalid», «aria-errormessage» -ի միջոցով։
4) Ստեղնաշար և ֆոկուս-կառավարում
Ստեղնաշարի ամբողջական կառավարումը '«Tab/Shift + Tab» - կարգ, «Enter/Space» - ակտիվացնել, «Esc» - ելքը։
Տեսանելի ֆոկուսը միշտ. չթողնել ինտերֆեյսը։
Ֆոկուսի թակարդները 'մոդալներում, ցիկլային ֆոկուսն է, որը փակվելուց հետո կենտրոնանում է աղբյուրի վրա։
Թաքնված տարրերը չպետք է մտնեն ստանդարտ կարգի մեջ ("www.play: none", "aria-hidden =" www.ru ")։
Սկիպ հղումները '«Անցեք հիմնական բովանդակությանը» - էջի սկզբում։
5) Գույնը, հակադրությունը և տպագրությունը
Տեքստի հակադրություն 'առնվազն 4։ 5: 1 սովորական տեքստի համար և 3:1 մեծ համար։
Մի ապավինեք միայն գույնին 'կրկնօրինակեք icon/patter/ստորագրությամբ։
Կլիկաբային նպատակների չափը 'առնվազն 40-48 px, բավարար դաշտեր շուրջը։
Տառատեսակներ ՝ ընթերցված ներդաշնակություններ, միջտարածաշրջանային 1։ 4–1. 6, 45-90 նշանների տողի երկարությունը։
6) Շարժումը, անիմացիան և էպիլեպտիկ բռնկումը
Հարգեք համակարգային դրոշը wwww.fers-reduced-motion, ավելացրեք պարզեցված անիմացիաներ/անջատեք զուգահեռ։
Խուսափեք չափումներից> 3 անգամ/վ։
Բոլոր մեքենայական շարժումները պետք է ունենան Pause/Stop/Hide։
7) Ձևեր, սխալներ և վալիդացիա
Հստակ կապեք և դաշտերը '
Պլեյշոլդերը պիտակ չէ։
Դաշտի մոտ սխալների մասին հաղորդագրությունները և վերևում սխալների կրճատումը։ կապեք «aria-describedby» -ի միջոցով։
Բացատրեք մուտքագրման ձևաչափը, օրինակ, դիմակը։ նշեք միավորները և արժույթը։
Մի գցեք լցված դաշտերը սխալմամբ։ կենտրոնացեք խնդրահարույց դաշտում։
Օրինակ (հատված)
html
<label for="email">Эл. mail </label>
<input id="email" name="email" type="email" aria-describedby="email-hint email-err">
<div id = "email-hint" class = "hint"> We don't send spam </div>
<div id = "email-err" class = "error" role = "alert"> Specify an address in the format name @ example. com</div>
8) Բաղադրիչներ և ինտերակտիվ 'փամփուշտներ
Հղման կոճակները 'գործողություն =
Տաբա/ակորդեոններ 'նավարկության սլաքներ, «aria-international», «aria-edected»։
Մոդալկի/երկխոսություն ՝ "role =" www.alog "", "aria-modal =" modal ", ֆոկուսի թակարդը," Esc "-ը փակում է։
Tooltip/Popover: ստեղնաշարի հասանելիությունը, թայմաուտները չեն խանգարում կարդալ։
Delag & Drop: Այլընտրանքներ 'կոճակներ «վերև/ներքև», ստեղնաշարի սլաքներ; իրադարձությունները ոչ միայն մկնիկ են։
9) Մեդիա: վիդեո/աուդիո/գրաֆիկա
Տեսահոլովակը 'ենթաթետրեր, ապակոդավորում (transcript), ձայնային նկարագրությունների այլընտրանքային ճանապարհը (AD)։
Աուդիո 'տեքստային ապակոդավորում։
Գծապատկերներ/դիագրամներ ՝ տեքստային ռեզյումե («ամենակարևորը»), տվյալների ցանկը, առանցքների նկարագրական ստորագրությունները։
Կենդանի ոլորտները ՝ "aria-medical =" polite "/" assertive ", զգույշ են, որ" բղավեն "շատ հաճախ։
10) Աղյուսակներ և ցուցակներ
Օգտագործեք
, ստորագրությունները, արդյունքները։
Սառեցված սյունակները/տողերը չեն կոտրել ընթացակարգը։
Մեծ աղյուսակները էջանոց են։ միշտ արտահանեք (CSV/JSON)։
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 "> Confirm action </h2>
<p id = "dlg-desc "> This operation is not reversible. </p>
<button> Cancel </button>
<button> Confirm </button>
</div>
Կոճակը «բաց թողեք բովանդակությանը»
html
<a class =" skip-link" href = "# main"> Go to main content </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-ի և թիմի մշակույթի մի մասը, և ձեր արտադրանքը կդառնա իսկապես համընդհանուր, հուսալի և հարմար բոլորի համար։
Տեսանյութը շուտով կթարմացվի
Տեսանյութը ներկայումս թարմացվում է։
Խնդրում ենք մի փոքր ուշ վերադառնալ — նոր տարբերակը արդեն úտին է։
Այս պահին մենք ծանրաբեռնված ենք նախագծերով
Ներկայում մեր ամբողջ ուշադրությունը կենտրոնացած է ձեր արտադրանքների մշակման և ինտեգրման վրա։
Այնուամենայնիվ, փորձում ենք ժամանակ գտնել նաև սոցիալական ցանցերի համար։ Շատ շուտով բովանդակությունը կթարմացվի — մնացեք կապի մեջ։
|