Sobes.tech
Junior

Milyen CSS tulajdonságot használnál az akadálymentesség biztosítására?

sobes.tech MI

Válasz az MI-től

aria-hidden: Elrejti az elemet a segédeszközöktől (képernyőolvasók), ha jelenléte vizuális, de szemantikailag redundáns vagy káros a tartalom megértéséhez.

tabindex: Ellenőrzi az interaktív elemek fókusz sorrendjét a billentyűzettel való navigáció során. A -1 kizárja az elemet a standard sorrendből, a 0 beilleszti a sorrendbe, a pozitív értékek pedig egyértelmű sorrendet határoznak meg (nem ajánlott a legtöbb esetben).

outline: Körvonalat állít be az elem körül, amikor fókuszban van. Fontos megtartani vagy stílusozni, hogy a billentyűzetes felhasználók lássák az aktív elemet.

visually-hidden: Vizuálisan elrejti az elemet, de megtartja az elérhetőségét a képernyőolvasók számára. Gyakran használják űrlap címkék (label) elrejtésére, amikor az irányítópult látható (például ikon gomb).

.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: Kikapcsolja az egérrel való interakciót az elemhez, de nem befolyásolja a billentyűzettel és képernyőolvasókkal való hozzáférhetőséget. Használható dekoratív elemek fölött, amelyek nem igényelnek interakciót.

cursor: pointer: Megváltoztatja a kurzor megjelenését, amikor az interaktív elemek fölé viszik, jelezve, hogy kattintható.

color és background-color: Fontos a megfelelő kontraszt biztosítása a szöveg és a háttér között, ami kritikus a látássérült felhasználók számára. Ajánlott a WCAG szabványoknak megfelelő kontrasztellenőrző eszközök használata.