Aggiungere uno <span> con classe .bottom-nav-badge all’interno dell’icona per visualizzare dei badge con indicazioni numeriche relative, ad esempio, al numero di messaggi non letti.
Aggiungere uno <span> con classe .bottom-nav-alert all’interno dell’icona per identificare una sezione che richiede attenzione o presenta nuovi contenuti.
Accessibilità
I badge e gli alert sono nascosti agli screen reader. Per garantire l’accessibilità è necessario aggiungere uno <span> con classe .visually-hidden all’interno della label che contenga un testo esplicativo.
<navclass="bottom-nav"><ul><li><ahref="#"class="active"><divclass="badge-wrapper"><spanclass="bottom-nav-alert"></span></div><svgclass="icon"><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-comment"></use></svg><spanclass="bottom-nav-label">messaggi<spanclass="visually-hidden">ci sono 42 nuovi messaggi da leggere</span></span></a></li><li><ahref="#"><svgclass="icon"><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-camera"></use></svg><spanclass="bottom-nav-label">immagini</span></a></li><li><ahref="#"><divclass="badge-wrapper"><spanclass="bottom-nav-alert"></span></div><svgclass="icon"><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-file"></use></svg><spanclass="bottom-nav-label">documenti<spanclass="visually-hidden">ci sono 42 nuovi documenti da esaminare</span></span></a></li><li><ahref="#"><svgclass="icon"><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-star-outline"></use></svg><spanclass="bottom-nav-label">preferiti</span></a></li><li><ahref="#"><svgclass="icon"><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-settings"></use></svg><spanclass="bottom-nav-label">preferenze</span></a></li></ul></nav>