Documentazione specialistica – Criterio di successo 2.4.7 Focus visibile (AA)

Something else..

Documentazione specialistica – Criterio di successo 2.4.7 Focus visibile (AA)

Qualsiasi interfaccia utente utilizzabile tramite tastiera ha una modalità operativa in cui è visibile l’indicatore del focus.

Obiettivo

Consentire a una persona di identificare visivamente quale elemento dell’interfaccia ha il focus di tastiera.

Tecniche

1. Usare elementi di interfaccia che vengono evidenziati dal browser quando ricevono il focus di tastiera.

Molti browser (quelli compatibili con le UAAG) evidenziano il focus quando un elemento interattivo HTML riceve il focus di tastiera.

Esempi

1. Molti browser mostrano una barra lampeggiante per indicare il punto di inserimento nei

campi in cui è possibile digitare del testo (ad esempio campi di tipo “text”, “textarea”, “password”, “email”, “number”, “tel”, “url”, “search”). Perciò, quando si utilizzano questi tipi di campo, il focus di tastiera viene mostrato dal browser.

2. Molti browser mostrano un rettangolo punteggiato attorno ai link inseriti nella pagina HTML mediante il tag . Perciò, quando si utilizza il tag HTML per inserire link, il focus di tastiera viene mostrato dal browser.

2. Usare i CSS per cambiare l’aspetto visivo di un elemento di interfaccia quando riceve il focus di tastiera

L’aspetto visivo di un elemento di interfaccia quando riceve il focus di tastiera può essere controllato tramite CSS.

Esempi

1. Nell’esempio seguente i CSS vengono utilizzati per inserire un colore di sfondo quando un link riceve il focus di tastiera.

HTML

<ul>

<li><a href=”/chi-siamo”>Chi siamo </a></li>

<li><a href=”/contatti”>Contatti</a></li>

</ul>

</nav>

CSS

#menu a:hover, #menu a:active, #menu a:focus-visible {

background-color: #DCFFFF;

color:#000066;

}

2. Nell’esempio seguente, i CSS sono utilizzati per cambiare il colore di sfondo di un campo quando riceve il focus di tastiera.

<!doctype html>
<html lang=”it”>
<head>
<style>
input[type=text]:focus-visible {
outline:2px solid #0054AE;
outline-offset:2px;
}
input[type=checkbox]:focus + label, input[type=radio]:focus + label {
background-color:#1E2EB8;
color:#FFF;
}
</style>
</head>
<body>
<form>
<div>
<label for=”id_nome”>Nome: </label>
<input autocomplete=”name” type=”text” name=”nome” id=”id_nome”>
</div>
<div>
<input type=”radio” name=”sesso” value=”maschio” id=”sm”>
<label for=”sm”>Maschio</label>
</div>
<div>
<input type=”radio” name=”sesso” value=”femmina” id=”sf”>
<label for=”sf”>Femmina</label>
</div>
</form>
</body>
</html>

Ultimo aggiornamento

16 Aprile 2025, 22:44