Intro
Om det ikke er plass til hjelpetekst i grensesnittet kan help text være en god løsning. Den plasseres ved siden av det den skal forklare. For eksempel et text field. Hjelpeteksten vises når du klikker på spørsmålsikonet.
Egnet til å:
- Når det ikke er plass til hjelpetekst
- Når du vil at brukeren selv skal oppsøke tips og råd
Vurder noe annet:
- Må ikke forveksles med tooltip
- Om det er mye informasjon kan en synlig seksjon eller egen side være bedre
Anatomi
Demo
Varianter
Plassering
Help text har standard plassering over ikonet (top), men du kan selv bestemme plassering.
Innhold
Help text kan inneholde ren tekst. Om du har behov for innhold med interaktive elementer anbefales det å bruke et vanlig avsnitt som alltid er synlig for bruker.
Tilgjengelighet
Interaksjon Mus
Help text vises på klikk. Help text lukkes når brukeren klikker på ikonet eller utenfor popoveren.
Interaksjon Touch
Ikonet er ganske lite. Det bør derfor være god avstand til andre interaktive elementer for at det skal være enkelt å åpne help text med berøring.
Interaksjon Tastatur
Help text lukker seg automatisk når man flytter fokus fra ikonet.
| Kommando | Beskrivelse |
|---|---|
| Space | Åpne og lukke hjelpeteksten |
| Enter | Åpne og lukke hjelpeteksten |
| Esc | Lukke hjelpeteksten |
Interaksjon Skjermleser
Merk at innholdet i Help text blir ikke lest opp automatisk i det brukeren aktiverer ikonet, siden komponenten hverken flytter fokus eller bruker en ARIA live region.
Bruk
Tekstbredde og mengde
Innholdet i help text børe være kort og forståelig. Mye tekst kan virke mot sin hensikt. Om du har mye å forklare bør du vurdere andre virkemidler. For eksempel komponenten read more eller et avsnitt med synlig tekst.
Tekstbredde er viktig for både lesbarhet og plassen hjelpeteksten tar i grensesnittet. Smalere er bedre. Da vil ikke brukernes blikk føres så lang vekk fra elementet som blir forklart.
