Ինչպես կատարել հասանելիության ակնարկ?

Հասկանալ, թե որքան հասանելի է ձեր մոդուլը, թեման կամ կայքը, կարող է թվալ ծանրաբեռնված խնդիր։ Եթե դուք նոր եք հասանելիության ոլորտում, ապա այդ թեման կարող է շփոթեցնել՝ չիմանալով՝ որտեղից սկսել։ Ադապտացվել բազմազան կարողություններին նշանակում է, որ պետք է հաշվի առնել համապատասխանորեն բազմազան հարցեր։ Այս փաստաթղթում մենք ցանկացրել ենք անհրաժեշտ դիտարկումները տրամաբանված, քայլ առ քայլ՝ ձեր մոդուլի թեմայի կամ կայքի հասանելիության ստուգման համար։

Սկսեք ավտոմատացված գործիքների գործարկումով

Շատ հասանելիության խնդիրներ կարող են հայտնաբերվել՝ օգտագործելով ավտոմատացված գործիքներ՝ վեբ էջը վերլուծելու համար։ Ավտոմատացված գործիքներից են՝ WAVE, Tenon, Accessibility Insights, Google Lighthouse, Siteimprove և Siteimprove-ի Chrome հավելումը։ Մի մասամբ կարող եք ավտոմատացնել axe-core գրադարանով։ Այս գործիքները կօգնեն արագ հայտնաբերել որոշ հասանելիության խնդիրներ, ինչպիսիք են սխալ մատնանշված նշագծման կառուցվածքը, բացակա ARIA հատկություններ և անբավարար գունային կոնտրաստ։

Սարքի միջոցով ստուգում՝ ստեղնաշարի միջոցով նավարկություն

Ստեղնաշարով նավարկությունը հիմնական միջոց է էկրանին ամեն ինչ հասանելի դարձնելու համար այն օգտատերերի համար, որոնք չեն կարող կամ չեն ուզում օգտագործել մկնիկը։ Դա ներառում է էկրան ընթերցող ծրագրերի օգտատերերին, ինչպես նաև շարժողական խոչընդոտներ ունեցող օգտատերերին, ինչպիսիք են կրկնվող սթրեսային վնասվածքները (RSI) կամ պարալիզը։ Լավ ստեղնաշարով օգտագործման փորձ ապահովելու համար պետք է պահպանել տրամաբանական թաբուլյացիայի կարգ և հեշտ տեսանելի ֆոկուսի ոճեր։ Նաեւ պետք է համոզվել, որ օգտատերը ստիպված չէ անցնել չափազանց շատ թաբ դիրքերով։

Ինչը պետք է դիտարկել

• Կարո՞ղ եք բաց թողնել կրկնվող բովանդակությունը։

Պետք է ապահովված լինի «անցնելու հղում», որը ուղիղ օգտատերերին տանում է էջի եզակի բովանդակությանը՝ բաց թողնելով կրկնվող բովանդակությունը, ինչպիսիք են նավիգացիոն մենյուները։ Այս հղումը պետք է լինի առաջին թաբ դիրքը էջում և տեսանելի լինի ֆոկուս ունենալու դեպքում։

• Ամբողջ կառավարման տարրերը աշխատում են ստեղնաշարով։

Յուրաքանչյուր ինտերակտիվ տարր պետք է աշխատի ստեղնաշարով։ Բացել/փակել, ծառային ներկայացուցչություններ, սլայդերներ, վիջեթներ, դիալոգներ, պատվածքներ և այլն։ Եթե դա անհնար է, պետք է տրամադրվի այլընտրանքային միջոց՝ գործողությունը կատարելու համար։

• Կարո՞ղ եք նավարկել երկու ուղղությամբ՝ առաջ և ետ։

Տարբեր կիրառություններում առաջ անցնելը նորմալ է, բայց ետ գնալը (Shift + Tab) երբեմն չի աշխատում՝ առաջացնելով ստեղնաշարային բանալք-փորձանք։ Հաստատեք, որ կարող եք օգտվել թաբուլյացիայից երկու ուղղություններով։

• Կա՞ն ստեղնաշարային բանալքներ։

