<fieldsetclass="rating"><legend>Rating</legend><inputtype="radio"id="star5a"name="ratingA"value="5"/><labelclass = "full"for="star5a"><svgclass="icon icon-sm"aria-hidden="true"><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-star-full"></use></svg><spanclass="visually-hidden">Valuta 5 stelle su 5</span></label><inputtype="radio"id="star4a"name="ratingA"value="4"/><labelclass = "full"for="star4a"><svgclass="icon icon-sm"aria-hidden="true"><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-star-full"></use></svg><spanclass="visually-hidden">Valuta 4 stelle su 5</span></label><inputtype="radio"id="star3a"name="ratingA"value="3"/><labelclass = "full"for="star3a"><svgclass="icon icon-sm"aria-hidden="true"><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-star-full"></use></svg><spanclass="visually-hidden">Valuta 3 stelle su 5</span></label><inputtype="radio"id="star2a"name="ratingA"value="2"/><labelclass = "full"for="star2a"><svgclass="icon icon-sm"aria-hidden="true"><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-star-full"></use></svg><spanclass="visually-hidden">Valuta 2 stelle su 5</span></label><inputtype="radio"id="star1a"name="ratingA"value="1"/><labelclass = "full"for="star1a"><svgclass="icon icon-sm"aria-hidden="true"><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-star-full"></use></svg><spanclass="visually-hidden">Valuta 1 stella su 5</span></label></fieldset>
Con Label
Per visualizzare una label descrittiva aggiungere la classe .rating-label al <fieldset> e un tag <legend> all’inizio dello stesso.
Accessibilità
Il tag <legend> contiene testo aggiuntivo per Screen Reader all’interno di uno <span class="visually-hidden">.
La label con il numero di stelle dev’essere contenuta in uno <span> semplice.
<fieldsetclass="rating rating-label"><legend><spanclass="visually-hidden">Valutazione</span><span>4 stelle</span><spanclass="visually-hidden">su 5</span></legend><inputtype="radio"id="star5b"name="ratingB"value="5"/><labelclass = "full"for="star5b"><svgclass="icon icon-sm"aria-hidden="true"><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-star-full"></use></svg><spanclass="visually-hidden">Valuta 5 stelle su 5</span></label><inputtype="radio"id="star4b"name="ratingB"value="4"checked/><labelclass = "full"for="star4b"><svgclass="icon icon-sm"aria-hidden="true"><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-star-full"></use></svg><spanclass="visually-hidden">Valuta 4 stelle su 5</span></label><inputtype="radio"id="star3b"name="ratingB"value="3"/><labelclass = "full"for="star3b"><svgclass="icon icon-sm"aria-hidden="true"><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-star-full"></use></svg><spanclass="visually-hidden">Valuta 3 stelle su 5</span></label><inputtype="radio"id="star2b"name="ratingB"value="2"/><labelclass = "full"for="star2b"><svgclass="icon icon-sm"aria-hidden="true"><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-star-full"></use></svg><spanclass="visually-hidden">Valuta 2 stelle su 5</span></label><inputtype="radio"id="star1b"name="ratingB"value="1"/><labelclass = "full"for="star1b"><svgclass="icon icon-sm"aria-hidden="true"><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-star-full"></use></svg><spanclass="visually-hidden">Valuta 1 stella su 5</span></label></fieldset>
Sola lettura
Aggiungendo la classe .rating-read-only al <fieldset> si ottiene un Rating non modificabile di sola lettura.
Si consiglia di utilizzare l’attributo disabled sugli input radio.
Accessibilità versione sola lettura
Per rendere accessibile il contenuto è necessario aggiungere un tag <legend> con classe .visually-hidden e nascondere gli input radio utilizzando aria-hidden="true".
<fieldsetclass="rating rating-read-only"><legendclass="visually-hidden">Valutazione 4 stelle su 5</legend><inputtype="radio"id="star5c"name="ratingC"value="5"aria-hidden="true"disabled/><labelclass = "full"for="star5c"><svgclass="icon icon-sm"aria-hidden="true"><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-star-full"></use></svg><spanclass="visually-hidden">Valuta 5 stelle su 5</span></label><inputtype="radio"id="star4c"name="ratingC"value="4"checkedaria-hidden="true"disabled/><labelclass = "full"for="star4c"><svgclass="icon icon-sm"aria-hidden="true"><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-star-full"></use></svg><spanclass="visually-hidden">Valuta 4 stelle su 5</span></label><inputtype="radio"id="star3c"name="ratingC"value="3"aria-hidden="true"disabled/><labelclass = "full"for="star3c"><svgclass="icon icon-sm"aria-hidden="true"><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-star-full"></use></svg><spanclass="visually-hidden">Valuta 3 stelle su 5</span></label><inputtype="radio"id="star2c"name="ratingC"value="2"aria-hidden="true"disabled/><labelclass = "full"for="star2c"><svgclass="icon icon-sm"aria-hidden="true"><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-star-full"></use></svg><spanclass="visually-hidden">Valuta 2 stelle su 5</span></label><inputtype="radio"id="star1c"name="ratingC"value="1"aria-hidden="true"disabled/><labelclass = "full"for="star1c"><svgclass="icon icon-sm"aria-hidden="true"><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-star-full"></use></svg><spanclass="visually-hidden">Valuta 1 stella su 5</span></label></fieldset>
Breaking change
Aggiunto attributo aria-hidden="true" sulle icone perché lo scopo è già trasmesso agli strumenti assistivi dal testo con classe .visually-hidden.