accessible mode Մատչելի տարբերակ

Հեղինակ

Մուշեղ Հովսեփյան

Disabilityinfo.am կայքի խմբագիր

Այլընտրանքային տեքստերի կիրառումը՝ օրինակներով

0

Այլընտրանքային տեքստերի ավելացումը վեբ մատչելիության առաջին սկզբունքներից է: Սա նաև ամենաբարդերից է՝ պատշաճ կերպով իրականացնելու տեսանկյունից: Վեբը լի է պատկերներով, որոնք չունեն այլընտրանքային տեքստեր կամ սխալ են, ոչ բավարար: Այս օրինակի միջոցով կփորձենք ցույց տալ այլընտրանքային տեքստի հմուտ մեկնաբանության համապատասխան կիրառման օրինակ:

Այլընտրանքային տեքստերն ապահովում են տեքստային այլընտրանք ոչ տեքստային բովանդակության համար: Քննարկենք այլընտրանքային տեքստերը միայն պատկերների դեպքում, թեև սկզբունքները կիրառելի են ոչ տեքստային այլ վեբ բովանդակությունների համար:

Այլընտրանքային տեքստը ծառայում է մի քանի ֆունկցիայի:

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

Առանցքային սկզբունքն այն է, որ համակարգիչները կամ էկրանի ընթերցիչները չեն կարող վերլուծել պատկերը և ճանաչել, թե ինչ է պատկերում ներկայացված: Տեքստը պետք է ներկայացնի օգտագործողներին պատկերի ԲՈՎԱՆԴԱԿՈՒԹՅՈՒՆԸ և ԳՈԾԱՌՈՒՅԹԸ վեբ բովանդակությունում:

Այլընտրանքային տեքստը կարող է ներկայացվել երկու տարբերակով.

  • Img էլեմենտի alt ատրիբուտ,
  • բովանդակության կամ հենց պատկերի միջավայր:

Սա նշանակում է, որ alt ատրիբուտը (երբեմն անվանվում է alt tag, թեև տեխնիկապես դա ճիշտ չէ) պատկերի բովանդակությունը և ֆունկցիան ապահովելու միակ մեխանիզմը չէ:

Այս ինֆորմացիան կարող է նաև կիրառվել պատկերին կից տեքստի միջոցով կամ էջի միջոցով, որն էլ պարունակում է այդ պատկերը: Որոշ դեպքերում, երբ համարժեքը չի կարող հակիրճ ներկայացվել, հղում և/կամ longdesc ատրիբուտը կարող է կիրառվել, որն ապահովում է ավելի երկար նկարագրության հնարավորություն:

Յուրաքանչյուր պատկեր պետք է ունենա alt ատրիբուտ: Սա HTML ստանդարտների պահանջներից է: Առանց alt ատրիբուտի պատկերները, ամենայն հավանականությամբ, անմատչելի են: Շատ դեպքերում պատկերները կարող են տրվել դատարկ կամ զրոյական alt ատրիբուտով (օրինակ՝ alt=””)։

Կոնտեքստն ամեն ինչ է

Երբ որոշվում է պատկերին համապատասխան այլընտրանքային տեքստը, կոնտեքստն ամեն ինչ է: Այլընտրանքային տեքստը մի պատկերի դեպքում կարող է խիստ տարբեր լինել` կախված կոնտեքստից և պատկերի միջավայրից:

Վերցնենք, օրինակ` Ջորջ Վաշինգտոնի հետևյալ պատկերը:

Ջորջ Վաշինգտոն

Այլընտրանքային տեքստը այս պատկերի համար կարող է փոփոխվել կոնտեքստից, ինչպես ցուցադրված է ստորև:

ՕՐԻՆԱԿ 1

Ջորջ ՎաշինգտոնՔանի որ Ջորջ Վաշինգտոնը Ամերիկյան զինված ուժերի գերագույն գլխավոր հրամանատարն էր Հեղափոխական պատերազմի ժամանակ, և քանի որ հետագայում ընտրվեց ԱՄՆ-ի նախագահ, նրան հաճախ կոչում էին «Իր երկրի հայր»:

