M

MLOG

Magyar

Átfogó útmutató az akadálymentes eszköztippek megvalósításához hover és fókusz állapotok használatával, biztosítva a használhatóságot minden felhasználó számára, beleértve a fogyatékkal élőket is.

Eszköztippek Megvalósítása: Akadálymentes Információk Hover és Fókusz Állapotokban

Az eszköztippek (tooltip) kicsi, kontextuális súgóüzenetek, amelyek akkor jelennek meg, amikor a felhasználó az egérmutatót egy elem fölé viszi, vagy egy elemre fókuszál. Kiegészítő információkat nyújthatnak, egyértelműsíthetik egy elem célját, vagy tippeket adhatnak egy funkció használatához. Azonban az eszköztippek könnyen akadálymentesítési rémálommá válhatnak, ha nem megfelelően implementálják őket. Ez az útmutató bemutatja azokat a legjobb gyakorlatokat, amelyek segítségével mindenki számára használható eszköztippeket hozhatunk létre, beleértve a fogyatékkal élő felhasználókat is.

Miért Fontos az Akadálymentesítés az Eszköztippeknél?

Az akadálymentesítés nem csupán a megfelelőségről szól; arról van szó, hogy jobb felhasználói élményt teremtsünk mindenki számára. Ha az eszköztippek nem akadálymentesek, az kizárhatja azokat a felhasználókat, akik kisegítő technológiákra, például képernyőolvasókra, billentyűzetes navigációra vagy beszédfelismerő bevitelre támaszkodnak. Vegyük fontolóra ezeket a forgatókönyveket:

Az akadálymentesítési legjobb gyakorlatok követésével biztosíthatjuk, hogy az eszköztippek javítsák, ne pedig akadályozzák a felhasználói élményt mindenki számára.

Az Akadálymentes Eszköztippek Fő Alapelvei

A következő alapelvek kulcsfontosságúak az akadálymentes eszköztippek létrehozásához:

  1. Alternatív hozzáférés biztosítása: Győződjön meg róla, hogy az eszköztippek mind egérmutatóval (hover), mind billentyűzetfókusszal elérhetők.
  2. ARIA attribútumok használata: Használjon ARIA (Accessible Rich Internet Applications) attribútumokat az eszköztippek megfelelő azonosítására és leírására a kisegítő technológiák számára.
  3. Fókusz kezelése: Irányítsa, hová kerüljön a fókusz, amikor egy eszköztipp megjelenik és eltűnik.
  4. Elegendő kontraszt biztosítása: Biztosítson elegendő színkontrasztot az eszköztipp szövege és háttere között.
  5. Elegendő idő biztosítása: Adjon a felhasználóknak elég időt az eszköztipp tartalmának elolvasására.
  6. Elutasíthatóvá tétel: Biztosítson egyértelmű módot az eszköztipp bezárására.
  7. A túlhasználat kerülése: Az eszköztippeket takarékosan és csak akkor használja, ha szükséges.

Megvalósítási Technikák

1. Hover és Fókusz Használata

Az akadálymentes eszköztippek legkritikusabb szempontja annak biztosítása, hogy mind az egeret, mind a billentyűzetet használók számára elérhetőek legyenek. Ez azt jelenti, hogy az eszköztippnek meg kell jelennie mind az egérmutató fölé mozgatásakor (hover), mind akkor, amikor az elem fókuszt kap.

HTML:

<a href="#" aria-describedby="tooltip-example">Példa Link</a>
<div id="tooltip-example" role="tooltip" style="display: none;">Ez egy példa eszköztipp.</div>

CSS:

a:hover + div[role="tooltip"],
a:focus + div[role="tooltip"] {
  display: block;
  position: absolute;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 5px;
  z-index: 1000; /* Biztosítja, hogy az eszköztipp felül legyen */
}

Magyarázat:

JavaScript (Haladó Vezérlés - Opcionális):

Bár a CSS képes kezelni az egyszerű megjelenítést/elrejtést, a JavaScript robusztusabb vezérlést tesz lehetővé, különösen, ha az eszköztippek dinamikusan generálódnak, vagy összetettebb viselkedést igényelnek.

const link = document.querySelector('a[aria-describedby="tooltip-example"]');
const tooltip = document.getElementById('tooltip-example');