Ուշադիր եղեք, որ ֆոկուսը չպիտի ամբողջությամբ պտտվի որևէ տեղ։ Կարո՞ղ է օգտատերը ստեղնաշարով դուրս գալ տիպիկ վիջեթներից, պատվածքներից, ավտոմատ լրացման դաշտերից։ Եթե ոչ, ապա դա ստեղնաշարային բանալք է։

• Դիալոգի դեպքում ֆոկուսը պետք է սահմանափակվի ներսում։

Դիալոգի բացակայության դեպքում ֆոկուսը կարող է տեղափոխվել պատուհանից դուրս, ինչը վնասում է օգտագործման փորձը։

• Ֆոկուսը միշտ պետք է տեսանելի լինի։

Յուրաքանչյուր ինտերակտիվ տարր պետք է ֆոկուսավորվի և ցուցադրի ֆոկուսի նշան (օրինակ՝ շրջանակ ֆոկուսի շուրջը)։ Եթե օգտատերը չի տեսնում ֆոկուսը, ապա չի կարող արդյունավետ համագործակցել էջի հետ։

• Կա՞ բովանդակություն, որը չպետք է տեսանելի լինի, բայց հասանելի է ստեղնաշարով։

Համոզվեք, որ ոչ մի բովանդակություն, որը պետք է թաքցված լինի, անպայման դուրս չէ թաբի բնական հոսքից։

• Կա՞ թարմացված բովանդակության ստեղնաշարային հասանելի փոխարինիչ։

Սեղմեք մկնիկով ստուգեք, կա՞ բովանդակություն, որը երևում է միայն մկնիկի վրա գտնվելու դեպքում, բայց որը անհասանելի է միայն ստեղնաշարով։ Այսպիսի բովանդակությունը պետք է ունենա այլընտրանքային մուտքի միջոց։ Դա կարևոր է ոչ միայն ստեղնաշարով նավարկողների, այլ նաև սենսորային սարքեր օգտագործողների համար։

• Կա՞ն ֆոկուսավորելի տարրեր, որոնք չպետք է լինեն ֆոկուսով։

- Չինտերակտիվ բովանդակությունը չպետք է ֆոկուսավորվի։ Եթե տարրը ֆոկուսավորվում է, օգտատերը կստանա սպասելիք, որ կարող է որևէ գործողություն կատարել։ Սա կարող է շփոթեցնել կամ հիասթափեցնել։

- Մի՛ օգտագործեք tabindex="0" ոչ ինտերակտիվ տարրերի վրա, եթե դրանք չեն նախատեսված կառավարելու համար։

- Չարժեք ավելորդ tabindex հատկություններ ավելացնել ոչ ինտերակտիվ տարրերին, քանի որ դա դժվարացնում է նավարկությունը։

• Թաբուլյացիայի կարգը բնական և տրամաբանական է՞։

Եթե փոփոխվել է tabindex-ը կամ էջի դասավորությունը ոչ բնական է DOM հոսքին, տեսողություն ունեցող ստեղնաշարով օգտատերը կարող է շփոթվել նավարկման ժամանակ։

Ստուգեք ձեր ստուգային կետերը

Ամբողջ ստեղնաշարով ստուգումներից հետո մեծացրեք դիտարկչի զննման չափը մինչև վերահսկման կետը և կրկնեք բոլոր ստուգումները։ Այդպիսով, օգտատերերը, որոնք օգտագործում են բարձր սքանավորման մակարդակ, կաշխատեն ձեր կայքի «տաբլետ» կամ «համակարգչային» տարբերակների հետ։ Մոբայլի վերահսկման կետերը նախատեսված չեն միայն սենսորային օգտատերերի համար։

Վերնագրեր

Վերնագրերը ձեր բովանդակության հիմքն են։ Լավ վերնագրային կառուցվածքը արտացոլում է էջի բովանդակությունը, ինչպես գրքի սեղանիկ։ Նկարագրական վերնագրեր և իմաստալից մակարդակներ կարևոր են, քանի որ որոշ էկրան ընթերցողներ դրանք օգտագործում են էջի բովանդակության անցում կատարելու համար։

