Componente Timeline: navigabilità

[Mattia541993]

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

Per facilitare la navigazione tra i mesi nell'esempio in documentazione si potrebbe marcare come intestazione il testo che indica il mese. Si potrebbe quindi sostituire lo <span> che contiene il nome del mese con un h4 perchè è presente un h5 ad indicare il titolo di una card (un elemento della timeline)

Perché

Sebbene sia soddisfatto il criterio WCAG 2.4.6 "Intestazioni ed etichette", non è soddisfatto il criterio WCAG 1.3.1 "Informazioni e correlazioni"

Contesto

Aggiornato da @Fupete in data 3/9/2024:

Verifiche di accessibilità sui componenti.

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

Altro

Aggiornato da @Fupete in data 3/9/2024:

Sarà da aggiornare anche in React kit alla risoluzione.

[Fupete]

Ciao @Mattia541993, sono d'accordo con te su questa modifica.

Nella correzione ne farei anche un'altra, spostando CATEGORIA e DATA sotto il titolo della singola card. Per migliorare ancora di più la gerarchia dei contenuti raccolti dagli heading. È una modifica che dovremo fare anche alle CARD in generale appena possibile.

Visto che ci siamo, per questi meta tag categoria e data, sarebbe da valutare anche uno <span> con classe visually-hidden da mettere subito prima ad ognuno con scritto: "Categoria dell'evento: " e "Data evento: ", in modo da renderne chiaro il significato durante la lettura da lettore di schermo e fornire un esempio completo a chi ne può usare il markup.

Cosa ne pensi?

Ah, bisognerebbe anche aggiungere semantica per veicolare il messaggio dei colori dei mesi, almeno dove usati con questo scopo, come da UI Kit Italia sarebbe: celeste = adesso, blu scuro = passato, grigio chiaro = futuro. Suggerimenti?

E, infine, ormai approfitto della tua issue per tracciare per adesso qui tutte le criticità: ci sarebbe da segnalare il significato delle icone affiancate ai mesi, al momento svg senza semantica alcuna. Un'idea coerente con quanto fatto altrove potrebbe essere aggiungere la property role="img" e un tag <title> di senso prima del tag <use>. Si faccia riferimento anche a: #749 (comment)

Per ora tracciamo tutto qui, poi se necessario possiamo dividere questa issue (cc @astagi @zetareticoli).

[Mattia541993]

Ciao, per quanto riguarda le intestazioni su categoria e data sono d'accordo così come lo <span class="visually-hidden"> da aggiungere in documentazione per specificare meglio cosa sono la categoria dell'evento e la data.
Per quanto riguarda la semantica dei colori ci ho riflettuto un po' e secondo me la semantica dei colori nella timeline è più un espediente visivo per aver un colpo d'occhio su un punto di confine tra passato e futuro, ma ha senso che un solo elemento sia contrassegnato come presente. Non vedo nella timeline un caso in cui più mesi possano essere considerati come "presente". Inoltre non trasmette informazioni in più, ma rafforza quelle che già ci sono (se oggi siamo a settembre e la granularità della timeline è al mese, so che mi sto riferendo ad "adesso"). Per questo sarei per non considerare di veicolare quest'informazione a livello di accessibilità.

Per quanto riguarda invece l'icona <svg> sono d'accordo di assegnarle un role="img"e un tag <title> all'interno.

[Fupete]

@Mattia541993 ho aperto una PR di risoluzione. È ancora in draft. Dai un'occhiata e fammi sapere cosa ne pensi e se ti torna tutto.

@astagi la documentazione della breaking è da valutare, per ora molto bozza (è una breaking?) in caso poi ci pensi tu?

[Fupete]

Qui la preview corrente della PR: https://bootstrap-italia-bfo4g9880-dip-trasformazione-digitale.vercel.app/ (link aggiornato)

Da notare che ho sostituito anche le icone dei mesi con icone più puntuali, in modo da poterne dimostrare l'utilità e la necessità di ruolo e titolo.

[Fupete]

Sto provando ad aggiornare l'approccio rispetto al primo draft: ora il tag h che contiene il mese racchiude sia l'icona che il testo del mese. La modifica è minima lato markup (trasformare un div in un h) e a livello struttura e relazioni mi sembra tornare tutto. E così sembra funzionare correttamente dai miei test con diversi screen reader e non dobbiamo aggiornare "troppo" scss, cosa che renderebbe il fix poco retrocompatibile.

Ci sono due opzioni possibili secondo me. Compariamole con l'originale:

Originale

<div class="it-pin-wrapper">
  <div class="pin-icon">
    <svg class="icon"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-bookmark"></use></svg>
  </div>
  <div class="pin-text">giugno {{ 'now' | date: "%Y" }}</span>
