Ինչպես դարձնել քո կայքը հասանելի. WCAG 2.2 մեկնարկային ուղեցույց

Կայքը հասանելի դարձնելու համար կառուցիր այն այնպես, որ մարդիկ կարողանան օգտագործել այն ստեղնաշարով, էկրանի ընթերցիչով, մեծացումով կամ անջատիչ սարքով, ինչպես նաև մկնիկով. օգտագործիր իրական HTML տարրեր կոճակների, հղումների, վերնագրերի և ձևի պիտակների համար, տուր նկարներին իմաստալից alt տեքստ, պահիր տեքստի կոնտրաստը բարձր և դարձրու ֆոկուսը տեսանելի։ Նպատակը WCAG 2.2 Level AA-ն է։ Ավտոմատ ստուգիչները բռնում են խնդրի մի մասը, իսկ տասը րոպեանոց ստեղնաշարի և էկրանի ընթերցիչի փորձարկումը՝ մեծ մասը մնացածի։

Ինչ է նշանակում «հասանելի» գործնականում

Մատչելիությունը մարդկանց մասին է. մեկը, ով կույր է և օգտագործում է էկրանի ընթերցիչ, մեկը, ով դողում է և նավարկում է ստեղնաշարով, մեկը, ով թույլ տեսողություն ունի և մեծացնում է մինչև 200%, մեկը, ով կարդում է պայծառ արևի տակ, մեկը, ով ժամանակավորապես կոտրած դաստակ ունի։ Լավ մատչելիությունը սովորաբար բարելավում է կայքը բոլորի համար. ավելի հստակ կառուցվածք, ընթեռնելի տեքստ, ձևեր, որոնք բացատրում են իրենց սխալները։

Համեցման ստանդարտը W3C-ի Web Content Accessibility Guidelines (WCAG) է։ 2026 թվականի սեպտեմբերի դրությամբ ընթացիկ տարբերակը WCAG 2.2 է (հրապարակվել է 2023 թվականի հոկտեմբերին, թարմացվել՝ 2024-ի դեկտեմբերին). WCAG 3-ը վաղ նախագիծ է։ WCAG-ը կազմակերպված է չորս սկզբունքների շուրջ. բովանդակությունը պետք է լինի ընկալելի, գործարկելի, հասկանալի և ամուր — և ունի երեք համապատասխանության մակարդակ.

Օրենքները մի քանի վայրերում հղում են անում WCAG-ին. օրինակ՝ Եվրոպական մատչելիության ակտը, որը 2025 թվականի հունիսից կիրառվում է ԵՄ-ում սպառողներին ուղղված թվային ծառայությունների մեծ մասի վրա։ Թե որ կանոններն են կիրառվում քեզ վրա, կախված է նրանից, թե որտեղ ես գործում և ինչ ես վաճառում. եթե անորոշ ես, խորհրդակցիր խորհրդատուի հետ։ Այս ուղեցույցը ծածկում է գործնական աշխատանքը։

Ընտրանքներ. ինչպես հասնել այնտեղ

Փոքր կայքերի մեծ մասի համար առաջին երկուսը բավարար են. ասա AI-ին կառուցել մատչելիորեն սկզբից և աուդիտ արա գործարկումից առաջ։

Ամենակարևոր շտկումները

Օգտագործիր ճիշտ HTML տարրերը

Մատչելիության մեծ մասը գալիս է ճիշտ HTML-ից անվճար։ <button>-ը ֆոկուսվող է, աշխատում է Enter-ով և Space-ով և հայտարարվում է որպես կոճակ։ <div>, որին կցված է կլիկի հանդլեր, ոչ մի դրանցից չէ։ AI-ի գեներացված կոդը երբեմն օգտագործում է ոճավորված div-եր ամեն ինչի համար. խնդրիր իմաստային տարրեր.

• <button> գործողությունների համար, <a href> նավիգացիայի համար
• Մեկ <h1> յուրաքանչյուր էջի վրա, ապա <h2>, <h3> ճիշտ հերթականությամբ. էկրանի ընթերցիչի օգտատերերը ցատկում են վերնագրերի միջև
• Նշանակետեր (landmarks). <header>, <nav>, <main>, <footer>
• <label>, կապված յուրաքանչյուր ձևի դաշտի հետ
• Էջի լեզուն <html lang="en">-ում

Օգտագործիր ARIA հատկությունները միայն այն դեպքում, երբ ոչ մի բնիկ տարր չի տեղավորվում. օրինակ՝ հատուկ ներդիրների հավաքածուի կամ combobox-ի համար։ Սխալ ARIA-ն ավելի վատ է, քան ընդհանրապես չլինելը։

Ստեղնաշարի մատչելիություն և տեսանելի ֆոկուս