1-ին օրինակի պատկերի այլընտրանքային տեքստի դեպքում ո՞րը կլինի նպատակահարմար:
A. “Ջորջ Վաշինգտոնի պատկերը”:
B. “Ջորջ Վաշինգտոն, ԱՄՆ-ի առաջին նախագահ”:
C. Դատարկ alt ատրիբուտը (alt=””) բավարար է:
D. “Ջորջ Վաշինգտոն”:

Առաջինը, երբ պատկերի համար որոշում ենք այլընտրանքային տեքստի նպատակահարմարությունը, պետք է որոշել՝ պատկերը ներկայացնում է բովանդակությունը, պատկերը ունի ֆունկցիա: Շատ դեպքերում պատկերը կունենա միայն ֆունկցիա, եթե այն ներառում է հղում (կամ կոճակ, image map hotspot):

Որոշել, թե պատկերը ներկայացնում է բովանդակություն, և ո՞րն է այդ բովանդակությունը, կարող է շատ ավելի բարդ լինել: Եթե պատկերի կրած բովանդակությունը ներկայացված է միջավայրի (ուղեկցվող) տեքստով, այդ դեպքում alt ատրիբուտը կարող է բավարար լինել:

Բովանդակությունը, որը ներկայացվում է այս պատկերի միջոցով, կարող է տեղեկացնել օգտվողին, որ դա Ջորջ Վաշինգտոնն է: Պատկերը չունի ֆունկցիա, քանի որ այն չի պարունակում հղում և clickable չէ:

Հիմնված կանոնների վրա` D տարբերակը (alt=”Ջորջ Վաշինգտոնը”) կարող է լինել լավագույն այլընտրանքային տեքստը այս դեպքում: A տարբերակը ավելորդ նկարագրում է պատկերը որպես պատկեր: B տարբերակն ապահովում է հավելյալ տեղեկություն, որն ուղղակի ներկայացված չէ պատկերում, և այն ավելորդ է ներքևում ներկայացված տեքստի բովանդակության հետ:

C տարբերակը դատարկ alt ատրիբուտը (alt=””)-ը նպատակահարմար չէ, քանի որ պատկերը պարունակում է բովանդակություն, որն ուղղակի ներկայացված չէ միջավայրի կոնտեքստում: Չնայած շրջապատող տեքստը չի նշմարում, որ այն վերաբերում է Ջորջ Վաշինգտոնին, վիզուալ օգտատերերը կարող են այն ուղղակի ասել պատկերի բովանդակությունից, այնպես որ, եթե պատկերն ունի բովանդակություն, այն պետք է ներկայացվի այլընտրանքային տեքստով:

ՕՐԻՆԱԿ 2

Ջորջ Վաշինգտոն

Ջորջ Վաշինգտոն

Քանի որ Ջորջ Վաշինգտոնը Ամերիկյան զինված ուժերի գերագույն գլխավոր հրամանատարն էր Հեղափոխական պատերազմի ժամանակ, և քանի որ հետագայում ընտրվեց ԱՄՆ-ի առաջին նախագահ, նրան հաճախ կոչում էին «Երկրի հայր»:

2-րդ օրինակի պատկերի այլընտրանքային տեքստի դեպքում ո՞րը կլինի նպատակահարմար:
A. “Ջորջ Վաշինգտոն”:
B. Դատարկ alt ատրիբուտը (alt=””) բավարար է:
C. “Պատկեր”:
D. Պատկերը չի պահանջում alt ատրիբուտ:

Այս դեպքում պատկերի բովանդակությունը ներկայացված է շրջապատող բովանդակությամբ, ուստի B տարբերակը լավագույն ընտրությունն է: A տարբերակը պիտանի չէ: C տարբերակը փոխանցում է կողմնակի և ավելորդ ինֆորմացիա: D տարբերակը (alt=””) երբեք ճիշտ ընտրություն չէ: Յուրաքանչյուր պատկեր պետք է ունենա alt ատրիբուտ:

ՕՐԻՆԱԿ 3

Ջորջ Վաշինգտոն

Ջորջ Վաշինգտոն

3-րդ օրինակի պատկերի այլընտրանքային տեքստի դեպքում ո՞րը կլինի նպատակահարմար:
A. Դատարկ alt ատրիբուտը (alt=””) բավարար է:
B. Վիքիպեդիայի հոդված Ջորջ Վաշինգտոնի մասին:
C. Կարդալ ավելին:
D. Ջորջ Վաշինգտոն:

Այս դեպքում պատկերն ունի հղում, այսինքն` ունի ֆունկցիա: Ամեն անգամ, երբ պատկերը հղմամբ է, պատկերի ֆունկցիան պետք է ներկայացված լինի այլընտրանքային տեքստով, որն էլ հղումի ներսում է: Այս դեպքում չկա հարակից տեքստ հղումի հետ, որը կնկարագրի ֆունկցիան, այսպիսով պետք է ներկայացված լինի alt ատրիբուտում: Արդյունքում` D տարբերակն ամենայն հավանականությամբ լավագույն ընտրությունն է: Մինչ «Ջորջ Վաշինգտոն» բառերը alt ատրիբուտում ավելորդ են հարակից տեքստի հետ, այս դեպքում ավելորդությունն անհրաժեշտ է ֆունկցիան պատշաճ կերպով նկարագրելու համար:

A տարբերակը պատշաճ չէ: Պատկերի, որը միակ բանն է հղման ներսում, երբեք չպետք է alt ատրիբուտ բացակայի կամ զրոյական լինի: Սա քանի որ էկրանի ընթերցիչները պետք է կարդան ինչ-որ բան՝ ճանաչելու հղումը: Էկրանի ընթերցիչները պետք է կարդան պատկերի ֆայլի անունը կամ կապված էջի URL-ը, որը կարող է օգտակար կամ ոչ օգտակար լինել: Պետք է նաև հիշել, որ հղումը կարող է կարդացվել նաև հարակից տեքստի կոնտեքստից դուրս, ինչպես երբ օգտատերը նավարկում է էջի հղումներով:

B տարբերակը նախատեսում է բովանդակություն, որը հասանելի չէ պատկերի հետ համատեղ (օրինակ՝ դուք չեք կարող ասել պատկերի հղումը դեպի Վիքիպեդիա` պարզապես նայելով նրան): C տարբերակը չի ապահովում ֆունկցիայի պատշաճ նկարագրություն հատկապես կոնտեքստից դուրս:

