Liste: multiline con icona. Gli <li> per il separatore sono troppo per gli screen reader

[giuliaghisini]

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

• Ho verificato e non esiste

Versione della libreria

3x

Cosa

Mella versione "multiline con icona" delle liste, c'è un li con dentro uno span per fare solamente la linea di separazione.
Il role="separator" è sul separatore ( e non sull'li), quindi lo screen reader legge "6 elementi" quando di fatto nella lista ci sono 3 elementi, e non è corretto.

Ho fatto una prova volante, provando a spostare lo span che da lo stile di separazione come ultimo elemento di un vero elemento li della lista, e graficamente mi sembra funzioni correttamente.

Perché

non corretto con i lettori di schermo

Contesto

No response

Altro

No response

[giuliaghisini]

nel caso sia un errore, saranno poi da correggere anche gli esempi su dev-kit

[zetareticoli]

Potremmo rimuovere del tutto l'elemento separatore fatto in HTML, preferendogli un semplice bordo in CSS?

[giuliaghisini]

Potremmo rimuovere del tutto l'elemento separatore fatto in HTML, preferendogli un semplice bordo in CSS?

sono d'accordo. Se lo fate su bsi, fatecelo poi sapere perchè dovremo adeguare gli esempi anche su dev-kit

[zetareticoli]

@Fupete ti trovi d'accordo con la rimovzione dell'elemento separatore, in favore di un semplice bordo?

[Fupete]

Ciao,

come condiviso anni fa durante la review con @cfabry, se c'è la necessità di un separatore in questa lista questo DEVE avere una sua semantica/ruolo ed essere annunciato agli strumenti assistivi. In teoria anche come elemento. Fu fatto in questa ottica. A me personalmente non torna quindi la tua issue @giuliaghisini.

[Fupete]

Ovviamente se @cfabry è disponibile a dare un'occhiata potremmo riguardarcelo. Ma per ora tenderei a non cambiare la logica.

[zetareticoli]

se ho capito bene, la segnalazione di @giuliaghisini parte da uno screen reader che non leggere l'elemento come separatore, perchè il role è reso così:

<li>
    <span class="divider" role="separator"></span>
  </li>

La sua proposta è di cambiarlo in:

<li role="separator">
    <span class="divider"></span>
  </li>

Io invece mi domando: perché la lista semplice solo testo ha i separatori resi come bordi CSS, e la multiline con icona (che è sostanzialmente la stessa cosa, eccetto aggiunta di elementi interni a ciascun <li>) ha i separatori come tag HTML vuoto? Non sarebbe più corretto se tutte le liste adottassero lo stesso approccio per i separatori?

[Fupete]

@zetareticoli ah sì, hai ragione. Stavo pensando alle liste per i menu sinceramente. Questa in cui la linea ha un significato di separazione ed ha già il markup giusto:

Le altre liste normali sì dovrebbero corrispondere alla lista semplice in effetti. È un refuso quello sul multiline probabilmente da correggere sì.

Lì ci manca un segno marker ma è già tracciato nell'altra issue dedicata.

[giuliaghisini]

si. inoltre lo screen reader, con il markup che c'è ora legge "8 elementi" anche se in realtà di elementi nella lista ce ne sono 4 perchè considera come elementi anche gli li che contengono il separatore.

Se si vuole mantenere un li per fare un separatore il role="separator" va messo sull' LI e non sull'elemento interno.

Non sono una grande fan di questo per fare liste dove ogni elemento ha una linea di separazione, preferisco stili css, però vedete voi

@Fupete @zetareticoli