Sobes.tech
Junior

Millist CSS omadust kasutaksite juurdepääsetavuse tagamiseks?

sobes.tech AI

Vastus AI-lt

aria-hidden: Peidab elemendi abivahenditehnoloogiatest (skrinnirid), kui see on visuaalselt olemas, kuid semantiliselt liig või võib sisu mõistmist häirida.

tabindex: Kontrollib interaktiivsete elementide fookusjärjestust klaviatuuriga navigeerimisel. -1 välistab elemendi tavapärasest järjekorrast, 0 lisab selle järjekorda, positiivsed väärtused määravad selge järjekorra (mitte soovitatav enamikul juhtudel).

outline: Määrab elemendi ümber raami, kui see on fookuses. Oluline on säilitada või stiilida see, et klaviatuurikasutajad näeksid aktiivset elementi.

visually-hidden: Visuaalselt peidab elemendi, kuid säilitab selle kättesaadavuse skrinnirididele. Sageli kasutatakse vormimärgi (label) peitmiseks, kui kontroll ise on nähtav (näiteks nupuvõti ikoonina).

.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: Keelab elemendiga suhtlemise hiirega, kuid ei mõjuta juurdepääsu klaviatuuri ega skrinniridide jaoks. Kasutatakse sageli dekoratiivsete elementide jaoks aktiivsete alade peal.

cursor: pointer: Muudab kursorit, kui see on interaktiivsete elementide kohal, näidates nende klikkitavust.

color ja background-color: Olulised piisava kontrasti tagamiseks teksti ja tausta vahel, mis on kriitiline nägemispuudega kasutajate jaoks. Soovitatav on kasutada kontrasti kontrollimise tööriistu vastavalt WCAG standarditele.