Sobes.tech
Junior

Jakou vlastnost CSS byste použili k zajištění přístupnosti?

sobes.tech AI

Odpověď od AI

aria-hidden: Skryje prvek před asistenčními technologiemi (čtečky obrazovky), pokud je jeho přítomnost vizuální, ale semanticky nadbytečná nebo škodlivá pro pochopení obsahu.

tabindex: Řídí pořadí zaostření interaktivních prvků při navigaci pomocí klávesnice. -1 vyloučí prvek ze standardního pořadí, 0 jej zahrne, a kladné hodnoty určují explicitní pořadí (nedoporučuje se ve většině případů).

outline: Nastaví rámeček kolem prvku, když je v zaostření. Je důležité jej zachovat nebo stylizovat tak, aby uživatelé s klávesnicí viděli aktivní prvek.

visually-hidden: Vizuálně skryje prvek, ale zachová jeho dostupnost pro čtečky obrazovky. Často se používá k skrytí popisků formulářů (label), když je samotný ovládací prvek viditelný (například ikona tlačítka).

.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 interakci s prvkem pomocí myši, ale neovlivní přístupnost přes klávesnici a čtečky obrazovky. Může být použit pro dekorativní prvky nad aktivními oblastmi.

cursor: pointer: Mění vzhled kurzoru při najetí na interaktivní prvky, naznačující jejich klikatelnost.

color a background-color: Jsou důležité pro zajištění dostatečného kontrastu mezi textem a pozadím, což je kritické pro uživatele se zrakovým postižením. Doporučuje se používat nástroje pro kontrolu kontrastu v souladu se standardy WCAG.