Merge pull request #648 from italia/fix/review_accessibility

italia · Mar 22, 2022 · 165cbce · 165cbce · vercel · Mar 22, 2022
2 parents d75361e + 4be4ddc
commit 165cbce
Show file tree

Hide file tree

Showing 41 changed files with 714 additions and 319 deletions.
diff --git a/_data/examples.yml b/_data/examples.yml
@@ -13,6 +13,9 @@
     - name: Hero
       url: hero
       description: Pagina con vari esempi di Hero.
+    - name: Form con validazione
+      url: form
+      description: Pagina con esempio di form comprendente vari tipi di campi e validazione.
 
 - category: Esempi di template completi
   description: Questa area conterrà alcuni template di esempio generici. Per applicazioni della libreria su progetti reali, puoi anche consultare la pagina dei Progetti.

diff --git a/_data/nav.yml b/_data/nav.yml
@@ -92,6 +92,7 @@
     - title: Input Numerico
     - title: Input Calendario
     - title: Input Ora # TODO Not working properly yet
+    - title: Autocompletamento
     - title: Upload
     - title: Radio Button
     - title: Select

diff --git a/docs/componenti/alert.md b/docs/componenti/alert.md
@@ -64,7 +64,7 @@ Clicca sul bottone di chiusura per vedere la funzionalità di rimozione alert in
 
 <div class="alert alert-warning alert-dismissible fade show" role="alert">
   <strong>Attenzione</strong> Alcuni campi inseriti sono da controllare.
-  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+  <button type="button" class="close" data-dismiss="alert" aria-label="Chiudi avviso">
     <span aria-hidden="true">&times;</span>
   </button>
 </div>

diff --git a/docs/componenti/avatar.md b/docs/componenti/avatar.md
@@ -29,7 +29,7 @@ Ogni Avatar può essere associato ad un'azione, utilizzando per esso il tag `<a>
 
 {% capture callout %}
 
-##### Accessibilità delle immagini
+#### Accessibilità delle immagini
 
 Per ragioni di accessibilità è importante indicare all'interno dell'Avatar il nome dell'utente associato allo stesso.
 
@@ -566,7 +566,7 @@ Inserendo un `<div>` con classe `.avatar-status` all'interno dell'Avatar si otte
 
 {% capture callout %}
 
-##### Accessibilità dello stato
+#### Accessibilità dello stato
 
 Inserire un `<span>` riservato agli screen reader con indicazione dello stato dell'utenza: `<span class="sr-only">Stato: (stato utenza)</span>`
 {% endcapture %}{% include callout.html content=callout type="accessibility" %}

