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.