Այս ամբողջ օրինակը կարող է էլ ավելի լավ լինել, երբ և՛ պատկերի, և՛ տեքստի նկարագրությունը տեղադրվի մեկ հղումում:

Այս դեպքում և՛ բովանդակությունը, և՛ ֆունկցիան հղումում են, և պատկերը ներկայացված է որպես հղում, ուստի պատկերին կարող է տրվել alt=””՝ ավելորդություններից խուսափելու համար:

Որքան հնարավոր է` ատրիբուտներում խուսափեք “հղում դեպի…” կամ “սեղմեք պատկերին, որ …” կամ նման ձևակերպումներն օգտագործելուց: Հղումները կարող են ճանաչվել որպես հղում էկրանների ընթերցիչներով և պետք է վիզուալ ակներև լինեն տեսնող օգտատերերի համար:

ՕՐԻՆԱԿ 4


Պատկեր

Այս նկարում գեղանկարիչ էմանուել Լոյցեն օգտագործել է լույսը, գույնը, ձևը, հեռանկարը, համամասնությունը և շարժումը՝ կտավը կերտելու համար:

4-րդ օրինակի պատկերի համար ո՞րը կլինի առավել նպատակահարմար:
A. “Ջորջ Վաշինգտոն”
B. “Ջորջ Վաշինգտոնի նկարը”:
C. “Ջորջ Վաշինգտոնի նկարը Դելավեր գետը հատելիս”:
D. “Դասական նկար, որը ցուցադրում է լույսի, գույնի կիրառումը կտավի կերտման համար”:
E. “Ջորջ Վաշինգտոնի նկարը, որում նա հատում է Դելավեր գետը: Սառցապատ ջրերը շրջապատել են նավակը, որում Ջորջ Վաշինգտոնը հպարտ կանգնած նայում է առաջ, ամբողջ գետով լույսի ճառագայթներ են, նա իր ջոկատը տանում է ճակատամարտ»:

Ինչպես նախկինում, մենք պետք է որոշենք, թե արդյոք պատկերի բովանդակությունը ներկայացվա՞ծ է հարակից կոնտեքստում: Այս դեպքում այդպես չէ: Պատկերը չունի հղում, ուստի չկա ֆունկցիա: Բայց այս պատկերը ապահովում է ավելի բարդ քննություն և լավագույն պատասխանը կարող է համարժեք չլինել տրված սահմանափակ կոնտեքստում: Անկախ ամեն ինչից, պետք է նայել հնարավոր տարբերակները:

A տարբերակը (“Ջորջ Վաշինգտոն”) ամենայն հավանականությամբ պատշաճ չի նկարագրում պատկերի բովանդակությունը: Փաստը, որ դա Ջորջ Վաշինգտոնն է նկարում, չի կարող պարտադիր լինել համապատասխան կոնտեքստում: B տարբերակը պատշաճ է, բայց լրացուցիչ բովանդակություն չի հաղորդում:

Ինչևէ, այն կարող է նպատակահարմար լինել պատկերը որպես գեղանկարչական գործ նկարագրելու համար, որը տարբերվում է լուսանկարներից կամ պատկերային ձևերից:

C տարբերակը տրամադրում է հավելյալ տեղեկություն, որը կարող է օգնել ճանաչելու բովանդակությունը: Պետք է հիշել, որ այլընտրանքային տեքստերը միայն կույր մարդկանց համար չեն: Ուստի միայն «Ջորջ Վաշինգտոնը» բավարար չէ նկարագրություն համարելու համար:

D տարբերակը կարող է տեղին լինել, եթե պատկերի նպատակը ներկայացնել է արվեստի հատուկ տեխնիկան և պատկերի բովանդակությունը այնքան էլ կարևոր չէ:

E տարբերակը կարող է հարմար այլընտրանք լինել նկարը մանրակրկիտ քննելու համար, բայց այն շատ երկար է և կարող է «շատախոսել»:

Ինչպես տեսնում եք, այս դեպքում մեկ ճիշտ պատասխան չկա: Լավագույն այլընտրանքային տեքստը կախված է կոնտեքստից և պատկերի բովանդակությունից:

 Ֆունկցիոնալ պատկերներ

Պատկերները հաճախ կիրառվում են ոչ միայն բովանդակություն, այլ նաև կարևոր ֆունկցիա ունեն, ինչպես նավարկումն է:

ՕՐԻՆԱԿ 5

Պատկերը, որում գրված է “Products”, նավիգացիոն բարի մի մասն է:

5-րդ օրինակում ո՞ր alt ատրիբուտը կհամապատասխանի “Products” նավիգացիոն պատկերի համար:
A. “Products”.
B. “Link to Products”.
C. Պատկերը չունի բովանդակություն, ուստի «alt=””»-ն բավարար է:

Այս դեպքում A տարբերակը լավագույն լուծումն է: Այն ապահովում է նկարի և՛ բովանդակությունը, և՛ ֆունկցիան: Պատկերը ցուցադրում է “Products” բառը և հղում է դեպի կայքի ապրանքների էջ: Պատկերը նաև կճանաչվի որպես հղում, ուստի “Link to”-ն անհրաժեշտ չէ՝ դարձնելով B տարբերակը վատ ընտրություն: Քանի որ պատկերը միակ օբյեկտն է հղումում, զրո այլընտրանքային տեքստը պատշաճ չէ: Երբ պատկերը միայն տեքստ է պարունակում, տեքստի ցուցադրումը սովորաբար կարող է լինել այլընտրանքային տեքստի միջոցով:

ՕՐԻՆԱԿ 6


Շարունակեք հաջորդ էջում՝ կարդալու Ջորջ Վաշինգտոնի նախագահության մասին Հաջորդը

6-րդ օրինակում ո՞ր alt ատրիբուտը կհամապատասխանի կապույտ սլաքի պատկերի համար:
A. “Հաջորդ”
B. “Հաջորդ էջ”
C. “Ջորջ Վաշինգտոնի նախագահությունը”
D. “Շարունակել կարդալ Ջորջ Վաշինգտոնի նախագահության մասին”

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

D տարբերակը կարող է լավագույն լուծումը լինել, քանի որ ներկայացնում է հղումի ֆունկցիան և փոխանցում է, որ դա շարքի հաջորդ էջն է: Ինչպես ավելի վաղ նշվեց, ամենանպատակահարմար այլընտրանքային տեքստի որոշումը կախված է անձնական մեկնաբանություններից: Պատկերի նկարագրությունը (“սլաք”) տեղին չի լինի:

7-րդ օրինակում ո՞ր alt ատրիբուտը կհամապատասխանի պատկերակի (icon) համար: Նկատենք, որ պատկերակը հղումի հետ է:
A. “Աշխատանքի դիմում”
B. “PDF ֆայլ”
C. “PDF պատկերակ”
D. Այս պատկերի բովանդակությունը ներկայացված է կոնտեքստում, ուստի (alt=””)-ը տեղին է:

Ուշադրություն դարձնենք, որ պատկերը հղումի հետ է: Եթե այն հղում չունենար, ապա alt տեքստը կարող էր տարբեր լիներ: Այս դեպքում, քանի որ պատկերը հաղորդում է հավելյալ տեղեկություն հղումի ֆունկցիայի մասին, կարևոր է, որ այլ լինի հղումով և ընթերցվի հղումով: Սա կարևոր է, քանի որ հաճախ հղումները հարակից կոնտեքստից դուրս են լինում:

A տարբերակը ավելորդ է հարակից տեքստի հետ, ուստի դա լավագույն ընտրություն չէ: B տարբերակը լավագույնն է, քանի որ պարզ կերպով փոխանցում է բովանդակությունը, որը ներկայացված է պատկերում, որ հղումը PDF ֆայլն է:

Ֆունկցիան «ներբեռնեք աշխատանքի դիմումը» ներկայացված է հղումի տեքստում, ուստի կարիք չկա այն նորից ներկայացնելու alt ատրիբուտով: C տարբերակը, իրոք, նկարագրում է պատկերը, ուստի դա նպատակահարմար չէ այս կոնտեքստում: Այլ կոնտեքստում դա, հնարավոր է` կարևոր լիներ, որ օգտատերերն իմանային, որ ներկայացվածը պատկերակ է:

