Accessibilita pagina beats

[LewentalDigital]

A riga 20 e 22 (come poi in tutti gli altri beats) ci sono 2 durate separate, una per lo screeen reader e un'altra per mostrarla a schermo:

<span class="navigationHelp readDurata">3 minuti e 29 secondi</span>
<span class="durata" aria-hidden="true">3:29</span>

Rimuovere la durata per lo screen reader e tenere l'altra, in un tag time con attributo datetime adeguato, senza aria hidden :

<time datetime="PT3M29S">03:29</time>

(dove PT1H3M29S indica una durata di 1 ora, 3 minuti e 29 secondi)

Basta questo per renderlo accessibilie.

[T-Brex]

ok, son d'accordo che debba mettere il tag time, però se lascio lui lo screen reader legge "3 e 29" mentre sentire 3 minuti e 29 secondi forse è meglio. Quindi propongo una soluzione "ibrida"

<span class="navigationHelp readDurata">3 minuti e 29 secondi</span> <time datetime="PT3M29S" class="durata" aria-hidden="true">03:29</time>

ditemi che ne pensate @rzaupa @LewentalDigital

[LewentalDigital]

Ok, ibrido va bene, propongo di implementarlo cosi':

<time datetime="PT3M29S">
    <span class="navigationHelp">3 minuti e 29 secondi</span>
    <span aria-hidden="true">03:29</span>
</time>

Chiamo comunque l'esperto su accessibilita' @rzaupa per sapere cosa ne pensa.

---

Ho notato un'altra cosa nei beats: ogni beat ha un link che, se e' in riproduzione fa portare al player audio della pagina:

<a href="#audio" tabindex="-1">
    <span class="navigationHelp" aria-hidden="true">Vai al <span lang="en">player</span> della canzone</span>
</a>

Ha tab index -1 e il testo all'interno ha aria-hidden=false quando il beat non e' in riproduzione, tuttavia, anche se ha tabindex -1, e' raggiungibile lo stesso da tastiera con le frecce; lo screen reader dice che e' un link e non legge il testo! Da riparare facendo si' che il tag abbia sia tabindex -1 che aria-hidden e anche la classe navigationHelp, mentre il testo all'interno non ha nessuno dei 3, cosi':

<a href="#audio" tabindex="-1" aria-hidden="true" class="navigationHelp">
    <span>Vai al <span lang="en">player</span> della canzone</span>
</a>

E quando la canzone va in play, ovviamente aria hidden diventa false e tabindex diventa 0

---

Rinomino questa issue Accessibilita pagina beats cosi puoi risolvere questi problemi qui

[T-Brex]

Ho fatto quasi tutto, l'unica cosa è che l'ancora all 'id audio: quando presente, se ci si arriva con il tab si vede la scritta "Vai al player della canzone", credo sia meglio fare una cosa del genere

<a href="#audio" tabindex="-1" aria-hidden="true"> <span class="navigationHelp">Vai al <span lang="en">player</span> della canzone</span> </a>

semplicemente spostando la class="navigationHelp" dal tag al tag

lo so che è una piccolezza, ma cosa ne pensate @LewentalDigital @rzaupa

Va bene sono daccordo

[rzaupa]

Per sicurezza ho visto nei pinguini come aveva fatto la prof con le tracce e non l'ha fatto va beh ahahah

Scusate ma non era piu' semplice fare <time datetime="P2H30M" aria-label="3 minuti e 29 secondi">3:29</time> o l'avevamo escluso per qualche problema con lo screen reader ?

L'altro problema emerso è interessante ... Rispondendo a @T-Brex non è un problema se si vede la scritta "vai al player" (vedi gli aiuti per la navigazione saltà menu' o vai al contenuto che sono visibili) ,anzi io direi che è obbligatorio vederlo !! Guarda https://web.math.unipd.it/accessibility/dettaglio.html?ID=18 ma anche forse https://web.math.unipd.it/accessibility/dettaglio.html?ID=130 e questo https://web.math.unipd.it/accessibility/dettaglio.html?ID=124 per il resto la soluzione di @LewentalDigital credo dovrebbe andare, giusta l'osservazione

[T-Brex]

<time datetime="P2H30M" aria-label="3 minuti e 29 secondi">3:29</time> potrebbe funzionare!

AGGIORNAMENTO ho appena provato ciò sopra detto, lo screen reader non legge 3 minuti e 29 secondi ma solo 3 e 29. Aria-label va usato per elementi senza testo, come immaggini, o pulsanti, ma qui il testo c'è, infatti dentro time c'è 3:29

per il secondo punto, modifico subito