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.