Létrehozása kérhető kiegészítő tooltip

A tooltip már kiderült, ha lebeg a kurzort a kis ikon a jobb felső sarokban, mint a lenti képen:

Mint minden projekt, az első gondolatom - ami a HTML elemeket használt elrendezést komponenst. De kiderült, hogy a tooltip nem megfelelő HTML tag. És ha nincs megfelelő szemantikai elem, állunk szemben probléma. Gondoskodnunk kell arról, hogy a segítő technológiák (AT), ami általában úgy értelmezik, és közvetítse azt jelenti keresztül szemantika, megérteni, mi az elemek, és mit csinálnak.

Van ARIA attribútumok segítségével?

Ha csak a HTML nem elég, hogy a tételek olvashatóbb az AT használhatja a ARIA attribútumok. Például létrehozhat egy állapotjelző sáv használata nélkül gyengén támogatott előrehaladás tag. Hozzon létre egy folyamatjelző sáv, és adja meg a megjelenését és könnyen CSS segítségével, de ha használ divs és span'y, akkor az ilyen elemek valami olyan történt, meg kell adni az AT valami. Itt fogjuk segíteni, és ARIA attribútumok, mint a role = »progressbar» és társait aria-valuenow, ária-valuemin és ária-valuemax. Adjunk hozzá néhány egyszerű JS és frissíti az értéket az ária-valuenow ahogy mozog a felhasználó a szakaszban. Ha érdekel, akkor jobban ismerik a témát a MDN. Kitűnő.

Van ARIA attribútum értéke azt jelzi, tooltip - tooltip. Képesség role = »tooltip» egyértelműen azt mondja, AT, hogy ez az elem egy tooltip.

De tooltips általában kiderült akció után a többi elem.

Térjünk vissza az alapokhoz. A Wikipédiából: «tooltip, infotype vagy tip - közös eleme a grafikus felületen. Együtt használják a kurzor, általában milyen típusú mutató. A felhasználó mozgatja a mutatót az elem nem kattint rá, akkor van egy tooltip - egy kis pop-up blokk információt a tételt, amelyre a kurzor. A mobil operációs rendszerek Tooltips nem jelennek meg, mivel nincs kurzor (meg lehet jeleníteni őket az egérrel). "

Volt egy probléma a részét a „mobil operációs rendszerek Tooltips nem jelennek meg, mivel nincs meg a kurzor.” A mobil felhasználók ugyanolyan jogokkal, mint bármely más, és meg kell látni azt alátámasztó információk. Használja az egeret vagy az ujját, akkor képesnek kell lennie arra, hogy megértsék, mi a Framingham pontszámot. Vagyis a tooltip rendelkezésre kell állnia minden kontextusban. És ez az, ahol a szórakozás kezdődik.

Felhívás a nyitó / záró a tooltip

Megértem, hogy az események lebeg nekem elég (bár a vevői megrendelések csak lebeg), mert ha nem érintőképernyők digitális tollal, amely képes futtatni lebeg, akkor nem fogja látni a tooltip a tooltip, ami elfogadhatatlan.

Azt a célt tűzte ki, hogy hozzon létre egy tooltip, hogy jelenik meg, ha lebeg, és az ikonra kattintva.

Érdemes megjegyezni, hogy egyes tooltips egyaránt jól működjön érintse meg a képernyőn, valamint a hagyományos képernyők további beavatkozás nélkül. Példaként, a formában eszköztippeket segédcímkék a beviteli mezők, mint például Heydon Pickering. Ilyen forgatókönyv AT, jelezve, hogy ez a darab az elemleírás leírja a mező tartalmát, vagy funkcionális elég role = »tooltip» párosítva ária-describedby. Tooltip címke ebben az esetben nagyon egyszerű, hiszen az már világos, hogy ez az elem jelentette. Meg kell mutatni / elrejtése szöveget, ha a beviteli mező lesz a hangsúly. És ez lehet tenni egy pár sornyi CSS. A módszer nagy és ugyanúgy működik, mint egy egér, és érintse meg a képet.

Azonban, ha van egy példa arra, hogy az én projekt, ez nem olyan egyszerű. És úgy tűnik, nem én vagyok az egyetlen, aki nem tudja, hogyan lehet megoldani ezt a problémát.

Eszembe jutott, néhány ötlet a végrehajtás a tooltip:

Nyissa ki és zárja keresztül tooltip gombra. Alapértelmezésben a tooltip rejtett, így az AT nem olvassa a szöveget hangosan. Tooltip megszakítja az áramlás a tartalmat a projekt, ezért fel kell tüntetni a kereslet.

„On demand” azt jelenti, hogy a tooltip jelenik meg, amikor lebeg az egér, kattintson, ujjunkkal, akkor megkapja a fókuszt.

Alapértelmezésben a tooltip van rejtve a display: none, és megjelenik a kereslet.

Apropó szemantika is hasznos lehet egy linket , ami azt jelzi, egy bizonyos részben az oldalon, ami az én esetemben volt egy elem a hegyével.

Nem használható , és a gombot nyitó és záró tooltip, kell egy JS.

Kerülje gomb, jobb kihasználása , referencia lehet használni semmit, és a gombok használata formában. Itt nem értek egyet. Ha tud hívni egy nagyon jó ok, hogy miért nem használja ezt a gombot, írjon nekem.

használatakor figyelembe kell vennie / emlékezni - ha használja , és a csúcs a referencia:

Ha elrejti a szöveget a display: none tag és mutasd meg, így a fókuszt, az AT nem tudja olvasni a szöveget megjeleníteni, mint tartalmi kapcsolatok bejelentett első fókusz és újra be, amikor a szöveg jelenik meg belülről egy hivatkozást display: block.