Եթե արդեն գործարկել եք ավտոմատացված հասանելիության գործիքներից մեկը, հավանաբար վերնագրերին վերաբերող հարցերի մեծ մասը արդեն դիտարկված է։

Ինչը պետք է դիտարկել

• Արդյո՞ք էջում միայն մեկ H1 տարր կա։

Էջում պետք է լինի միայն մեկ H1, որը նկարագրում է էջի թեման։

• Վերնագրերի մակարդակները համապատասխանո՞ւմ են բովանդակությանը։

Կարևոր է օգտագործել վերնագրեր ըստ մակարդակի, ոչ թե ըստ տառատեսակի չափի։ Վերնագրերի մակարդակները չպետք է բաց թողնվեն։

• Վերնագրերը բավականաչափ նկարագրական են՞։

Լավ վերնագրերը կարճ նկարագրում են իրենց հետևյալ բովանդակությունը։

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

Գույնի կոնտրաստը պետք է բավարար լինի

Գույնի կոնտրաստը հանդիսանում է առջևի պլանի (տեքստի) և ֆոնի գույների հարաբերակցությունը։ Տեքստը պետք է ունենա առնվազն 4.5:1 հարաբերակցություն ֆոնի նկատմամբ։ Կարող եք օգտվել գույնի կոնտրաստը ստուգող գործիքներից՝ որոշելու համար, արդյո՞ք ձեր գույները բավարարում են պահանջները։

Գույնը չի պետք է լինի միակ տեսողական ինֆորմացիայի միջոցը

Չնայած գույնը կարող է ծառայել տեսողական ինֆորմացիայի փոխանցման համար, այն չպետք է լինի միակ միջոցը։ Դալտոնիզմով հիվանդ մարդիկ դժվարությամբ կարող են ընկալել կարևոր տեղեկությունները, եթե դրանք փոխանցվում են միայն գույնով (և կարող են դրանք ամբողջությամբ բաց թողնել)։

Եթե գույնը օգտագործվում է տեղեկատվություն փոխանցելու համար, օգտագործեք առնվազն մեկ այլ լրացուցիչ մեթոդ՝

• Օգտագործեք նշանակալի տեքստ՝ տեղեկատվությունը փոխանցելու համար։ Օրինակ՝ «կատարել է» և «չկատարել» նշումներ՝ կանաչից կարմիր փոփոխվող վառանակի կողքին։
• Օգտագործեք նշանակալի պատկերակ՝ օգտատերերը կարողանան տարբերակել նշանակությունները ձևով։
• Սխալները նշելու համար մի ասեք պարզապես «կարմիր նշված դաշտեր»։ Ավելի լավ է նշել դաշտի անունը և ցույց տալ ճանաչելի սխալի նշան։

Օրինակ՝ պարտադիր դաշտերի նշումը կարմիրով։ Որոշ օգտատերեր չեն կարող տարբերակել կարմիրը, ուստի նրանց համար լրացուցիչ նշում է անհրաժեշտ՝ օրինակ, աստղիկ դնել դաշտի անվան մոտ։

Ֆոկուսի վիճակը չպետք է կախված լինի միայն գույնից։ Ֆոկուսի ցուցադրման համար անհրաժեշտ է լրացուցիչ ձև՝ սովորաբար ինտերակտիվ տարրի շուրջ ցուցադրվող շրջանակ։

Ոչ միայն պատկերակներով

Եթե պատկերակը կարևոր ֆունկցիոնալության մաս է, այն պետք է ուղեկցվի տեքստով, որը բացատրում է նշանակությունը։ Համոզվեք, որ ինտերակտիվ տարրերը, ինչպիսիք են նավիգացիոն մենյուները, ունեն համապատասխան նշումներ։ Բոլոր օգտատերերը չգիտեն պատկերակները, որոնք ձեզ համար պարզ են։ Նշումները անհրաժեշտ են նաև էկրան ընթերցողների համար։

Ձայն և տեսանյութ

Եթե էջը օգտագործում է ձայն կամ տեսանյութ տեղեկություն փոխանցելու համար, համոզվեք, որ մատչելի են ենթագրերը կամ տեքստային տպագիր տարբերակը։ Ավելին՝ WebAim-ի հոդվածը ենթագրերի, տեքստային տպագրության և աուդիո նկարագրությունների մասին