D տարբերակը (դատարկ կամ զրոյական alt տեքստ) չի տրամադրի կարևոր տեղեկությունը, որը ներկայացնում է պատկերը:

Կարևոր է նշել, որ եթե պատկերակը ինքնին հղում է դեպի փաստաթղթին, այլընտրանքային տեքստը պետք է տրամադրի պատկերի/հղումի համադրության բովանդակության և ֆունկցիայի լիարժեք այլընտրանքը: Օրինակ՝ “Ներբեռնել աշխատանքի դիմումը PDF ձևաչափով”:

“PDF ձևաչափ”-ը ինքնին չէր կարող բավարար լինել, հատկապես եթե կան բազմաթիվ փաստաթղթեր, բոլորն էլ այս բնույթի հղումներով: Այդ դեպքում էկրանի ընթերցիչ օգտագործողը, որը նավարկում է էջի հղումներով, կլսի “PDF ձևաչափ, PDF ձևաչափ, PDF ձևաչափ…”: Որպես ընդհանուր կանոն` եթե նույն պատկերը այդ էջում օգտագործվում է մի քանի անգամ՝ հղելով այլ տեղեր, այլընտրանքային տեքստը հղումով պետք է ներկայացնի տարբերությունները:

Դեկորատիվ պատկերներ

Դեկորատիվ պատկերները չեն ներկայացնում կարևոր բովանդակություն, դրանք օգտագործվում են դասավորության կամ ոչ տեղեկատվական նպատակով, և չունեն հղում: Գրեթե բոլոր դեպքում բացատները (spacer) և դեկորատիվ պատկերները պետք է ունենան զրո alt տեքստ (alt=””).

ՕՐԻՆԱԿ 8


ՏԵՔՍՏ

Բաժանիչ

ԷՋԱՏԱԿԻ ՏԵՔՍՏ

8-րդ օրինակում ո՞ր alt ատրիբուտն է նպատակահարմար հորիզոնական բաժանիչ պատկերի համար:
A. “Դեկորատիվ գիծ”
B. “Էջատակի սկիզբ”
C. “Բաժանիչ”
D. alt=”” բավարար է:

Քանի որ այս պատկերը չի կրում բովանդակություն և ֆունկցիա, D տարբերակն ամենատեղին ընտրությունն է: A-ի նկարագրությունը նպատակահարմար չէ:

ՕՐԻՆԱԿ 9


ՁեռքսեղմումՄեր բիզնեսները խոստանում են լավագույն ծառայությունները, որոնք դուք գտնեք մոլորակում: Մեր թիմը պրոֆեսիոնալ վերապատրաստված է տրամադրելու հիանալի հաճախորդներին ծառայություններ պայմանագրային բանակցությունների ամբողջ գործընթացում: Հաճախորդների գոհունակությունը մեր առաջնահերթ խնդիրն է:

9-րդ օրինակի պատկերի համար ո՞ր alt ատրիբուտն է նպատակահարմար:
A. “Ձեռքսեղմում”
B. “Գործարարները սեղմում են ձեռքերը՝ պայմանավորվածությունը ավարտելու համար”
C. alt=”” բավարար է:
D. “Մենք երաշխավորում ենք մեր պրոֆեսիոնալ ծառայությունները”

Այս օրինակը վերլուծելով կարելի է որոշել՝ արդյոք պատկերը կարևո՞ր բովանդակություն է փոխանցում: Այս պարագայում այն այդքան էլ կարևոր չէ: Վեբի ներկա պրակտիկայում շատ նման պատկերների տրվում է նկարագրական այլընտրանքային տեքստ, թեև պատկերները կարծես թե չեն տրամադրում օգտակար բովանդակություն: C տարբերակը կլինի նպատակահարմար այս դեպքում, քանի որ պատկերը չի փոխանցում համապատասխան և կարևոր բովանդակություն: A և B տարբերակները նկարագրում են պատկերը, սակայն համարժեք չեն պատկերին: Վերջինս այս դեպքում ոչինչ չի պարունակում կամ միայն հուզական տրամադրություն և զգացում է առաջացնում:

Այլ խոսքով` պատկերը դեկորատիվ է: D տարբերակը ակնհայտորեն ճիշտ չէ, թեև հարկ է նշել, որ հավելյալ տեղեկությունները ներմուծվում են alt տեքստեր՝ փոխանցելու հավելյալ տեղեկություններ կամ ապահովելու հավելյալ հիմնաբառեր (keywords) որոնողական համակարգերի համար: Նման գործելակերպը չի համապատասխանում այլընտրանքային տեքստի օգտագործմանը:

