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

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.