Det skal være lett for en som benytter seg av tastaturnavigering å se hvilke objekter som er i fokus. Hvis brukeren ikke klarer å se hvor fokus på siden er, vil tastaturnavigering bli umulig.
Definerer du et spesifikt utseende for objekter som er i fokus, sikrer du at brukeren forstår hvor på siden han eller hun befinner seg. Du kan gjerne bruke samme utseende som objektet får når du holder musepilen over. Fokusmarkering definerer du ved hjelp av CSS-koding:
HTML/CSS kodeeksempel
Tydeliggjøre elementer som er i fokus:
<html>
<head>
<style type="text/css">
input.text:focus {
background-color: #7FFF00;
color: #000;
}
input[type=checkbox]:focus + label, input[type=radio]:focus + label {
background-color: #FF6;
color: #000;
}
</style>
</head>
<body>
<form method="post" action="form.php">
<p><label for="fname">Name: </label>
<input class="text" type="text" name="fname" id="fname" />
</p>
<p>
<input type="radio" name="sex" value="male" id="sm" /> <label for="sm">Male</label><br />
<input type="radio" name="sex" value="female" id="sf" /> <label for="sf">Female</label>
<p>
</form>
</body>
</html>
Se dette eksempelet i praksis (åpner i nytt vindu)