Ընդլայնված պատկերներ

Կան դեպքեր, երբ այլընտրանքային տեքստը որոշելը կարող է ավելի բարդ լիներ: Բոլոր պատկերների փորձարկումը օգտագործողների, էկրանի ընթերցիչների, միայն տեքստային բրաուզերների կարող են օգնել՝ որոշելու այլընտրանքային տեքստն իրականացնելու ամենանպատակահարմար մեթոդն:

Պատկերային կոճակների ձևեր

Պատկերային կոճակները պետք է ունենան alt ատրիբուտ, որը կնկարագրի կոճակի ֆունկցիան: Պատկերային կոճակները հաճախ փոխանցում են վիզուալ գրավչություն կամ ստանդարտ ձևային կոճակների փոքր տարբերակները: Այլընտրանքային տեքստը պետք է նկարագրի, թե ինչ կլինի, եթե ընտրենք կոճակը, օրինակ՝ “Search”, “Submit”, “Register”, “Place your order”: Օրինակ՝ <input type=”image” alt=”Submit Search”>-ը կարող է նպատակահարմար լինել պատկերային կոճակների համար:

Պատկերային քարտեզներ

Երբ օգտագործում ենք client-side պատկերային քարտեզներ, գլխավոր պատկերը պետք է ունենա alt ատրիբուտ։ alt ատրիբուտը պետք է ներկայացնի որևէ բովանդակություն, որը ներկայացնում է պատկերը:

