CSS: mostrare i suggerimenti di compilazione dei form in modo accessibile

  • CSS
  • Gabriele Romanato

In questo articolo vedremo come far apparire i suggerimenti di compilazione dei form in modo accessibile con i CSS.

Supponiamo di avere questa struttura HTML:


<div>
    <label for="username">Username</label>
    <input type="text" name="username" id="username">
    <div class="field-info">Only alphabetic characters are allowed.</div>
</div>

Nascondiamo l'elemento contenente il suggerimento usando la proprietà opacity e quindi lo mostriamo usando il selettore adiacente quando il campo riceve il focus.


.field-info {
    margin-top: 0.6rem;
    opacity: 0;
    transition: opacity 300ms ease-in;
}

input:focus + .field-info {
    opacity: 1;
}

Usare l'opacità di un elemento ci permette di non creare problemi ai lettori di schermo, cosa che invece accade usando ad esempio display: none.

Torna su