{"id":140,"date":"2024-08-12T14:04:00","date_gmt":"2024-08-12T14:04:00","guid":{"rendered":"https:\/\/www.accessibilita.digital\/?p=140"},"modified":"2024-08-23T11:53:08","modified_gmt":"2024-08-23T11:53:08","slug":"come-usare-bootstrap-per-laccessibilita-web","status":"publish","type":"post","link":"https:\/\/www.accessibilita.digital\/come-usare-bootstrap-per-laccessibilita-web\/","title":{"rendered":"Come usare Bootstrap per l'accessibilit\u00e0 web"},"content":{"rendered":"

Bootstrap \u00e8 un framework CSS<\/b> molto diffuso ed utilizzato da numerosi sviluppatori. La stessa AGID<\/b>, l\u2019Agenzia di riferimento in Italia per il web e l\u2019accessibilit\u00e0, ha creato Bootstrap Italia<\/a>, una versione personalizzata dello stesso framework per lo sviluppo dei siti della Pubblica Amministrazione<\/b>.<\/p>\n\n

I framework CSS<\/h2>\n

Vi sono anche altri framework come Foundation e Bulma<\/b>, anch\u2019essi molto interessanti e con i loro vantaggi. Personalmente posso consigliare di iniziare da Bootstrap e poi, in caso di necessit\u00e0 per alcuni progetti che gi\u00e0 usano altri framework, approcciarsi anche ad altre soluzioni.<\/p>\n

In effetti i vari framework ormai contengono anche molti componenti dinamici predefiniti<\/b>, come i caroselli di immagini<\/a>, gli accordion<\/a>, i modali<\/a> e via dicendo, tutti realizzati con il supporto di Javascript<\/b>. Al giorno d\u2019oggi usare un framework CSS di partenza pu\u00f2 essere molto utile<\/b>, al quale poi applicheremo le personalizzazioni necessarie tramite un foglio di stile (file CSS) separato.<\/p>\n

In molti casi io includo i file di Bootstrap e poi un file personalizzato come \u201cstyle.css\u201d o \u201cstyle-template.css\u201d per le modifiche specifiche che mi servono. Anche qui non abbiamo una regola precisa: una buona pratica \u00e8 tenere sempre inalterato il file originale del framework<\/b>, anche perch\u00e9 poi potremmo doverlo aggiornare e perdere quindi eventuali modifiche, e fare tanti file CSS aggiuntivi quanti ce ne servono.<\/p>\n

Potremmo anche creare un file CSS<\/strong> per ogni breakpoint<\/a>, cio\u00e8 per ogni \u201cpunto di rottura\u201d che definisce il cambio di visualizzazione da un tipo di dispositivo ad un altro<\/b>, in genere si tratta di desktop larghi, desktop normali, tablet, telefono.<\/p>\n

Le classi CSS per il supporto all’accessibilit\u00e0<\/h2>\n

Anzitutto, \u00e8 bene sapere che Bootstrap tiene molto in considerazione il tema dell\u2019accessibilit\u00e0<\/a>. Ad esempio, con la classe \u201cvisually-hidden\u201d, ma anche con il supporto alla \u201cReduced motion\u201d per utenti che preferiscono avere meno elementi dinamici<\/strong> all\u2019interno dei siti web.<\/p>\n

Lettori di schermo<\/h3>\n

Nelle versioni precedenti di Bootstrap si usava la classe sr-only<\/a>, cio\u00e8 “screen reader only”, una classe dedicata ai lettori di schermo per nascondere un testo lasciandolo per\u00f2 visibile nell’HTML<\/strong>. Infatti, usare display:none in CSS significa nascondere un testo anche alle tecnologie assistive<\/strong>. In modo simile, da Bootstrap 5 \u00e8 stata introdotta la classe visually-hidden<\/a> che ha sostituito sr-only<\/a>.<\/p>\n

Inoltre, \u00e8 solito usare classi come “sr-only-focusable”<\/strong> oppure “visually-hidden-focusable”<\/strong> che hanno la stessa funzione dei precedenti, cio\u00e8 rendere il contenuto nascosto all’utente normale e lasciarlo visibile nell’HTML, ma allo stesso tempo rendendolo raggiungibile dallo stato di “focus”<\/strong>, cio\u00e8 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<\/strong>.<\/p>\n

Riduzione dei movimenti<\/h3>\n

Bootstrap include il supporto per la funzionalit\u00e0 prefers-reduced-motion<\/a>. Quando consentiamo all’utente di specificare la propria preferenza per il movimento ridotto<\/strong>, la maggior parte degli effetti di transizione CSS<\/strong> 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\u00f9 impattanti<\/strong>, come gli spinner, saranno rallentate.<\/p>\n

Nei browser che supportano questa impostazione e in cui l’utente non ha segnalato esplicitamente la sua preferenza, Boostrap utilizza propriet\u00e0 scroll-behavior<\/strong> per permettere lo scorrimento fluido.<\/p>\n

Anche se non usiamo Bootstrap, pu\u00f2 essere utile utilizzare questa impostazione per ridurre le animazioni<\/strong> nel nostro sito. Per fare un esempio, l’ho usata in alcuni miei progetti, come Swiccy<\/a>, dove nel file style.css<\/a> ho rimosso le animazioni qualora l’utente dovesse preferire una ridotta mobilit\u00e0.<\/p>\n

@media (prefers-reduced-motion:reduce) {<\/code>
\n\u00a0.animated, .animated * { animation:none !important; }<\/code>
\n}<\/code><\/p>\n

Bootstrap Italia<\/h2>\n

\u00c8 utile conoscerlo anche perch\u00e9 sta diventando la base per lavorare alla realizzazione dei nuovi siti della Pubblicazione Amministrazione<\/b>, ed \u00e8 pienamente utilizzabile per la realizzazione di siti custom<\/b> o anche di temi personalizzati<\/b> per CMS come WordPress o altri.<\/p>\n

La versione pi\u00f9 recente si basa su Boostrap v5, e include gi\u00e0 molti componenti utili, ad esempio i caroselli realizzati tramite Splide<\/a>.<\/p>\n

Nella documentazione ufficiale<\/a> possiamo trovare le istruzioni all’uso<\/strong> e la lista dei componenti<\/strong> supportati, oltre alle varie utilit\u00e0 e alle indicazioni relative ai form<\/a>.<\/p>\n

Chiaramente il codice HTML e CSS restano di nostra responsabilit\u00e0<\/strong>, ma questi strumenti possono aiutarci a realizzare siti pi\u00f9 facilmente conformi<\/strong> alle normative sull’accessibilit\u00e0, ad esempio per ci\u00f2 che riguarda il contrasto del colore<\/a>, e ridurre i tempi di sviluppo<\/strong>, anzich\u00e9 dover realizzare un foglio di stile completamente personalizzato. Oltretutto, al giorno d’oggi \u00e8 quasi impossibile non utilizzare delle librerie Javascript o dei plugin per realizzare certi componenti, quindi questi framework possono davvero aiutarci.<\/p>\n

Ricordiamoci sempre di verificare il lavoro fatto con l’aiuto di tool automatici<\/a> per scansionare e rilevare eventuali problemi di accessibilit\u00e0<\/strong>.<\/p>\n

Le icone<\/h2>\n

Alcuni framework CSS offrono anche la possibilit\u00e0 di avere delle icone<\/strong>, come Bootstrap Icons<\/a>, o in alternativa possiamo usare anche FontAwesome<\/a>.<\/p>\n

Bootstrap Italia usa uno sprite svg<\/strong> per includere le icone, che dovremo poi inserire tramite tag <use>. Nella documentazione ufficiale<\/a> possiamo trovare alcuni esempi.<\/p>\n

<svg class=\"icon\"><use href=\"\/bootstrap-italia\/dist\/svg\/sprites.svg#it-tool\" xlink:href=\"\/bootstrap-italia\/dist\/svg\/sprites.svg#it-tool\"><\/use><\/svg><\/code><\/p>\n

Queste icone sono solitamente di pura decorazione e non hanno necessit\u00e0 di usare un testo alternativo, quello a cui dovremmo fare attenzione \u00e8 di non associare la stessa icona a usi completamente diversi<\/strong>. Per capirci, se usiamo il “chevron up”, cio\u00e8 la freccetta verso l’alto<\/strong>, per indicare l’apertura di un men\u00f9, non dovremmo<\/strong> poi usarla per indicare la chiusura di un accordion.<\/p>\n

Link utili<\/h2>\n