Օրինակ` եթե դուք ունեք Նյու Յորքի նահանգի քարտեզը, որը յուրաքանչյուր ռեգիոնի դեպքում ունի իր hotspot-ը, պատկերը կարող է ունենել alt ատրիբուտ “Նյու Յորքի ռեգիոն” արժեքով:

Եթե հիմնական պատկերը չի պարունակում բովանդակություն, բայց հիմնականում պարունակում է hotspots (օրինակ՝ նավիգացիոն բար), ապա alt=”” տեղին է:

Յուրաքանչյուր պատկերային քարտեզի hotspot (area էլեմենտ) պետք է ունենա համարժեք alt ատրիբուտ: Քանի hotspots-երը clickable են, ամեն մեկը պետք է ունենա այլընտրանքային տեքստ, որը կնկարագրի hotspot-ի ֆունկցիան:

Քանի որ hotspot-ները server-side պատկերային քարտեզների համար այլընտրանքային տեքստեր չեն կարող տրվել, և քանի որ դրանք անմատչելի են ստեղնաշարի կիրառման դեպքում, դրանք չպետք է օգտագործվեն:

Հետնապատկեր

Հնարավոր չէ ավելացնել այլընտրանքային տեքստեր ուղղակի CSS-ին կամ այլ հետնապատկերին: Պատկերները, որոնք պարունակում են բովանդակություն, չպետք է հիմնականում տեղադրվեն էջերում կամ բեքգրաունդում:

Հետնապատկերները, ամեն դեպքում, կարող են կիրառվել որպես դեկորատիվ, այսպիսով հեռացնելով պատկերը էջի բովանդակային հոսքից և հանելու դատարկ alt ատրիբուտի կարիքը:

Երբեմն հետնապատկերները օգտագործվում են բովանդակություն ներկայացնելու համար: Թեև ընդհանուր առմամբ պետք է խուսափել դրանից, ամեն դեպքում եթե դրանք օգտագործվում են, ցանկացած հետնապատկերի բովանդակություն պետք է մատչելի դարձվի:

Լոգոներ

Վեբում տարածված պրակտիկա է ունենալ սայթի հիմնական լոգո, որը հղում է դեպի գլխավոր էջ: Քանի որ սա բավականին ստանդարտ պրակտիկա է, պատկերի այլընտրանքային տեքստը ընկերության անվանումը դնելը (alt=”Acme Ընկերություն) բավարար է: Ճանաչելու լոգոն որպես լոգո (alt=”Acme ընկերության լոգո”) սովորաբար անհրաժեշտ չէ: Բովանդակությունը և ֆունկցիան “լոգո” չեն:

Ամփոփում

Թեև լինելով ամենամեծ խնդիրը, որն ազդում է վեբ մատչելիության վրա, կան շատ տարամետ և սխալ մեթոդներ այլընտրանքային տեքստերի իրականացման համար: Հետևելով վերոնշյալ հիմնական սկզբունքներին` վեբ ծրագրավորողները կարող են իրենց վեբ բովանդակությունը առավել մատչելի դարձնել հաշմանդամություն ունեցող մարդկանց համար:

  • Այլընտրանքային տեքստերի ավելացումը ամենահեշտ ձևն է մատչելիության սկզբունքները սովորելու և ամենադժվարը` վարպետանալու համար:
  • Այլընտրանքային տեքստերը կարող են ապահովվել alt ատրիբուտի կամ պատկերի հարակից կոնտեքստի միջոցով:
  • Յուրաքանչյուր պատկեր պետք է ունենա alt ատրիբուտ:
  • Այլընտրանքային տեքստերը պետք է`