diff --git a/docs/componenti/bottoni.md b/docs/componenti/bottoni.md
@@ -16,7 +16,11 @@ Per aggiungere un bottone personalizzato, è sufficiente utilizzare la classe `.
 
 Le classi `.btn` sono state pensate per essere utilizzate con l'elemento `<button>`. Tuttavia, è possibile applicare lo stile per i bottoni anche ad elementi di tipo `<a>` o `<input>`, anche se alcuni browser potrebbero mostrare un rendering lievemente diverso.
 
+{% capture callout %}
+#### Accessibilità
+
 In questi casi, non dimenticare di utilizzare in modo appropriato gli attributi `role="button"` per trasmettere il loro scopo alle tecnologie assistive.
+{% endcapture %}{% include callout.html content=callout type="accessibility" %}
 
 {% capture example %}
 <a class="btn" href="#" role="button">Link</a>
@@ -74,49 +78,39 @@ La classe `.disabled` usa `pointer-events: none` per provare a disabilitare l'at
 
 E' possibile aggiungere un'icona personalizzata al bottone con la classe `.btn-icon` in aggiunta alla classe `.btn` e alle relative varianti cromatiche e di dimensione.
 
+{% capture callout %}
+#### Accessibilità icone
+
+Valutare caso per caso se l'icona ha bisogno di una descrizione `aria-label` o se è preferibile nasconderla (perché non significativa) con l'attributo `aria-hidden="true"`
+{% endcapture %}{% include callout.html content=callout type="accessibility" %}
+
 {% capture example %}
 <button class="btn btn-success btn-lg btn-icon">
-<svg class="icon icon-white">
-<use
-      href="{{
-        site.baseurl
-      }}/dist/svg/sprite.svg#it-star-full"
-    ></use>
-</svg>
-<span>Icon Button Lg</span>
+  <svg class="icon icon-white" aria-label="Attenzione">
+    <use href="{{site.baseurl}}/dist/svg/sprite.svg#it-warning-circle"></use>
+  </svg>
+  <span>Icon Button Lg</span>
 </button>
 
 <button class="btn btn-primary btn-icon">
-<svg class="icon icon-white">
-<use
-      href="{{
-        site.baseurl
-      }}/dist/svg/sprite.svg#it-star-full"
-    ></use>
-</svg>
-<span>Icon Button</span>
+  <svg class="icon icon-white" aria-hidden="true">
+    <use href="{{site.baseurl}}/dist/svg/sprite.svg#it-star-full"></use>
+  </svg>
+  <span>Icon Button</span>
 </button>
 
 <button class="btn btn-danger btn-sm btn-icon">
-<svg class="icon icon-secondary">
-<use
-      href="{{
-        site.baseurl
-      }}/dist/svg/sprite.svg#it-star-full"
-    ></use>
-</svg>
-<span>Icon Button Sm</span>
+  <svg class="icon icon-secondary" aria-hidden="true">
+    <use href="{{site.baseurl}}/dist/svg/sprite.svg#it-star-full"></use>
+  </svg>
+  <span>Icon Button Sm</span>
 </button>
 
 <button class="btn btn-info btn-xs btn-icon">
-<svg class="icon icon-danger">
-<use
-      href="{{
-        site.baseurl
-      }}/dist/svg/sprite.svg#it-star-full"
-    ></use>
-</svg>
-<span>Icon Button Xs</span>
+  <svg class="icon icon-danger" aria-hidden="true">
+    <use href="{{site.baseurl}}/dist/svg/sprite.svg#it-star-full"></use>
+  </svg>
+  <span>Icon Button Xs</span>
 </button>
 {% endcapture %}{% include example.html content=example %}
 
@@ -128,39 +122,39 @@ Inoltre è possibile applicare un contorno cerchiato dell'icona utilizzando un c
 
 {% capture example %}
 <button class="btn btn-success btn-lg btn-icon">
-<span class="rounded-icon">
-<svg class="icon icon-success">
-<use href="{{site.baseurl}}/dist/svg/sprite.svg#it-user"></use>
-</svg>
-</span>
-<span>Round Icon Lg</span>
+  <span class="rounded-icon">
+    <svg class="icon icon-success" aria-hidden="true">
+      <use href="{{site.baseurl}}/dist/svg/sprite.svg#it-user"></use>
+    </svg>
+  </span>
+  <span>Round Icon Lg</span>
 </button>
 
 <button class="btn btn-primary btn-icon">
-<span class="rounded-icon">
-<svg class="icon icon-primary">
-<use href="{{site.baseurl}}/dist/svg/sprite.svg#it-user"></use>
-</svg>
-</span>
-<span>Round Icon</span>
+  <span class="rounded-icon">
+    <svg class="icon icon-primary" aria-hidden="true">
+      <use href="{{site.baseurl}}/dist/svg/sprite.svg#it-user"></use>
+    </svg>
+  </span>
+  <span>Round Icon</span>
 </button>
 
 <button class="btn btn-danger btn-sm btn-icon">
-<span class="rounded-icon rounded-secondary">
-<svg class="icon icon-white">
-<use href="{{site.baseurl}}/dist/svg/sprite.svg#it-user"></use>
-</svg>
-</span>
-<span>Round Icon Sm</span>
+  <span class="rounded-icon rounded-secondary">
+    <svg class="icon icon-white" aria-hidden="true">
+      <use href="{{site.baseurl}}/dist/svg/sprite.svg#it-user"></use>
+    </svg>
+  </span>
+  <span>Round Icon Sm</span>
 </button>
 
 <button class="btn btn-secondary btn-xs btn-icon">
-<span class="rounded-icon rounded-danger">
-<svg class="icon icon-white">
-<use href="{{site.baseurl}}/dist/svg/sprite.svg#it-user"></use>
-</svg>
-</span>
-<span>Round Icon Xs</span>
+  <span class="rounded-icon rounded-danger">
+    <svg class="icon icon-white" aria-hidden="true">
+      <use href="{{site.baseurl}}/dist/svg/sprite.svg#it-user"></use>
+    </svg>
+  </span>
+  <span>Round Icon Xs</span>
 </button>
 {% endcapture %}{% include example.html content=example %}
 

diff --git a/docs/componenti/callout.md b/docs/componenti/callout.md
@@ -16,7 +16,7 @@ Al titolo può essere aggiunta un'icona a scelta fra quelle disponibili, avendo
 
 {% capture callout %}
 
-##### Accessibilità
+#### Accessibilità
 
 Nel caso l'icona comunicasse visivamente contenuti non disponibili nel testo (ad esempio un allarme o una conferma) questa andrà affiancata da un testo riservato agli screen reader: `<span class="sr-only">Testo alternativo</span>`
 {% endcapture %}{% include callout.html content=callout type="accessibility" %}

diff --git a/docs/componenti/collapse.md b/docs/componenti/collapse.md
@@ -69,6 +69,18 @@ Molteplici `<button>` o `<a>` possono mostrare o nascondere un elemento se ognun
 
 Gli elmenti richiudibili sono molto spesso mostrati in gruppo, tipicamente usati per approfondire voci o argomenti mostrati nelle singole barre cliccabili.
 
+{% capture callout %}
+#### Accessibilità
+
+Assicurati di aggiungere `aria-expanded` all'elemento di controllo. Questo attributo trasmette esplicitamente lo stato corrente dell'elemento comprimibile legato al controllo a screen reader e tecnologie assistive simili. Se l'elemento comprimibile è chiuso in modo predefinito, l'attributo sull'elemento di controllo dovrebbe avere il valore `aria-expanded="false"`. Se imposti l'elemento comprimibile aperto in modo predefinito utilizzando la classe `show`, sul controllo invece imposta `aria-expanded="true"`. Il plugin attiva/disattiva automaticamente questo attributo sul controllo in base all'apertura o alla chiusura dell'elemento richiudibile (via JavaScript, o perché l'utente ha attivato un altro elemento di controllo anch'esso legato allo stesso elemento richiudibile). Se il componente HTML dell'elemento di controllo non è un bottone (ad esempio un `<a>` o `<div>`), l'attributo `role="button"` dovrebbe essere aggiunto al componente.
+
+Inoltre, se il tuo elemento di controllo si riferisce a un singolo elemento richiudibile – cioè l'attributo `data-target` sta puntando a un selettore `id` – potresti aggiungere un ulteriore attributo `aria-controls` all'elemento di controllo, contenente l'`id` dell'elemento richiudibile. I moderni screen reader e tecnologie assistive simili fanno uso di questo attributo per fornire agli utenti scorciatoie aggiuntive per navigare direttamente all'elemento richiudibile stesso.
+
+L'elemento richiudibile deve avere un `role="region"` con attributo `aria-labelledby` associato all'`id` del suo elemento di controllo.
+
+_Bootstrap Italia estende le funzionalità di Bootstrap implementando i comandi via tastiera descritti nelle [WAI-ARIA Authoring Practices 1.1 accordion pattern](https://www.w3.org/TR/wai-aria-practices-1.1/#accordion)._
+{% endcapture %}{% include callout.html content=callout type="accessibility" %}
+
 {% capture example %}
 
 <div id="collapseDiv1" class="collapse-div">
@@ -149,6 +161,12 @@ Per ottenere un gruppo di elementi _mutuamente_ richiudibili (o _accordion_), è
 
 Più gruppi di collapse o accordion possono essere annidati.
 
+{% capture callout %}
+#### Accessibilità collapse e accordion annidati
+
+Utilizzare questo approccio solo quando strettamente necessario: dal punto di vista dell'accessibilità non si tratta di una soluzione ottimale.
+{% endcapture %}{% include callout.html content=callout type="accessibility" %}
+
 {% capture example %}
 
 <div id="collapseDiv2" class="collapse-div">
@@ -216,18 +234,6 @@ Più gruppi di collapse o accordion possono essere annidati.
 </div>
 {% endcapture %}{% include example.html content=example %}
 
-{% capture callout %}
-**Accessibilità**
-
-Assicurati di aggiungere `aria-expanded` all'elemento di controllo. Questo attributo trasmette esplicitamente lo stato corrente dell'elemento comprimibile legato al controllo a screen reader e tecnologie assistive simili. Se l'elemento comprimibile è chiuso in modo predefinito, l'attributo sull'elemento di controllo dovrebbe avere il valore `aria-expanded="false"`. Se imposti l'elemento comprimibile aperto in modo predefinito utilizzando la classe `show`, sul controllo invece imposta `aria-expanded="true"`. Il plugin attiva/disattiva automaticamente questo attributo sul controllo in base all'apertura o alla chiusura dell'elemento richiudibile (via JavaScript, o perché l'utente ha attivato un altro elemento di controllo anch'esso legato allo stesso elemento richiudibile). Se il componente HTML dell'elemento di controllo non è un bottone (ad esempio un `<a>` o `<div>`), l'attributo `role="button"` dovrebbe essere aggiunto al componente.
-
-Inoltre, se il tuo elemento di controllo si riferisce a un singolo elemento richiudibile – cioè l'attributo `data-target` sta puntando a un selettore `id` – potresti aggiungere un ulteriore attributo `aria-controls` all'elemento di controllo, contenente l'`id` dell'elemento richiudibile. I moderni screen reader e tecnologie assistive simili fanno uso di questo attributo per fornire agli utenti scorciatoie aggiuntive per navigare direttamente all'elemento richiudibile stesso.
-
-L'elemento richiudibile deve avere un `role="region"` con attributo `aria-labelledby` associato all'`id` del suo elemento di controllo.
-
-_Bootstrap Italia estende le funzionalità di Bootstrap implementando i comandi via tastiera descritti nelle [WAI-ARIA Authoring Practices 1.1 accordion pattern](https://www.w3.org/TR/wai-aria-practices-1.1/#accordion)._
-{% endcapture %}{% include callout.html content=callout type="accessibility" %}
-
 ## Sfondo primario
 
 Applicando classi aggiuntive al wrapper `.collapse-div` è possibile utilizzare il colore primario come sfondo degli header.

diff --git a/docs/componenti/dropdown.md b/docs/componenti/dropdown.md
@@ -16,7 +16,7 @@ Per l'attivazione di un dropdown è sufficiente racchiudere il link per l'apertu
 
 {% capture callout %}
 
-##### Accessibilità
+#### Accessibilità
 
 Lo standard [WAI ARIA](https://www.w3.org/TR/wai-aria/) definisce un widget [`role="menu"`](https://www.w3.org/TR/wai-aria/#menu), che però è specifico per i menu applicativi che attivano azioni o funzioni. I menu ARIA possono contenere solo voci di menu, voci di menu di caselle di controllo, voci di menu dei pulsanti di opzione, gruppi di pulsanti di opzione e sottomenu.
 

diff --git a/docs/componenti/notifiche.md b/docs/componenti/notifiche.md
@@ -51,14 +51,14 @@ notificationShow('idNotification', 6000)
 
 {% capture callout %}
 
-##### Accessibilità
+#### Accessibilità
 
 Per ragioni di accessibilità è necessario:
 
 - che il titolo `<h5>` contenuto nella Notification abbia un ID univoco
 - che questo ID venga usato come valore della proprietà `aria-labelledby` nel `<div>` della Notification
 - che il `<div>` della Notification abbia la proprietà `role="alert"`
-  {% endcapture %}{% include callout.html content=callout type="accessibility" %}
+{% endcapture %}{% include callout.html content=callout type="accessibility" %}
 
 ## Esempio
 

diff --git a/docs/componenti/overlay.md b/docs/componenti/overlay.md
@@ -85,6 +85,8 @@ Aggiungendo all'Overlay Panel la classe `.overlay-black` si ottiene un overlay d
 Per ottenere un Overlay Panel con icona centrata in verticale ed orizzontale aggiungere la classe `.overlay-icon`.
 
 {% capture callout %}
+#### Accessibilità
+
 Ricordarsi di aggiungere un testo alternativo per Screen Reader che comunichi lo stesso messaggio dell'icona.
 {% endcapture %}{% include callout.html content=callout type="accessibility" %}
 

diff --git a/docs/componenti/popover.md b/docs/componenti/popover.md
@@ -13,7 +13,7 @@ I popovers richiedono il [plugin tooltip]({{ site.baseurl }}/docs/componenti/too
 
 {% capture callout %}
 
-##### Accessibilità
+#### Accessibilità
 
 I popover funzionano sia con la tastiera che per gli utenti dotati di tecnologia assistiva.
 Allo stesso modo di quanto avviene per i [Tooltip]({{ site.baseurl }}/docs/componenti/tooltip/),

diff --git a/docs/componenti/progress-indicators.md b/docs/componenti/progress-indicators.md
@@ -66,7 +66,7 @@ Le Progress Bar sono costruite con due elementi HTML, CSS in linea per impostare
 
 {% capture callout %}
 
-##### Accessibilità
+#### Accessibilità
 
 Per rendere accessibile l’elemento `.progress-bar` sono necessari alcuni attributi come role e aria.
 {% endcapture %}{% include callout.html content=callout type="accessibility" %}

diff --git a/docs/componenti/rating.md b/docs/componenti/rating.md
@@ -49,6 +49,8 @@ Le `<label>` contengono le icone delle stelle e la descrizione per Screen Reader
 Per visualizzare una label descrittiva aggiungere la classe `.rating-label` al `<fieldset>` e un tag `<legend>` all'inizio dello stesso.
 
 {% capture callout %}
+#### Accessibilità
+
 Il tag `<legend>` contiene testo aggiuntivo per Screen Reader all'interno di uno `<span class="sr-only">`.
 
 La label con il numero di stelle dev'essere contenuta in uno `<span>` semplice.
@@ -94,6 +96,8 @@ Aggiungendo la classe `.rating-read-only` al `<fieldset>` si ottiene un Rating n
 Si consiglia di utilizzare l'attributo `disabled` sugli input radio.
 
 {% capture callout %}
+#### Accessibilità versione sola lettura
+
 Per rendere accessibile il contenuto è necessario aggiungere un tag `<legend>` con classe `.sr-only` e nascondere gli input radio utilizzando `aria-hidden="true"`.
 {% endcapture %}{% include callout.html content=callout type="accessibility" %}