it-swarm-eu.dev

Popisek k označení klávesové zkratky zahrnující kurzorové klávesy

V naší (webové) aplikaci chceme popisky (čtení: atributy atributů), které také označují zkratky pro tlačítka. Máme nějaké tlačítko, které zahrnuje kurzorové klávesy (šipky).

Zkusili jsme použít znaky jako ⬅ a ←, ale prostě nevypadají dobře. Zkoušeli jsme to také, např. "Levá šipka", ale to je trochu podrobně.

Jaký je dobrý způsob, jak toho dosáhnout?

2
Sietse

Možná byste mohli vyzkoušet písmo Dingbat se skutečnými klávesami na klávesnici? Něco takového:

alt text

1
fluxd

Popisky ze základního atributu „title“ jsou velmi omezené a nejsou vaší nejlepší volbou: prohlížeče je mohou nebo nemusí vyskakovat podle očekávání.

Myslím, že @Rahul komentář je v tomto ohledu velmi dobrý: možná budete chtít podívat na kompletní řešení popisů. Existuje spousta předem připravených knihoven, které vám poskytnou flexibilnější, solidnější a přitažlivější nástroje, které základní atribut „title“ obsahuje.

Pokud se díváte na atribut titulu z důvodu přístupnosti (jako záložní možnost u složitějších řešení popisů), pak si myslím, že verbální volba („Stiskněte levou šipku do ...“) je vaše nejlepší volba: čtečka obrazovky by si přečetla to pěkně.

1
FOR

Co se děje s vaší první ikonou? Vypadá to téměř dokonale. Bylo by samozřejmě lepší to vidět v souvislosti s vašimi dalšími ikonami „klávesových zkratek“, ale vypadá to, jako by sdělila důležité informace. Konkrétně „toto je levá kurzorová klávesa“.

Pokud chcete být extra jasný, můžete jej zbarvit podle toho, že je to nejpravděpodobnější barva klávesy, kterou uživatel stiskne. Možná by některé stínování a přetvoření ikony pomohlo zdůraznit její „klíčovou“.

0
Bobby Jack

Pokud se přesunete za použití atributu title a místo toho využijete řešení CSS, můžete pod ním poskytnout jak malý obrázek klávesové zkratky, tak i krátký popis. Existuje obrovská sbírka velmi zajímavých webových stránek a příklad obrázků „CSS Keyboard Key images“, které používají tuto frázi ve vyhledávání obrázků Google pro začátečníky, je tu erudovaná stránka někoho, kdo praskl tak, jak se to dělá na stránkách Stack Overflow viz: -

http://www.jimmyscode.com/css-styling-for-kbd-tags/

0
bobbyg