Ամեն ինչ, ինչ կարող ես անել մկնիկով, պետք է աշխատի միայն ստեղնաշարով (WCAG 2.1.1). սեղմիր Tab էջի վրա. յուրաքանչյուր հղում, կոճակ և դաշտ պետք է հասանելի լինի տրամաբանական հերթականությամբ, և միշտ տեսնես, թե որտեղ է ֆոկուսը (2.4.7 Focus Visible)։ WCAG 2.2-ը ավելացրեց, որ ֆոկուսված տարրը չպետք է ամբողջությամբ թաքնված լինի կպչուն վերնագրերի կամ cookie բաններների հետևում (2.4.11, Level AA)։

Սովորական ձախողումներ. մենյուներ, որոնք բացվում են միայն hover-ով, մոդալներ, որոնք չեն պահում ֆոկուսը կամ չեն փակվում Escape-ով, և CSS-ում outline: none առանց փոխարինող բանի։

Տեքստային այլընտրանքներ

Յուրաքանչյուր իմաստալից նկար պետք է ունենա alt տեքստ, որ ասում է, թե ինչ է ցույց տալիս համատեքստում («Խոհարարը պատրաստում է դեգուստացիոն ճաշացանկը», այլ ոչ թե «image1.jpg»)։ Դեկորատիվ նկարները ստանում են դատարկ alt="", որպեսզի էկրանի ընթերցիչները բաց թողնեն դրանք։ Միայն պատկերակ ունեցող կոճակները պետք է ունենան մատչելի անուն («Փակել», «Որոնել»)։ Տեսանյութերը պետք է ունենան ենթագրեր, աուդիոն՝ սղագրություն։

Գույն և կոնտրաստ

WCAG 2.2 AA-ն պահանջում է կոնտրաստի առնվազն 4.5:1 հարաբերակցություն սովորական տեքստի համար և 3:1 մեծ տեքստի համար (1.4.3), և 3:1 ինտերֆեյսի մասերի համար, ինչպիսիք են մուտքի եզրագծերը և իմաստալից պատկերակները (1.4.11)։ Բաց մոխրագույն placeholder տեքստը և գունատ կոճակները սովորական ձախողումներ են։ Նաև երբեք մի օգտագործիր միայն գույնը իմաստ փոխանցելու համար. սխալ դաշտի կարմիր եզրագիծը պետք է ունենա նաև սխալի հաղորդագրություն։

Չափի փոփոխում և վերադասավորում

Տեքստը պետք է մնա օգտագործելի, երբ մեծացվում է մինչև 200% (1.4.4), և բովանդակությունը պետք է աշխատի 320 CSS պիքսել լայնությամբ՝ առանց կողքային ոլորման (1.4.10)։ Պատշաճ ադապտիվ դասավորությունը այս մեծ մասը ծածկում է։

Թիրախի չափը, ձևերը և սխալները

• Թիրախի չափ։ WCAG 2.2 AA-ն պահանջում է ցուցիչի թիրախներ առնվազն 24 × 24 CSS պիքսել կամ բավարար տարածություն փոքրերի շուրջ (2.5.8)։ Ավելի մեծը ավելի բարի է հեռախոսների վրա։
• Ձևեր. տեսանելի պիտակներ (ոչ միայն placeholder), հստակ հրահանգներ և սխալների հաղորդագրություններ, որ ասում են, թե ինչն է սխալ և ինչպես շտկել, դաշտի կողքին։
• Մուտք։ մի ստիպիր մարդկանց լուծել գլուխկոտրուկ կամ ընդօրինակել կոդ՝ առանց այլընտրանքի. թույլ տուր գաղտնաբառի մենեջերներին և տեղադրմանը (3.3.8 Accessible Authentication)։

Հուշումներ, որոնք աշխատում են

Կառուցիր այս կայքը WCAG 2.2 Level AA-ին համապատասխան. իմաստային HTML նշանակետեր, մեկ h1 յուրաքանչյուր էջի վրա, վերնագրերը ճիշտ հերթականությամբ, իրական button և link տարրեր, պիտակներ յուրաքանչյուր ձևի դաշտի վրա, տեսանելի ֆոկուսի ոճեր, տեքստի կոնտրաստ առնվազն 4.5:1, alt տեքստ իմաստալից նկարների վրա և alt="" դեկորատիվների վրա, և html lang սահմանված։

Աուդիտ արա /signup և /checkout էջերը մատչելիության համար։ Ստուգիր միայն ստեղնաշարով օգտագործումը, ֆոկուսի հերթականությունը, տեսանելի ֆոկուսը, պիտակները, սխալների հաղորդագրությունները, կոնտրաստը և էկրանի ընթերցիչի անունները պատկերակային կոճակների համար։ Թվարկիր յուրաքանչյուր խնդիր WCAG չափանիշով, ապա շտկիր դրանք՝ առանց դիզայնը ավելի քան անհրաժեշտ փոխելու։

Բջջային մենյուն չի կարող օգտագործվել ստեղնաշարով։ Դարձրու այն կոճակ aria-expanded-ով, երբ բացվում է, տեղափոխիր ֆոկուսը մենյու, փակիր Escape-ով և վերադարձրու ֆոկուսը կոճակին։

Քայլ առ քայլ

