Componente list: altre segnalazioni di accessibilità

[Fupete]

Esiste già una discussione sul tema che ti interessa, o su un tema simile?

• Ho verificato e non esiste

Versione della libreria

2.9.0

Cosa

Raccolgo qui alcune segnalazioni di a11y sulle diverse varianti (oltre a quelle già presenti in altre issue per il componente):

• laddove ci sono icone o frecce svgmanca la corretta semantica per queste, a seconda di cosa deciso per altre issue simili c'è da implementare la miglior soluzione per (1) nasconderle agli SR laddove non aggiungono nulla con aria-hidden (es. frecce probabilmente) o (2) comunicarle agli SR, ad es. con role="img" e tag <title>dentro il tagprima di`.

• Nelle varianti di tipo menu laddove c'è un disabled attualmente è solo css. Andrebbe reso esplicito anche con la corretta semantica, es. usando aria-disabled="true" sull'elemento (referenza).

• Nelle varianti di tipo menu, laddove c'è un heading dovrebbe avere la sua corretta semantica h (h2-h6) a seconda del contesto.

• Nelle varianti di tipo menu, laddove c'è un separatore, andrebbe valutato di aggiungere il corretto role="separator" all'elemento...

Perché

Amichevole con i lettori di schermo.

Contesto

Verifiche di accessibilità sui componenti.

⚠️ Sarà da aggiornare lo status delle verifiche nella board census alla risoluzione.

Altro

Sarà da riportare anche in React kit e Angular kit alla risoluzione.

Sarebbe da verificare e risolvere anche in UI Kit Italia se necessario, adottando gli stili di testo corretti di heading nelle varianti di tipo meno, laddove c'è un heading, se presenti.

[zetareticoli]

Esiste già una discussione sul tema che ti interessa, o su un tema simile?

• Ho verificato e non esiste

Versione della libreria

2.9.0

Cosa

Raccolgo qui alcune segnalazioni di a11y sulle diverse varianti (oltre a quelle già presenti in altre issue per il componente):

• laddove ci sono icone o frecce svgmanca la corretta semantica per queste, a seconda di cosa deciso per altre issue simili c'è da implementare la miglior soluzione per (1) nasconderle agli SR laddove non aggiungono nulla con aria-hidden (es. frecce probabilmente) o (2) comunicarle agli SR, ad es. con role="img" e tag <title>`dentro il tagprima di.

@Fupete nel caso delle icone, l'attributo title fa parte di svg richiamato con <use> oppure di quello che lo contiene?

Ad esempio questo codice:

<svg class="icon" role="img"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-folder"></use></svg>

dovrebbe diventare questo:

<svg class="icon" role="img">
  <title>Icona cartella</title>
  <use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-folder"></use>
</svg>

[zetareticoli]

• Nelle varianti di tipo menu, laddove c'è un heading dovrebbe avere la sua corretta semantica h (h2-h6) a seconda del contesto.

Non possiamo conoscere il contesto specifico. Attualmente è presente <h4> che è in linea con l'intestazione della lista non di tipo menu.

[Fupete]

Ad esempio questo codice:

<svg class="icon" role="img"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-folder"></use></svg>

dovrebbe diventare questo:

<svg class="icon" role="img">
  <title>Icona cartella</title>
  <use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-folder"></use>
</svg>

La seconda versione qui sopra va bene.
Senza "Icona", "Immagine", ecc. nel testo. Solo <title>Cartella</title>.

[Fupete]

• Nelle varianti di tipo menu, laddove c'è un heading dovrebbe avere la sua corretta semantica h (h2-h6) a seconda del contesto.

Non possiamo conoscere il contesto specifico. Attualmente è presente <h4> che è in linea con l'intestazione della lista non di tipo menu.

Corretto. Infatti lascerei h4 però documenterei nella documentazione la solita frase messa altrove callout accessibility in cui si rimanda al contesto per scegliere il corretto valore gerarchico h2-h6 a seconda del contesto. Vedi per es. callout testo nella PR timeline.

[zetareticoli]

@Fupete ho aggiunto i callout negli esempi in cui sono stati aggiunti i tag h4 c00d85c