Jaką właściwość CSS użyłbyś, aby zapewnić dostępność?

aria-hidden: Ukrywa element przed technologiami wspomagającymi (czytnikami ekranowymi), jeśli jego obecność jest widoczna, ale semantycznie zbędna lub szkodliwa dla zrozumienia treści.

tabindex: Kontroluje kolejność ustawiania fokusu elementów interaktywnych podczas nawigacji za pomocą klawiatury. -1 wyklucza element z domyślnej kolejności, 0 włącza go do niej, a wartości dodatnie ustalają wyraźną kolejność (niezalecane w większości przypadków).

outline: Ustawia obramowanie wokół elementu, gdy jest on w fokusu. Ważne jest, aby je zachować lub stylizować, aby użytkownicy korzystający z klawiatury widzieli aktywny element.

visually-hidden: Ukrywa element wizualnie, ale zachowuje jego dostępność dla czytników ekranowych. Często używany do ukrywania etykiet formularzy (label), gdy sam element sterujący jest widoczny (np. ikona przycisku).

.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: Wyłącza interakcję z elementem za pomocą myszy, nie wpływając na dostępność dla klawiatury i czytników ekranowych. Może być używany do elementów dekoracyjnych na wierzchu aktywnych obszarów.

cursor: pointer: Zmienia wygląd kursora podczas najechania na elementy interaktywne, wskazując na ich klikalność.

color i background-color: Są ważne dla zapewnienia wystarczającego kontrastu między tekstem a tłem, co jest krytyczne dla użytkowników z zaburzeniami wzroku. Zaleca się korzystanie z narzędzi do sprawdzania kontrastu zgodnie ze standardami WCAG.