1. Կատարիր ավտոմատ ստուգում։ Lighthouse-ի Accessibility բաժինը Chrome DevTools-ում, կամ axe բրաուզերի ընդլայնումը, յուրաքանչյուր հիմնական էջի վրա։ Շտկիր այն ամենը, ինչ նշում է։
2. Անջատիր մկնիկը։ Tab-ով անցիր յուրաքանչյուր էջով. կատարիր յուրաքանչյուր հիմնական գործողություն՝ գրանցում, որոնում, վճարում։ Նշիր այն ամենը, ինչին չես կարողանում հասնել, ֆոկուսը տեսնել կամ որից չես կարողանում դուրս գալ։
3. Մեծացրու մինչև 200% և նեղացրու պատուհանը մինչև հեռախոսի լայնություն։ Ոչինչ չպետք է կտրվի կամ պահանջի կողքային ոլորում։
4. Փորձիր էկրանի ընթերցիչ տասը րոպե. VoiceOver Mac-ի և iPhone-ի վրա, TalkBack Android-ի վրա, կամ NVDA Windows-ի վրա (անվճար)։ Լսիր վերնագրերը, հղումները և ձևի դաշտերը։ «Button» առանց անվան, կամ «link, click here», նշանակում է աշխատանք, որ պետք է կատարվի։
5. Ստուգիր կոնտրաստը տեքստի, կոճակների և մուտքերի համար կոնտրաստի ստուգիչով։
6. Շտկիր, ապա նորից փորձիր նույն գործողությունները։
7. Հրապարակիր մատչելիության հայտարարություն, որ ասում է, թե ինչ ստանդարտ ես նպատակ դնում և ինչպես հաղորդել խնդիրների մասին. և պատասխանիր այդ հաղորդումներին։

Սովորական սխալներ

• Overlay վիջեթի վրա հենվելը՝ կոդը շտկելու փոխարեն։
• Ֆոկուսի եզրագծերի հեռացումը, որովհետև անկանոն են թվում, առանց փոխարինողի։
• Placeholder տեքստը՝ որպես միակ պիտակ։ Այն անհետանում է, երբ մարդը սկսում է գրել, և հաճախ ունի ցածր կոնտրաստ։
• «Click here» և «Read more» հղումներ։ Համատեքստից դուրս էկրանի ընթերցիչի օգտատերերը լսում են նույնական հղումների ցանկ։
• Alt տեքստ՝ բանալի բառերով լցված։ Alt տեքստը մարդկանց համար է. նկարագրիր նկարը։
• Միանգամ փորձարկելը։ Յուրաքանչյուր նոր գործառույթ կարող է կոտրել ստեղնաշարային մատչելիությունը։ Ավելացրու ստեղնաշարի անցում քո նախագործարկային փորձարկման մեջ։

Մատչելիության ստուգաթերթ

• Ավտոմատ ստուգում (Lighthouse կամ axe) մաքուր հիմնական էջերի վրա
• Յուրաքանչյուր գործողություն կատարվում է միայն ստեղնաշարով
• Ֆոկուսը միշտ տեսանելի է և երբեք թաքնված չէ կպչուն տարրերի հետևում
• Իմաստային վերնագրեր, նշանակետեր, կոճակներ և հղումներ; lang սահմանված է
• Իմաստալից alt տեքստ. դեկորատիվ նկարները alt=""; ենթագրեր տեսանյութի համար
• Տեքստի կոնտրաստ ≥ 4.5:1 (մեծ տեքստ ≥ 3:1); ինտերֆեյսի մասեր ≥ 3:1
• Աշխատում է 200% մեծացման և 320 px լայնության դեպքում
• Յուրաքանչյուր ձևի դաշտ ունի տեսանելի պիտակ և հստակ սխալների հաղորդագրություններ
• Մատչելիության հայտարարություն՝ խնդիրներ հաղորդելու ճանապարհով

Այս հասկացությունների հիմքում ընկած բաների համար կարդա ինչ է վեբ մատչելիությունը։ Մատչելի դիզայնը և լավ դիզայնը մեծապես համընկնում են. ինչպես նախագծել գեղեցիկ հավելված AI-ով ծածկում է տեսողական կողմը։

Մատչելիությունը Mythex-ում

Mythex-ը կառուցում է այն ստանդարտով, որ խնդրում ես, ուստի առաջին հուշման և հետագա հարցումների մեջ գրիր «WCAG 2.2 AA»։ Կարող ես օգտագործել Preview-ի հեռախոսային չափի շրջանակը՝ փոքր էկրանները ստուգելու համար (Preview և Code), բայց ստեղնաշարի, մեծացման և էկրանի ընթերցիչի թեստերն ավելի լավ են աշխատում հրապարակված URL-ի կամ իր սեփական ներդիրում բացված նախադիտման վրա։ Խնդրիր գործակալին աուդիտ անել էջը, շտկել այն, ինչ գտնում է, ապա ինքդ փորձիր շտկումները. ավտոմատ անցումը սկիզբ է, ոչ թե հաստատում։

Հարցեր