- Ներկայացնեն պատկերի բովանդակություն և/կամ ֆունկցիա

- Լինեն հակիրճ

  • Այլընտրանքային տեքստերը չպետք է`

- Լինեն ավելորդ (լինեն նույնը, ինչ հարակից տեքստն է)

- Պարունակեն արտահայտություններ, ինչպես` “…-ի պատկերը” կամ “…-ի գրաֆիկան”

  • Համապատասխան այլընտրանքային տեքստերը պետք է կախված լինեն պատկերի բովանդակությունից:
  • Ֆունկցիոնալ պատկերների այլընտրանքային տեքստերը պետք է նկարագրեն ֆունկցիան, ինչպես նաև բովանդակություն:
  • Դեկորատիվ պատկերներն ունեն alt ատրիբուտի կարիք, բայց դրանք չպետք է լինեն զրոյական (alt=””):

Վեբ մատչելիությունը կտրուկ կբարելավվի, եթե այլընտրանքային տեքստերն ապահովվեն և ճիշտ իրականացվեն:

Տեղեկացնենք նաև, որ www.disabilityinfo.am-ը ևս կարող է ամբողջովին չհամապատասխանել այս ստանդարտներին, ինչ համար ներողություն ենք խնդրում՝ վստահեցնելով, որ հնարավորության դեպքում կայքի թերությունները կշտկվեն։ 

Տարածել
* Հրապարակման մեջ սխալներ նկատելու դեպքում նշեք տվյալ բառը կամ նախադասությունը և սեղմեք Shift + Enter:

Comments are closed.