Hopp til innholdet

cjohansen.no

Semantiske tastetrykk

Når vi lager for eksempel brukerveiledninger for programvare er det interessant å gi brukeren tastekombinasjoner som utfører enkelte oppgaver. Dette kan vi gjøre på en semantisk måte slik at også de som ikke ser hele designet på siden vår får det med seg.

Aktuelle elementer

Det er denne gangen snakk om kbd-elementet. Fra standarden får vi vite at kbd (keyboard) "indicates text to be entered by the user" - altså tekst som brukeren skal angi.

Bruksområder

<kbd> kan altså brukes til alt som er input fra brukeren. Dette kan være enkelte tastetrykk. Det kan også være eksempelinput, eller tekst en bruker skal taste inn. Det enkle eksempelet kan være tastetrykk som del av en instruksjon til brukeren: 

<ol>
    <li>Trykk <kbd>Ctrl</kbd></li>
    <li>Trykk deretter <kbd>c</kbd>, sett markøren der du ønsker å lime inn og trykk <kbd>v</kbd></li>
</ol>

Dette kan også fungere som elegante hooks for CSS, og man kan for eksempel style kbd-elementer som knapper ala tastaturknapper. Følgende er Martin Bekkelunds måte å style knapper på: 

kbd {
    padding: 0pt 3px;
    font-size: 110%;
    border-color: silver black black silver;
    border-style: solid;
    border-width: 3px;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

Andre måter å style på for å få elementet til å te seg som en knapp kan være å bruke en outset border eller bakgrunnsbilder som er mer realistiske som knapper.

Annen input fra brukeren

Annen input kan være tekst du forventer at brukeren skal skrive inn. Et eksempel: 

<p>
    Oppgi <kbd>cjohansen</kbd> i nettleseren, trykk
    <kbd class="button">Enter</kbd> og se at siden redirigeres
    til <a href="http://www.cjohansen.no">www.cjohansen.no</a>
</p>

Her har jeg også brukt en klasse for å skille mellom tastaturinput som er tekst og input som er tastetrykk. Dette kan jeg så benytte til å skille visuelt mellom tekst som brukeren skal skrive inn kontra knapper som brukeren skal trykke på.

Sitter du på flere gode anvendelsesområder for dette elementet? Ikke være redd for å dele med oss!

Publisert 5. desember 2007 under julekalender 2007, tilgjengelighet, teknikker og html.

Muligens relatert

2006 - 2012 Christian Johansen Creative Commons Lisens