Sobes.tech
Junior

Akú vlastnosť CSS by ste použili na zabezpečenie dostupnosti?

sobes.tech AI

Odpoveď od AI

aria-hidden: Skryje prvok pred pomocnými technológiami (čítačmi obrazovky), ak je jeho prítomnosť vizuálna, ale semanticky nadbytočná alebo škodlivá pre pochopenie obsahu.

tabindex: Riadi poradie zamerania interaktívnych prvkov pri navigácii pomocou klávesnice. -1 vylúči prvok zo štandardného poradia, 0 ho zahrnie, a kladné hodnoty určujú explicitné poradie (neodporúča sa vo väčšine prípadov).

outline: Nastaví rámik okolo prvku, keď je v zameraní. Je dôležité ho zachovať alebo štýlovať tak, aby používatelia s klávesnicou videli aktívny prvok.

visually-hidden: Vizuálne skryje prvok, ale zachová jeho dostupnosť pre čítače obrazovky. Často sa používa na skrytie popisov formulárov (label), keď je samotný ovládací prvok viditeľný (napríklad ikona tlačidla).

.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: Vypne interakciu s prvkom pomocou myši, ale neovplyvňuje dostupnosť pre klávesnicu a čítače obrazovky. Môže byť použitý pre dekoratívne prvky nad aktívnymi oblasťami.

cursor: pointer: Mení vzhľad kurzora pri prechode nad interaktívnymi prvkami, naznačujúc ich klikateľnosť.

color a background-color: Sú dôležité pre zabezpečenie dostatočného kontrastu medzi textom a pozadím, čo je kritické pre používateľov so zrakovým postihnutím. Odporúča sa používať nástroje na kontrolu kontrastu v súlade so štandardmi WCAG.