A toggletip kontextuális segítség, amellyel kiegészítő információkat adhatunk a felhasználóknak.
Fejlesztői dokumentáció
Icon: A toggletippet aktiváló gomb.
Content: A toggletip szöveges tartalma és az azt befoglaló terület.
A toggletip négy irányba pozicionálható. A pozíciót a rendelkezésre álló hely határozza meg.
A content térben a többi felületi elem fölött helyezkedik el.
A komponens a design system sztenderd interakciós állapotainak logikáját követi.
A toggletip szélessége minimum 5rem és maximum 20rem. Magasságát a benne lévő tartalom határozza meg.
Ha a toggletip szövege hosszabb a maximális szélességnél, akkor több sorba törik.
A toggletip interaktív területe az ikon területe.
A toggletip az ikon újbóli kattintásával, az ikonon kívülre kattintással vagy az Esc billentyűvel zárható be.
A toggletipek és a tooltipek vizuálisan megegyeznek, de a működésük különbözik.
-
A toggletipek aktiválásra – kattintásra, koppintásra, billentyű lenyomására – jelennek meg, és interaktív elemeket is tartalmazhatnak.
-
A tooltipek hover vagy focused állapotban jelennek meg, és csak szöveget tartalmazhatnak.
A beviteli mező labelének egyértelműen le kell írnia, hogy milyen adatot várunk a felhasználótól. Ha a label kiegészítésre szorul, helper texttel vagy toggletippel segíthetünk a felhasználónak.
A helper text és a toggletip is helyben, navigálás nélkül elérhető, kontextuális segítség, ezért felfedezhetőbb és gyorsabb megoldás, mint például a súgó.
-
A helper textet a mező kitöltéséhez szükséges információk – például formátum – megjelenítésére használjuk.
-
A toggletip csak interakció után olvasható, ezért csak indokolt esetben, kevésbé fontos kiegészítő információkhoz használjuk.
Csak akkor használjunk helper textet vagy toggletipet, ha valóban szükség van rá! Érdemes felhasználói kutatásokkal vagy tesztekkel felmérni, hogy hol igényel segítséget a felhasználó.
A helper textet és a toggletipet a Label komponens tartalmazza.
A toggletip általában a Label része, de más felületi elemek magyarázatára is használhatjuk.
Ezekben az esetekben különös figyelmet kell fordítani az akadálymentesítésre. A toggletip alternatív szövegének utalnia kell arra, hogy melyik elemhez kapcsolódik.
A toggletipnek világosnak és tömörnek kell lennie. 1-2 rövid mondatnál lehetőleg ne legyen hosszabb.
-
Ha több információt szeretnénk közölni, válasszunk másik komponenst vagy linkeljünk a hosszabb tartalomra.
-
Segíti a tömörséget, ha csak az adott ponton releváns információkat tüntetjük fel. (Például ha egy időpontfoglalásnál e-mail címet kérünk, nem releváns, hogy hol tudja majd megváltoztatni az e-mail címét a felhasználó.)
A toggletip csak interakció után olvasható, ezért csak olyan, kiegészítő információk megjelenítésére használjuk, amelyekre nincs feltétlenül szükség a felület használatához vagy a beviteli mező helyes kitöltéséhez.
A komponens a design system kontrasztcélokkal generált szemantikus színeit használja, ezért megfelel az akadálymentesítési követelményeknek. A tokenizálás miatt ez színsémától és sötét vagy világos módtól függetlenül igaz.
A komponens a design system sztenderd interakciós állapotainak logikáját követi, ezért a kontrasztcélok a komponens minden interaktív állapotánál biztosítottak.
A kontraszt minimumokat a design system legsötétebb – sötét módban a legvilágosabb – hátterén generáljuk, ezért ez az arány minden más használható háttéren ennél csak jobb lehet.
Ha a komponenst nem tokenizált háttérszínen használjuk, manuálisan ellenőrizni kell a kontrasztot!
Aktiválás után a toggletip tartalmát egy live regionben tesszük elérhetővé a képernyőolvasó szoftvert használók számára. A live region assertive attribútumú, így a felhasználók egyből hallják a tartalmat.
A komponens fókuszálható a Tab billentyűvel, aktiválható a Space és az Enter billentyűvel és rendelkezik a design system sztenderd fókuszjelölőjével.
Az Esc billentyű megnyomása, más elemre való kattintás vagy a fókusz áthelyezése bezárja a toggletippet.
Nyitott állapotban az Enter újbóli megnyomása nem zárja be a toggletipet, hanem újratölti a live regiont. Így a képernyőolvasó szoftvert használók újra meghallgahatják a toggletip tartalmát.
Az ikon alternatív szövege: További információk: [Label]
A [Label] a toggletippet tartalmazó Label komponens címkéje. Ha toggletip nem a label része, az alternatív szövegről külön kell gondoskodni.
