Sobes.tech
Junior

Որ CSS հատկությունը կօգտագործեիք հասանելիությունը ապահովելու համար?

sobes.tech AI

Պատասխան AI-ից

aria-hidden: Թաքցնում է տարրն օգնական տեխնոլոգիաներից (էկրանային ընթերցողներից), եթե նրա ներկայությունը տեսողական է, բայց սիմանտիկապես ավելորդ կամ վնասակար է բովանդակության ըմբռնման համար:

tabindex: Կառավարում է ինտերակտիվ տարրերի ֆոկուսի հերթականությունը ստեղնաշարի միջոցով նավիգացիայի ժամանակ: -1 դուրս է բերում տարրն ստանդարտ հերթականությունից, 0 ներառում է այն, իսկ դրական արժեքները հստակ հերթականություն սահմանում են (ոչ խորհուրդ է տրվում մեծ մասի դեպքերում):

outline: Սահմանում է շրջանակ տարրին, երբ այն կենտրոնացված է: Կարևոր է պահել կամ ձևափոխել այն, որպեսզի ստեղնաշարի օգտվողները տեսնեն ակտիվ տարրը:

visually-hidden: Տեսողականորեն թաքցնում է տարրն, բայց պահում է նրա հասանելիությունը էկրանային ընթերցողների համար: Սովորաբար օգտագործվում է ձևի նշագծերը (label) թաքցնելու համար, երբ ինքնըստինքյան կառավարման տարրը տեսանելի է (օրինակ, պատկերակով կոճակ):

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

pointer-events: none: Դադարեցնում է մկնիկի միջոցով տարրին փոխազդեցությունը, բայց չի ազդում ստեղնաշարի և էկրանային ընթերցողների հասանելիության վրա: Կարող է օգտագործվել դեկորատիվ տարրերի համար, որոնք գտնվում են ակտիվ տարածքների վրա:

cursor: pointer: Փոխում է կուրսորի տեսքը, երբ այն անցնում է ինտերակտիվ տարրերի վրայով, ցույց տալով, որ դրանք սեղմելի են:

color և background-color: Կարևոր են բավարար կոնտրաստ ապահովելու համար տեքստի և ֆոնի միջև, ինչը կարևոր է տեսողական խանգարումներ ունեցող օգտվողների համար: Խորհուրդ է տրվում օգտագործել կոնտրաստի ստուգման գործիքներ՝ համապատասխան WCAG ստանդարտներին։