Ի՞նչ է վեբ մատչելիությունը. WCAG-ը և ներառական դիզայնը բացատրված
Վեբ մատչելիությունը նշանակում է կայքեր և հավելվածներ կառուցել այնպես, որ հաշմանդամություն ունեցող մարդիկ կարողանան օգտագործել դրանք։ լինի դա տեսողության խնդիր ունեցող և էկրանի ընթերցիչ օգտագործող մարդ, նա, ով չի կարող մկնիկ օգտագործել, թույլ տեսողություն կամ գունակուրություն ունեցողը, խուլը կամ ճանաչողական կամ ուսումնական դժվարություններ ունեցողը։ Գործնականում դա հանգում է այնպիսի բաների, ինչպիսիք են պատկերների տեքստային այլընտրանքները, բավարար գունային կոնտրաստը, ճիշտ պիտակներով ձևերը և այն, որ ամեն ինչ աշխատում է միայն ստեղնաշարով։ Դրա միջազգային ստանդարտը WCAG-ն է՝ W3C-ի Web Content Accessibility Guidelines-ը։
Մատչելիությունը հաճախ կրճատվում է որպես a11y։ «a», հետո 11 տառ, հետո «y»։
Ինչու է մատչելիությունը կարևոր AI-ով կառուցելիս
AI կառուցողները լավն են հավելվածներ արտադրելու հարցում, որոնք լավ են երևում։ Մատչելիությունը հիմնականում վերաբերում է այն բանին, ինչը սքրինշոթում չի երևում։ արդյոք կոճակը իրական կոճակ է, արդյոք մուտքի դաշտն ունի պիտակ, որը էկրանի ընթերցիչը կարող է հայտարարել, արդյոք Tab ստեղնով կարելի է հասնել մենյուին։
Որոնց համար է կարևոր հարցնելը։
- Հեշտ է բաց թողնել։ Հատուկ ոճավորված բացվող ցանկը կարող է կատարյալ թվալ և անօգտագործելի լինել առանց մկնիկի։ Դուք դա չեք նկատի, եթե չփորձարկեք։
- Ավելի էժան է վաղ ճիշտ անելը։ Առաջին հուշումից մատչելի կոմպոնենտներ խնդրելը գրեթե արժեք չունի։ Պատրաստի հավելվածը հետագայում շտկելը նշանակում է յուրաքանչյուր էկրանին դիպչել։
- Օգնում է բոլորին։ Ենթագրերը օգնում են աղմկոտ վայրերում գտնվողներին, լավ կոնտրաստը՝ արևի տակ հեռախոս օգտագործողներին, իսկ հստակ պիտակները՝ բոլորին, ովքեր ձևեր են լրացնում ավելի արագ։
- Համընկնում է SEO-ի հետ։ Ճիշտ վերնագրերը, նկարագրական հղումները և alt տեքստը օգնում են նաև որոնման համակարգերին հասկանալ ձեր էջերը. տե՛ս SEO AI-ով կառուցված կայքերի համար։
- Կարող է պարտադիր լինել։ Կախված նրանից, թե որտեղ եք գործում և ում եք սպասարկում, մատչելիությունը կարող է իրավական պարտավորություն լինել։
Առօրյա անալոգիա
Պատկերացրեք շենքի մուտքը։
Աստիճանները շատ մարդկանց համար լավ են աշխատում։ Թեքահարթակը աշխատում է անվասայլակով օգտվողների համար, և նաև՝ կառնիկներով ծնողների, տնակներով առաքիչների և ճամպրուկներով ճանապարհորդների համար։ Ավտոմատ դռները, հստակ նշանները, բրայլյան գրությունը վերելակի կոճակների վրա և լավ լուսավորությունը յուրաքանչյուրը մեկ արգելք է հեռացնում ինչ-որ մեկի համար։
Վեբ մատչելիությունը նույն գաղափարն է թվային տարածությունների համար. ձեր հավելվածի թեքահարթակներն, նշաններն ու բազրիքները։ Եվ ինչպես շենքի դեպքում, թեքահարթակը նախագծում ներառելը շատ ավելի հեշտ է, քան այն բետոնը պնդանալուց հետո ավելացնելը։
WCAG-ը համառոտ
WCAG-ը հրապարակվում է W3C-ի Web Accessibility Initiative-ի կողմից։ Ընթացիկ տարբերակը WCAG 2.2-ն է, որը առաջին անգամ հրապարակվել է 2023 թվականի հոկտեմբերին։ Այն հետընթաց համատեղելի է. WCAG 2.2-ին համապատասխանող բովանդակությունը համապատասխանում է նաև 2.1-ին և 2.0-ին, իսկ W3C-ը խորհուրդ է տալիս օգտագործել ամենավերջին տարբերակը։ WCAG 2.2-ը հաստատված է նաև որպես միջազգային ստանդարտ՝ ISO/IEC 40500:2025։ Բոլորովին այլ WCAG 3-ը մշակվում է որպես վաղ նախագիծ, ոչ թե ավարտված ստանդարտ։
WCAG-ը կազմակերպված է չորս սկզբունքով, որոնք հաճախ հիշվում են որպես POUR։
| Սկզբունք | Նշանակություն | Օրինակներ |
|---|---|---|
| Ընկալելի (Perceivable) | Մարդիկ կարող են բովանդակությունը ընկալել այն զգայարաններով, որոնք օգտագործում են | Պատկերների alt տեքստ, տեսանյութերի ենթագրեր, բավարար կոնտրաստ |
| Գործարկելի (Operable) | Մարդիկ կարող են օգտագործել կառավարման տարրերը և նավարկել | Ստեղնաշարի մատչելիություն, առանց ժամանակային սահմանների, որը չի կարելի երկարացնել, տեսանելի ֆոկուս |
| Հասկանալի (Understandable) | Բովանդակությունը և վարքագիծը իմաստալից են | Հստակ պիտակներ, օգտակար սխալի հաղորդագրություններ, հետևողական նավիգացիա |
| Ամուր (Robust) | Աշխատում է տարբեր բրաուզերների և օժանդակ տեխնոլոգիաների հետ | Ճիշտ HTML տարրեր, կառավարման տարրերի ճիշտ անուններ և դերեր |
Յուրաքանչյուր ուղեցույց ունի փորձարկելի հաջողության չափանիշներ երեք մակարդակում։
- A մակարդակ — նվազագույնը։ Այդ չափանիշների խախտումը որոշ մարդկանց լրիվ արգելափակում է։
- AA մակարդակ — ստանդարտ թիրախը, և այն մակարդակը, որին հղում են օրենքների և քաղաքականությունների մեծ մասը։
- AAA մակարդակ — ամենաբարձր մակարդակը։ Տեղ-տեղ արժե ձգտել դրան, բայց W3C-ը չի խորհուրդ տալիս պարտադրել այն ամբողջ կայքերի համար, քանի որ որոշ բովանդակություն չի կարող դրան համապատասխանել։
WCAG 2.2-ը 2.1-ին ավելացրեց ինը հաջողության չափանիշ, այդ թվում՝ Target Size (Minimum)-ը AA մակարդակում։ սեղմելի թիրախները սովորաբար պետք է լինեն առնվազն 24 × 24 CSS պիքսել, բացառություններով, և Accessible Authentication (Minimum)-ը, որը սահմանափակում է մուտքի քայլերը, որոնք հիշողության կամ գլուխկոտրուկների վրա են հիմնված, օրինակ՝ գաղտնաբառը ձեռքով նորից մուտքագրել՝ առանց պատճենելու թույլտվության։ Այն նաև հեռացրեց հին «Parsing» չափանիշը որպես հնացած։
Աշխատած օրինակ։ գրանցման ձև
Նշենք գրանցման ձև, որը AI-ն կարող է արտադրել, և այն, ինչ գտնում է մատչելիության ստուգումը։
| Խնդիր | Ում է վերաբերում | Շտկում |
|---|---|---|
| Մուտքի դաշտերը օգտագործում են placeholder տեքստ («Email») պիտակների փոխարեն | Էկրանի ընթերցիչի օգտատերեր. ցանկացած մեկը, ով մոռանում է, թե դաշտն ինչի համար էր, երբ սկսում է մուտքագրել | Տեսանելի <label>, կապված յուրաքանչյուր մուտքի հետ |
| Բաց մոխրագույն տեքստ սպիտակի վրա, կոնտրաստը շատ ցածր է 4.5:1-ից | Թույլ տեսողություն ունեցող մարդիկ, ցանկացած մեկը դրսում | Ավելի մուգ տեքստ, որը բավարարում է 4.5:1 կոնտրաստի հարաբերակցությունը |
| Սխալները ցուցադրվում են միայն կարմիր եզրագծով | Գունակուրություն ունեցող օգտատերեր, էկրանի ընթերցիչի օգտատերեր | Տեքստային հաղորդագրություն դաշտի կողքին, որը հայտարարվում է էկրանի ընթերցիչներին |
«Sign up»-ը ոճավորված <div> է, ոչ թե <button> | Ստեղնաշարի և էկրանի ընթերցիչի օգտատերերը չեն կարող այն ակտիվացնել | Օգտագործել իրական <button> տարր |
| Դաշտերի միջև Tab-ով անցնելիս տեսանելի եզրագիծ չկա | Ստեղնաշարի օգտատերերը կորցնում են, թե որտեղ են | Հստակ ֆոկուսի ոճ |
| Լոգոյի պատկերը alt տեքստ չունի | Էկրանի ընթերցիչի օգտատերերը լսում են ֆայլի անունը | Alt տեքստ, օրինակ՝ «Acme Bookings» |
Այս շտկումներից ոչ մեկը չի փոխում ձևի տեսքը շատ։ Բոլորը փոխում են, թե արդյոք որոշ մարդիկ կարող են ընդհանրապես օգտագործել այն։
Բացատրված հիմնական տերմիններ
| Տերմին | Նշանակություն |
|---|---|
| Էկրանի ընթերցիչ | Ծրագիր, որը կարդում է էկրանը բարձրաձայն կամ բրայլյան էկրանին, օրինակ՝ VoiceOver, NVDA կամ JAWS։ |
| Alt տեքստ | Պատկերի տեքստային նկարագրություն, որը կարդում են էկրանի ընթերցիչները։ Դեկորատիվ պատկերները ստանում են դատարկ alt, որպեսզի բաց թողնվեն։ |
| Կոնտրաստի հարաբերակցություն | Տեքստի և ֆոնի գույների տարբերությունը՝ 1:1-ից մինչև 21:1։ |
| Ստեղնաշարի նավիգացիա | Կայքի օգտագործումը Tab, Enter, Space և սլաքների ստեղներով՝ մկնիկի փոխարեն։ |
| Ֆոկուսի ցուցիչ | Տեսանելի եզրագիծ, որը ցույց է տալիս, թե որ տարրի վրա է ստեղնաշարը։ |
| Սեմանտիկ HTML | Աշխատանքի համար ճիշտ տարրի օգտագործում՝ <button>, <nav>, <h2>, որպեսզի բրաուզերներն ու օժանդակ տեխնոլոգիաները հասկանան էջը։ |
| ARIA | Լրացուցիչ հատկություններ, որոնք նկարագրում են հատուկ կառավարման տարրերը օժանդակ տեխնոլոգիաներին։ Լավագույն է օգտագործել խնայողաբար. նախ գալիս են բնիկ HTML տարրերը։ |
| Օժանդակ տեխնոլոգիա | Գործիքներ, որոնք մարդիկ օգտագործում են համակարգիչներ մատչելու համար՝ էկրանի ընթերցիչներից մինչև անջատիչ սարքեր և ձայնային կառավարում։ |
Ընդհանուր թյուրըմբռնումներ
- «Մատչելիությունը կարևոր է միայն կույր օգտատերերի համար»։ Այն ընդգրկում է տեսողական, շարժողական, լսողական, խոսքի և ճանաչողական հաշմանդամությունները, ինչպես նաև ժամանակավոր իրավիճակները, օրինակ՝ կոտրած ձեռքը։
- «Մատչելի կայքերը միապաղաղ են թվում»։ Մատչելիությունը սահմանափակում է մի քանի բան՝ կոնտրաստ, ֆոկուսի ոճեր, տեքստի չափ, բայց գեղեցիկ մատչելի կայքերը նորմա են, ոչ թե բացառություն։
- «Ավտոմատ ստուգիչը 100 է ցույց տալիս, ուրեմն ամեն ինչ ավարտված է»։ Ավտոմատ գործիքները բռնում են միայն որոշ խնդիրներ։ Արդյոք alt տեքստն իրականում իմաստալից է, կամ արդյոք հոսքը տրամաբանական է էկրանի ընթերցիչով, դա պետք է ստուգի մարդը։
- «Overlay widget-ը մեզ համապատասխան կդարձնի»։ Վրան ամրացված գործիքագոտիները չեն կարող շտկել բացակայող պիտակները կամ կոտրված ստեղնաշարի մատչելիությունը ձեր կոդում։ Շտկեք աղբյուրը։
- «Մենք անջատված օգտատերեր չունենք»։ Դուք կարող եք պարզապես չիմանալ։ Շատ հաշմանդամություններ տեսանելի չեն, և մարդիկ, որ արգելք են հանդիպում, սովորաբար պարզապես հեռանում են։
Ինչ խնդրել ձեր AI կառուցողից
- «Կառուցիր սա WCAG 2.2 AA մակարդակին համապատասխան»։
- «Օգտագործիր սեմանտիկ HTML. իրական կոճակներ, հղումներ, վերնագրեր ճիշտ հերթականությամբ և պիտակներ ձևի յուրաքանչյուր դաշտի համար»։
- «Ստուգիր, որ յուրաքանչյուր ինտերակտիվ տարր աշխատում է միայն ստեղնաշարով և ունի տեսանելի ֆոկուսի ոճ»։
- «Ստուգիր բոլոր տեքստերի և պատկերակների գույների կոնտրաստը. 4.5:1՝ սովորական տեքստի, 3:1՝ մեծ տեքստի և պատկերակների համար»։
- «Ավելացրու իմաստալից alt տեքստ տեղեկատվական պատկերների համար և դատարկ alt դեկորատիվների համար»։
- «Ձևի սխալները ցուցադրիր որպես տեքստ, կապված դաշտի հետ, ոչ միայն գույնով»։
- «Հարգիր օգտատիրոջ նվազեցված շարժման կարգավորումը անիմացիաների համար»։
- «Գործարկիր ավտոմատ մատչելիության ստուգում և թվիր, թե ինչ չի կարող փորձարկել, որպեսզի ես դա ձեռքով ստուգեմ»։
Հետո ինքներդ փորձարկեք։ մկնիկը մի կողմ դրեք և փորձեք ավարտել ձեր հիմնական հոսքը՝ օգտագործելով միայն Tab, Shift+Tab, Enter և Space։ Փորձեք ձեր հեռախոսի ներկառուցված էկրանի ընթերցիչը հիմնական էջում։ Մեծացրեք բրաուզերը 200%-ով և տեսեք, արդյոք ինչ-որ բան կոտրվում է։
Մատչելիությունը Mythex-ում
Mythex-ը չունի առանձին մատչելիության ստուգիչ, ուստի մատչելիությունը դիտարկեք որպես ձեր հուշումների և փորձարկման մաս։ Առաջին հուշումից խնդրեք WCAG 2.2 AA, ստուգեք արդյունքը Preview-ում ստեղնաշարով և օգտագործեք /test-ը, որպեսզի agent-ը սեղմի ձեր հիմնական հոսքերով, նախքան հրապարակելը. տե՛ս App Testing։ SEO ուղեցույցը նույնպես խնդրում է սեմանտիկ վերնագրեր և իմաստալից alt տեքստ, որոնք ծառայում են երկու նպատակին էլ։
Պրակտիկ ստուգաթերթի համար տե՛ս ինչպես դարձնել ձեր կայքը մատչելի։ Դիզայնի համար կարդացեք ինչպես դիզայնավորել գեղեցիկ հավելված AI-ով, իսկ գործարկումից առաջ՝ ինչպես փորձարկել ձեր հավելվածը գործարկումից առաջ։ W3C-ի սեփական WCAG ակնարկը հեղինակավոր աղբյուրն է։
Հարցեր
Պարզ ասած, ի՞նչ է վեբ մատչելիությունը:
Վեբ մատչելիությունը նշանակում է կայքեր և հավելվածներ այնպես նախագծել և կառուցել, որ հաշմանդամություն ունեցող մարդիկ կարողանան դրանք ընկալել, հասկանալ, նավարկել և օգտագործել։ Դա վերաբերում է տեսողության խնդիրներ ունեցողներին, որոնք օգտագործում են էկրանի ընթերցիչներ, նրանց, ովքեր չեն կարող մկնիկ օգտագործել, թույլ տեսողություն ունեցողներին կամ գունակուրության խնդիրներ ունեցողներին, խուլ օգտատերերին և ճանաչողական հաշմանդամություն ունեցող մարդկանց։
Ի՞նչ է WCAG-ը:
WCAG-ը (Web Content Accessibility Guidelines) վեբ մատչելիության միջազգային ստանդարտն է, որը հրապարակել է W3C-ն։ Ընթացիկ տարբերակը WCAG 2.2-ն է, որը առաջին անգամ հրապարակվել է 2023 թվականի հոկտեմբերին։ Նրա հաջողության չափանիշները բաժանված են A, AA և AAA մակարդակների, և AA մակարդակը այն թիրախն է, որին հղում են կազմակերպությունների մեծ մասը և օրենքները։
Ի՞նչ գունային կոնտրաստ է պահանջում WCAG-ը:
AA մակարդակում սովորական տեքստը պետք է ունենա առնվազն 4.5:1 կոնտրաստի հարաբերակցություն իր ֆոնի նկատմամբ, իսկ մեծ տեքստը (մոտ 18 պունկտ, կամ 14 պունկտ թավ) առնվազն 3:1։ Պատկերակները և կառավարման տարրերի տեսանելի մասերը պետք է ունենան առնվազն 3:1 իրենց կողքի գույնի նկատմամբ։
Արդյո՞ք վեբ մատչելիությունը օրինական պահանջ է:
Շատ վայրերում, շատ կազմակերպությունների համար՝ այո։ Օրենքները տարբերվում են երկրից և ոլորտից. օրինակ՝ Եվրոպական մատչելիության ակտը (European Accessibility Act) ընդգրկում է ԵՄ-ում սպառողական թվային արտադրանքների և ծառայությունների մեծ մասը։ Ստուգեք ձեզ վերաբերող կանոնները կամ դիմեք իրավաբանի։
Կարո՞ղ է մատչելիության overlay-ը կամ widget-ը ձեր կայքը համապատասխան դարձնել:
Ոչ միայն դրանով։ Overlay-ները կայքի վրա գործիքագոտի են ավելացնում, բայց չեն կարող հուսալիորեն շտկել հիմնական խնդիրները, ինչպիսիք են բացակայող պիտակները, անօգտագործելի ստեղնաշարի նավիգացիան կամ անհասկանալի կառուցվածքը։ Հուսալի մոտեցումը կայքի կոդն ու բովանդակությունը շտկելն է։