Bootstrap è un framework CSS molto diffuso ed utilizzato da numerosi sviluppatori. La stessa AGID, l’Agenzia di riferimento in Italia per il web e l’accessibilità, ha creato Bootstrap Italia, una versione personalizzata dello stesso framework per lo sviluppo dei siti della Pubblica Amministrazione.
Vi sono anche altri framework come Foundation e Bulma, anch’essi molto interessanti e con i loro vantaggi. Personalmente posso consigliare di iniziare da Bootstrap e poi, in caso di necessità per alcuni progetti che già usano altri framework, approcciarsi anche ad altre soluzioni.
In effetti i vari framework ormai contengono anche molti componenti dinamici predefiniti, come i caroselli di immagini, gli accordion, i modali e via dicendo, tutti realizzati con il supporto di Javascript. Al giorno d’oggi usare un framework CSS di partenza può essere molto utile, al quale poi applicheremo le personalizzazioni necessarie tramite un foglio di stile (file CSS) separato.
In molti casi io includo i file di Bootstrap e poi un file personalizzato come “style.css” o “style-template.css” per le modifiche specifiche che mi servono. Anche qui non abbiamo una regola precisa: una buona pratica è tenere sempre inalterato il file originale del framework, anche perché poi potremmo doverlo aggiornare e perdere quindi eventuali modifiche, e fare tanti file CSS aggiuntivi quanti ce ne servono.
Potremmo anche creare un file CSS per ogni breakpoint, cioè per ogni “punto di rottura” che definisce il cambio di visualizzazione da un tipo di dispositivo ad un altro, in genere si tratta di desktop larghi, desktop normali, tablet, telefono.
Le classi CSS per il supporto all’accessibilità
Anzitutto, è bene sapere che Bootstrap tiene molto in considerazione il tema dell’accessibilità. Ad esempio, con la classe “visually-hidden”, ma anche con il supporto alla “Reduced motion” per utenti che preferiscono avere meno elementi dinamici all’interno dei siti web.
Lettori di schermo
Nelle versioni precedenti di Bootstrap si usava la classe sr-only, cioè “screen reader only”, una classe dedicata ai lettori di schermo per nascondere un testo lasciandolo però visibile nell’HTML. Infatti, usare display:none in CSS significa nascondere un testo anche alle tecnologie assistive. In modo simile, da Bootstrap 5 è stata introdotta la classe visually-hidden che ha sostituito sr-only.
Inoltre, è solito usare classi come “sr-only-focusable” oppure “visually-hidden-focusable” che hanno la stessa funzione dei precedenti, cioè rendere il contenuto nascosto all’utente normale e lasciarlo visibile nell’HTML, ma allo stesso tempo rendendolo raggiungibile dallo stato di “focus”, cioè quella situazione in cui l’elemento riceve “l’attenzione” del cursore dell’utente, sia quando clicca l’elemento o quando lo raggiunge con il tasto Tab.
Riduzione dei movimenti
Bootstrap include il supporto per la funzionalità prefers-reduced-motion. Quando consentiamo all’utente di specificare la propria preferenza per il movimento ridotto, la maggior parte degli effetti di transizione CSS in Bootstrap (ad esempio, quando si apre o si chiude una finestra di dialogo modale o l’animazione scorrevole nei caroselli) saranno disabilitati e le animazioni più impattanti, come gli spinner, saranno rallentate.
Nei browser che supportano questa impostazione e in cui l’utente non ha segnalato esplicitamente la sua preferenza, Boostrap utilizza proprietà scroll-behavior per permettere lo scorrimento fluido.
Anche se non usiamo Bootstrap, può essere utile utilizzare questa impostazione per ridurre le animazioni nel nostro sito. Per fare un esempio, l’ho usata in alcuni miei progetti, come Swiccy, dove nel file style.css ho rimosso le animazioni qualora l’utente dovesse preferire una ridotta mobilità.
È utile conoscerlo anche perché sta diventando la base per lavorare alla realizzazione dei nuovi siti della Pubblicazione Amministrazione, ed è pienamente utilizzabile per la realizzazione di siti custom o anche di temi personalizzati per CMS come WordPress o altri.
La versione più recente si basa su Boostrap v5, e include già molti componenti utili, ad esempio i caroselli realizzati tramite Splide.
Nella documentazione ufficiale possiamo trovare le istruzioni all’uso e la lista dei componenti supportati, oltre alle varie utilità e alle indicazioni relative ai form.
Chiaramente il codice HTML e CSS restano di nostra responsabilità, ma questi strumenti possono aiutarci a realizzare siti più facilmente conformi alle normative sull’accessibilità, ad esempio per ciò che riguarda il contrasto del colore, e ridurre i tempi di sviluppo, anziché dover realizzare un foglio di stile completamente personalizzato. Oltretutto, al giorno d’oggi è quasi impossibile non utilizzare delle librerie Javascript o dei plugin per realizzare certi componenti, quindi questi framework possono davvero aiutarci.
Ricordiamoci sempre di verificare il lavoro fatto con l’aiuto di tool automatici per scansionare e rilevare eventuali problemi di accessibilità.
Le icone
Alcuni framework CSS offrono anche la possibilità di avere delle icone, come Bootstrap Icons, o in alternativa possiamo usare anche FontAwesome.
Bootstrap Italia usa uno sprite svg per includere le icone, che dovremo poi inserire tramite tag <use>. Nella documentazione ufficiale possiamo trovare alcuni esempi.
Queste icone sono solitamente di pura decorazione e non hanno necessità di usare un testo alternativo, quello a cui dovremmo fare attenzione è di non associare la stessa icona a usi completamente diversi. Per capirci, se usiamo il “chevron up”, cioè la freccetta verso l’alto, per indicare l’apertura di un menù, non dovremmo poi usarla per indicare la chiusura di un accordion.