link.addEventListener('focus', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('blur', () => {
  tooltip.style.display = 'none';
});

link.addEventListener('mouseover', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('mouseout', () => {
  tooltip.style.display = 'none';
});

2. ARIA Attribútumok Használata

Az ARIA attribútumok elengedhetetlenek a szemantikai információk biztosításához a kisegítő technológiák számára. Íme a legfontosabb attribútumok részletezése:

Példa:

<button aria-describedby="help-tooltip">Küldés</button>
<div id="help-tooltip" role="tooltip" aria-hidden="true">Kattintson ide az űrlap elküldéséhez.</div>

JavaScript (az aria-hidden-hez):

const button = document.querySelector('button[aria-describedby="help-tooltip"]');
const tooltip = document.getElementById('help-tooltip');

button.addEventListener('focus', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('blur', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});

button.addEventListener('mouseover', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('mouseout', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});

3. A Fókusz Kezelése

Amikor egy eszköztipp megjelenik, általában *nem szabad* elvennie a fókuszt a kiváltó elemtől. A fókusznak a tooltipet aktiváló elemen kell maradnia. Ez biztosítja, hogy a billentyűzetet használók váratlan megszakítások nélkül folytathassák a navigációt az oldalon.

Azonban előfordulhatnak olyan helyzetek, amikor *szeretnénk* a fókuszt az eszköztippre helyezni, különösen, ha az eszköztipp interaktív elemeket (pl. linkeket, gombokat) tartalmaz. Ebben az esetben győződjön meg arról, hogy:

A legtöbb esetben az egyszerűség és a használhatóság érdekében előnyösebb elkerülni a fókuszkezelést magán az eszköztippen belül.

4. Megfelelő Kontraszt Biztosítása

A színkontraszt kulcsfontosságú az olvashatóság szempontjából. Győződjön meg arról, hogy az eszköztippek szövegének színe elegendő kontraszttal rendelkezik a háttérszínhez képest. A Web Content Accessibility Guidelines (WCAG) legalább 4.5:1 kontrasztarányt javasol normál méretű szöveghez és 3:1 arányt nagy méretű (18pt vagy 14pt félkövér) szöveghez.

Használjon online kontrasztellenőrzőket annak ellenőrzésére, hogy a színválasztásai megfelelnek-e az akadálymentesítési szabványoknak. Példák kontrasztellenőrzőkre:

Példa (Jó Kontraszt):

.tooltip {
  background-color: #000;
  color: #fff;
}

Példa (Gyenge Kontraszt):

.tooltip {
  background-color: #fff;
  color: #eee;
}

5. Elegendő Idő Biztosítása

A felhasználóknak elegendő időre van szükségük az eszköztipp tartalmának elolvasásához. Kerülje a túl gyorsan eltűnő eszköztippeket. Bár nincs mágikus szám, törekedjen legalább néhány másodperces minimális megjelenítési időre. Emellett az eszköztippnek addig kell láthatónak maradnia, amíg a felhasználó a kiváltó elem fölött tartja az egeret vagy fókuszál rá. Ha más események miatt el kell tüntetnie az eszköztippet, jelezze, hogy az be fog záródni.

Ha az eszköztipp tartalma hosszú, fontolja meg egy olyan módszer biztosítását, amellyel a felhasználó manuálisan bezárhatja az eszköztippet (pl. egy bezárás gomb vagy az Escape billentyű megnyomása).

6. Elutasíthatóvá Tétel

Bár az eszköztippek gyakran automatikusan eltűnnek, amikor a felhasználó elmozdítja az egeret vagy leveszi a fókuszt, jó gyakorlat egyértelmű módot biztosítani a manuális bezárásukra, különösen hosszú vagy interaktív elemeket tartalmazó eszköztippek esetében.

Módszerek az Eszköztippek Bezárására:

Példa (Bezárás Gomb):

<div id="my-tooltip" role="tooltip" aria-hidden="true">
  Ez az én eszköztippem tartalma.
  <button onclick="hideTooltip()">Bezárás</button>
</div>

Példa (Escape Billentyű):

document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    hideTooltip(); // Cserélje le a saját eszköztipp elrejtő függvényére
  }
});

7. A Túlhasználat Kerülése

Az eszköztippeket takarékosan és csak akkor szabad használni, ha valóban hasznos információt nyújtanak. A túlhasználatuk zsúfolttá teheti a felületet, elvonhatja a felhasználók figyelmét, és frusztráló élményt okozhat.

Alternatívák az Eszköztippekre:

Haladó Megfontolások

Dinamikus Tartalom

Ha az eszköztipp tartalma dinamikusan generálódik (pl. egy API-ból töltődik be vagy felhasználói bevitel alapján frissül), győződjön meg róla, hogy az aria-describedby attribútum és az eszköztipp láthatósága megfelelően frissül. Használjon JavaScriptet ezen frissítések kezelésére.

Pozicionálás

Gondosan fontolja meg az eszköztippek pozicionálását. Kerülje el, hogy fontos tartalmat takarjanak el vagy elrendezési elcsúszásokat okozzanak. Vegye figyelembe a különböző képernyőméreteket és felbontásokat, és használjon CSS-t annak biztosítására, hogy az eszköztippek mindig a nézetablakon belül láthatók legyenek.

Mobileszközök

Az eszköztippek hagyományosan a hover interakciókra támaszkodnak, amelyek nem állnak rendelkezésre az érintőképernyős eszközökön. Mobileszközök esetében fontolja meg alternatív interakciós módszerek használatát, mint például:

Az Eszköztippek Tesztelése

Alaposan tesztelje az eszköztippeket, hogy biztosítsa azok akadálymentességét minden felhasználó számára. Használjon manuális tesztelés és automatizált akadálymentesítési tesztelőeszközök kombinációját.

Tesztelési Módszerek:

Nemzetköziesítés (i18n) és Lokalizáció (l10n)

Amikor globális közönség számára fejleszt eszköztippeket, tartsa szem előtt a nemzetköziesítést és a lokalizációt:

Összegzés

Az akadálymentes eszköztippek megvalósítása gondos tervezést és a részletekre való odafigyelést igényel. Az ebben az útmutatóban vázolt elvek és technikák követésével olyan eszköztippeket hozhat létre, amelyek mindenki számára használhatók, képességeiktől függetlenül. Ne feledje, hogy az akadálymentesítés egy folyamatos folyamat, ezért folytassa az eszköztippek tesztelését és finomítását, hogy azok minden felhasználó igényeinek megfeleljenek.

Források

Eszköztippek Megvalósítása: Akadálymentes Információk Hover és Fókusz Állapotokban | MLOG