• Եթե վեբէջում օգտագործվում է ինֆորմատիվ տեսանյութ՝ ձայնով կամ առանց ձայնի, անհրաժեշտ է տեսանյութի տեքստային տպագիր տարբերակ այն մարդկանց համար, ովքեր տեսողության խնդիրներ ունեն։
• Եթե վեբէջում օգտագործվում է ինֆորմատիվ տեսանյութ՝ ձայնով, անհրաժեշտ է ունենալ թաքնված ենթագրեր լսողության խնդիրներ ունեցողների համար։
• Եթե օգտագործվում է ինֆորմատիվ և բարդ տեսանյութ ձայնով, կարող է անհրաժեշտ լինել աուդիո նկարագրություն՝ տեսարանի կոնտեքստն ու գործողությունները նկարագրող, որոնք սովորաբար չեն ընդգրկվում թաքնված ենթագրերում, տեսողության խնդիրներ ունեցողների համար։
• Եթե օգտագործվում է ուղիղ հեռարձակման տեսանյութ, պետք է տրամադրվեն ենթագրեր լսողության խնդիրներ ունեցողներին։
• Եթե օգտագործվում է ուղիղ հեռարձակման աուդիո, պետք է տրամադրվի տեքստային այլընտրանք տեսողության խնդիրներ ունեցողներին։

Սա վերաբերում է WCAG 1.2 ուղեցույցի ժամանակաբաղադրիչ մեդիա բաժնին։

Անիմացիաներ և ավտոմատ կերպով կրկնվող վիդեո և աուդիո

Անիմացիաները, տեսանյութերը և/կամ աուդիոն, որոնք ավտոմատ կերպով սկսում են առանց օգտատիրոջ վերահսկման, կարող են շեղել ուշադրությունը էջի այլ մասերից։ Նույնիսկ եթե այն գտնվում է ոչ նկատելի հատվածում, մենք չենք վերահսկում օգտատերերի դիտման ձևերը։

Անիմացիաների, ավտոմատ կրկնվող վիդեո և աուդիո օրինակներ՝

• Անիմացիաներ՝ պատկերասրահը ավտոմատ վերափոխում է նկարների շարք;
• Վիդեո՝ YouTube տեսանյութը սկսում է վերարտադրումը էջի բեռնումով;
• Աւդիո՝ ռադիոկայանը սկսում է նվագել էջի բեռնումով։

Խուսափեք ուշադրությունը շեղող այսպիսի տարրերից՝

• Ավելի քան 5 վայրկյան անիմացիա, տեսանյութ կամ աուդիո չխաղալը։
• Տրամադրեք օգտատիրոջ վերահսկողության տարրեր՝ դադարեցնել, նվագարկել և ընդհատել անիմացիաները, վիդեոն և աուդիոն։

Դինամիկ բովանդակություն

JavaScript-ը թույլ է տալիս էջի որոշ մասեր փոխել առանց ամբողջ էջի թարմացման։ Օգտատերերը, որոնք չեն տեսնում այդ փոփոխությունները, պետք է իմանան, որ դրանք տեղի են ունեցել։ Օրինակ է որոնման արդյունքների թարմացումը կամ մի ծանուցում, որը չի պահանջում օգտատիրոջ ներգրավվածություն։ Drupal.announce() API-ն հնարավորություն է տալիս փոխել բովանդակության փոփոխությունները ներկայացնել օգնության տեխնոլոգիաներին։

Drupal.announce() հիմնված է ARIA live regions վրա։ Դիտեք օգտագործման օրինակները ARIA live regions-ի մասին։

Լավագույն ձևը դինամիկ բովանդակությունը ստուգելու համար էկրան ընթերցողով է։

Էկրան ընթերցողով ստուգում

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

Ինչը պետք է դիտարկել

• Արդյո՞ք բոլոր կառավարման տարրերը ունեն նշումներ։

Բոլոր կառավարման տարրերը պետք է ունենան հստակ նշում՝ դրանց նշանակությունը նկարագրող։ Սովորաբար դա կատարվում է label էլեմենտի միջոցով, բայց բարդ դեպքերում կարող է օգտագործվել aria-labelledby հատկանիշը։

