All'interno di una pagina web l'utilizzo di un layout Skeleton è utile nel momento in cui la pagina dovrà caricare del contenuto dopo il suo primo rendering, attendendo il risultato da una chiamata asincrona o la scelta dell'utente.
<article > <div class="skeleton"> <div></div> <div></div> </div> <div class="content"> <h3 class="title"></h3> <p class="description"></p> </div> </article>
Ottenuto il contenuto, si potrà popolare il div e invertire la visibilità delle classi skeleton e content, mostrando i dati a video.
Benchè questo layout sia facile da creare, potrebbe non essere altrettanto intuitivo da leggere da parte degli screen reader, che come sappiamo utilizzano particolari attributi degli elementi per la lettura.
Riscriviamo dunque il codice.
<article class="default"> <div class="skeleton"> <div aria-hidden="true"></div> <div aria-hidden="true"></div> <span>Loading</span> </div> <div aria-busy="true" aria-live="polite"> <h3>Titolo</h3> <p>Descrizione</p> </div> </article>
Abbiamo aggiunto poche ma importanti informazioni.
- I div all'interno di skeleton risultano invisibili agli SR
- L'elemento span dovrà essere nascosto a monitor, impostando un position:absolute e dimensioni minime, in modo che solo lo SR ne legga il contenuto. L'utilizzatore medio capirà che il contenuto è in caricamento grazie ai precedenti div vuoti
- La porzione di contenuto, al primo caricamento verrà letta come "in caricamento" e tramite l'attributo aria-live, lo SR, verrà notificato al momento della popolazione.[l/i]
Per completare il giro, una volta popolato il layout possiamo nascondere lo skeleton e mostrare il contenuto
<article class="default"> <div class="skeleton" aria-hidden="true"> <!----> </div> <div aria-busy="false" aria-live="polite"> <!----> </div> </article>
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Impostare il forward degli header in un sito ASP.NET Core dietro a un reverse proxy
Ottimizzare il codice JavaScript utilizzando WeakMap e WeakSet
Organizzare il codice JavaScript utilizzando i moduli
Introduzione alla security con GitHub
Specificare il versioning nel path degli URL in ASP.NET Web API
Definire lo stile CSS in base alle dimensioni del container
Utilizzare la parola chiave nameof per referenziare i nomi dei parametri di un metodo in C#
Ottimizzare serializzazione e deserializzaione tramite le options con System.Text.Json
3 metodi JavaScript che ogni applicazione web dovrebbe contenere
Utilizzare .NET Framework con le Azure Function in modalità isolata
Ottimizzare la persistenza che coinvolge un solo oggetto con Entity Framework Core 7
Pubblicare la documentazione di un repository con GitHub Pages