</div>

L'icona non ha descrizione. Manca l'heading.

Attuale preview di risoluzione: tutto diventa un h (vedi link msg precedente):

<h3 class="it-pin-wrapper">
  <div class="pin-icon">
    <svg class="icon" role="img"><title>Segnaposto</title><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-bookmark"></use></svg>
  </div>
  <div class="pin-text">giugno {{ 'now' | date: "%Y" }}</span>
</h3>

Usiamo role="img" e il <title> per l'svg.

Alternativa: tutto diventa un h ma l'immagine...:

<h3 class="it-pin-wrapper">
  <div class="pin-icon">
    <span class="visually-hidden">Segnaposto: </span>
    <svg class="icon" aria-hidden="true"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-bookmark"></use></svg>
  </div>
  <div class="pin-text">giugno {{ 'now' | date: "%Y" }}</div>
</h3>

Nascondiamo l'svg ma mettiamo prima uno span nascosto. Pro: forse solo che lo screen reader non annuncia che c'è un'immagine e il titolo viene letto più naturale.

Alternativa base

<div class="it-pin-wrapper">
  <div class="pin-icon">
    <svg class="icon" aria-hidden="true"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-bookmark"></use></svg>
  </div>
  <h3 class="pin-text">giugno {{ 'now' | date: "%Y" }} - <span class="visually-hidden">Segnaposto</span></h3>
</div>

Nascondiamo l'svg e mettiamo lo span nascosto con la sua etichetta direttamente dentro l'h dopo il mese, che prenderà il formato:

• Giugno 2024 - Segnaposto
• Maggio 2024 - Successo
• Aprile 2024 - Traguardo
• ecc.

Note

L'ultima versione mi piace ma leggendo solo il codice mi pare complicato capire che quello span nascosto visivamente veicola il messaggio dell'icona. Cosa che porterebbe a molti errori d'uso. Secondo me la versione implementata attualmente nella preview (role="img" e <title>) è la più comprensibile.

Altre idee o suggerimenti?
Metto in CC anche @cfabry che potrebbe avere un'opinione in merito.

[cfabry]

Io andrei vero una semplificazione @Fupete :

• Trasformare la data in Hx. Come al solito possiamo indicare un generico H, ma il livello è determinato dal titolo primario assegnato alla timeline; se pensiamo che H3 possa essere il caso d'uso primario ok, però mettiamo sempre nella documentazione che è solo un caso d'uso.
• Ok per spostare categoria e data sotto il titolo (è una richiesta già aperta per tutte le card).
• A mio avviso l'icona è sempre decorativa, non rappresenta altro che il cambio di mese, che avrebbe già il suo valore semantico H.
• Non aggiungerei altre informazioni sul presente/futuro, implicitamente contenuto nel mese.
• Stessa cosa per <span class="visually-hidden">Segnaposto, sinceramente non ne vedo l'esigenza.

[Fupete]

@cfabry l'icona però potrebbe avere significato per la mia esperienza (segnaposto, successo, milestone, etc.) Per questo ho messo nell'esempio come eventualmente veicolarlo (segnaposto) sia con title o con span nascosto. Dici che è overkill?

[cfabry]

@Fupete A mio avviso è ridondante se esprime soltanto il passaggio da un mese all'altro, quello è garantito dal mese messo come H.
Se invece vuoi dire che può significare "milestone" o altro, allora ha un senso. Lo specificherei nella documentazione.

[Fupete]

Ho aggiornato la documentazione. Per me ci siamo. Lascio alla review di @astagi e @Mattia541993 .

[Mattia541993]

Cao! Sono d'accordo con tutta la conversazione finora. Allo stato attuale della documentazione nella PR però la riga che spiega .pin-icon è un po' troppo generica secondo me, nel senso che quello che secondo me dovrebbe arrivare è che dentro .pin-icon ora c'è un svg, ma potrebbe esserci anche qualcos'altro (un'img) e che se è significativo deve avere del testo alternativo, altrimenti dev'essere contrassegnato come decorativo. Aggiungerei questa precisazione alla frase "L’elemento .pin-icon ha attributi role="img" e tag title che lo descrive" qui https://bootstrap-italia-bfo4g9880-dip-trasformazione-digitale.vercel.app/docs/componenti/timeline/

[Fupete]

Concordo. Guarda l'ultima versione che avevo preparato rivedendo proprio la documentazione: https://bootstrap-italia-5w8edbsrp-dip-trasformazione-digitale.vercel.app/docs/componenti/timeline/

[Mattia541993]

Vista, perfetto scusami! Avevo guardato il link sbagliato! Per me così va bene! Grazie @Fupete