• Կա՞ն հարմարեցված կառավարման տարրեր։ Նրանց միանգամայն համապատասխանե՞լ է ARIA դերը և անհրաժեշտ հատկությունները, որոնք արտահայտում են նրանց վիճակը։

Օգնության տեխնոլոգիաների օգտատերերը պետք է ստանան նույն տեղեկատվությունը, ինչ տեսողության տերերը՝ տեսողական օգնականներով, ինչպիսիք են ձևավորումը, կուրսորի դիրքը կամ դիրքը։ Նորմալ տարրերը ունեն այս սեմանտիկ տեղեկությունները, բայց հարմարեցված կառավարման տարրերի համար պետք է օգտագործել ARIA։ Օրինակ՝ հարմարեցված սլայդերը կարող է ունենալ aria-slider դերը և aria-valuenow, aria-valuemin, aria-valuemax հատկությունները։

• Տեղեկատվության հոսքը համընկնու՞մ է էկրանին տեսածիդ հետ և արդյոք իմաստ ունի։

Տեղեկատվության հոսքը կարող է փոխվել CSS-ով։ Համոզվեք, որ էկրան ընթերցողով բովանդակության հոսքը ունի իմաստ։

• Հղումների տեքստը իմաստալից է՞։

Բազմաթիվ էկրան ընթերցողներ ասում են «հղում» յուրաքանչյուր հղման առաջ։ Օրինակ՝ «ապրանքներ» հղումը կարդացվի որպես «հղում դեպի ապրանքներ»։ Ուստի հղումների տեքստում չպետք է լինի «հղում» բառը, քանի որ օգտատերերը արդեն գիտեն, որ դա հղում է։

Հղումներից հղում անցնելը էկրան ընթերցողների համար վեբ բովանդակության դիտարկման միջոց է։ Հղումները պետք է իմաստ ունենան կոնտեքստից դուրս։ «Սեղմեք այստեղ», «ավելին», «սեղմեք՝ ավելի մանրամասն» արտահայտությունները նման են աղոտ, երբ կարդացվում են առանց կոնտեքստի։

• Արդյո՞ք բոլոր պատկերներն ունեն ճիշտ alt տեքստ։

Բոլոր պատկերներն պետք է ունենան ճիշտ այլընտրանքային տեքստ։ Բացառություն են այն դեպքերը, երբ պատկերները հիմնականում ծառայում են դիզայնին և չեն հանդիսանում բովանդակության էական մաս։ Եթե պատկերն անհրաժեշտ է անտեսել էկրան ընթերցողի կողմից, alt հատկությունը պետք է լինի դատարկ։

Էկրան ընթերցողով ձեռքով թեստավորում

Որոշ խնդիրներ կարող են հայտնաբերվել միայն ձեռքով թեստավորման միջոցով՝ էկրան ընթերցող օգտագործելով։ Հիմնական էկրան ընթերցողները VoiceOver (Mac OS) և NVDA (Windows) են։ VoiceOver-ի համար սկսելու համար կարող եք դիտել VoiceOver-ի հիմունքների տեսանյութը և կարդալ WebAIM-ի VoiceOver ձեռնարկը։ NVDA-ի համար կարող եք դիտել NVDA-ի հիմունքների տեսանյութը և կարդալ NVDA-ն և Firefox-ը օգտագործելու մասին Marco Zehe-ի հոդվածը։

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

Եթե դեռ չեք օգտագործում էկրան ընթերցող, ապա նրա հետ թեստավորելը այնքան էլ հեշտ չէ, որքան թվում է։ Պահանջվում է ժամանակ և ջանք՝ սովորելու տեսողական նավարկությունից հրաժարվելու և ստեղնաշարի կարճ տերևների ու մեթոդների օգտագործման համար։ Բացի այդ, տարբեր էկրան ընթերցողներ աշխատում են փոքր-ինչ տարբեր ձևերով, ուստի կարևոր է թեստավորել հնարավորինս շատ տարբերակներ տարբեր բրաուզերներում և պլատֆորմներում։