Audio

Componente per la riproduzione di contenuti audio con supporto per l’accessibilità e conformità alle linee guida WCAG 2.1.

Comportamento

Il componente è renderizzato come <div class="rtds-audio"> contenente un <figure> con:

• <figcaption> — titolo/didascalia del file audio; associa semanticamente il testo descrittivo al player
• <audio controls> — player con controlli nativi del browser (play, pausa, volume, avanzamento)
• <a> (opzionale) — link alla trascrizione testuale, quando fornito

Parametri di configurazione

Contesto di sviluppo Fractal/Nunjucks — Questa sezione riguarda esclusivamente i parametri del context .config.yml usati durante lo sviluppo nella libreria. Non descrive attributi HTML o proprietà da usare nei temi, CMS o ambienti di implementazione: per quello, fare riferimento alla sezione Esempi di utilizzo.

Parametri Base

• caption (stringa, obbligatorio): Titolo/descrizione del file audio
• src (stringa, obbligatorio): URL del file audio

Parametri per il Link alla Trascrizione

• link (oggetto, opzionale): Configurazione del link alla trascrizione
  • classes (stringa, opzionale): Classi CSS per il link
  • iconClasses (stringa, opzionale): Classi CSS per l’icona
  • hasIcon (booleano, opzionale): Mostra/nasconde l’icona
  • icon (stringa, opzionale): ID dell’icona da utilizzare
  • label (stringa, obbligatorio): Testo del link (include testo per screen reader)
  • href (stringa, obbligatorio): URL della trascrizione
  • iconSize (stringa, opzionale): Dimensione dell’icona

Accessibilità

WCAG 2.1

Livello AA — criteri pertinenti:

• 1.2.1 Contenuti solo audio (Preregistrati) — deve essere fornita una trascrizione testuale alternativa; il componente supporta un link opzionale alla trascrizione
• 1.4.1 Uso del colore — le informazioni non sono veicolate tramite solo il colore
• 2.1.1 Tastiera — i controlli audio nativi del browser sono accessibili da tastiera
• 2.4.6 Intestazioni ed etichette — la <figcaption> fornisce un’etichetta descrittiva per il contenuto audio

Struttura e semantica

• Il componente è renderizzato come <div class="rtds-audio"> contenente un elemento <figure>
• La <figcaption> associa semanticamente il titolo descrittivo all’elemento <audio>
• L’elemento <audio controls> espone i controlli nativi del browser, che sono intrinsecamente accessibili da tastiera e compatibili con le tecnologie assistive
• Il fallback testuale (<p>) è visibile ai browser che non supportano l’elemento <audio>

Attributi ARIA

Nessun attributo ARIA aggiuntivo: i controlli nativi dell’elemento <audio> sono intrinsecamente accessibili.

Navigazione da tastiera

Gestione del focus

• Focus visibile: lo stile :focus-visible è sempre visibile e non viene rimosso via CSS

Screen reader

• Lo screen reader annuncia l’elemento <audio> con i relativi controlli nativi (play, pausa, volume, durata)
• La <figcaption> viene letta prima del controllo audio, fornendo il contesto del contenuto
• Il link alla trascrizione, se presente, include un prefisso <span class="rtds-sr-only"> con il titolo del file per disambiguare il testo del link in caso di più player nella stessa pagina

Stili CSS

Classi Base

• .rtds-audio:
  • Padding: p-4
  • Sfondo: bg-white
  • Bordi: rounded-lg, border, border-gray-01

Classi Elementi (BEM)

• .rtds-audio audio:
  • Larghezza: w-full

Esempi di utilizzo

<!-- Esempio base -->
<div class="rtds-audio">
  <figure class="rtds-space-y-4">
    <figcaption class="rtds-heading-4">Titolo file audio</figcaption>
    <audio controls>
      <source src="/media/audio-sample.mp3" type="audio/mpeg">
      <p>Il tuo browser non supporta questo tipo di oggetto html</p>
    </audio>

    <a href="#" class="rtds-action-link--sm rtds-action-link--has-icon rtds-group/cta">
      <span class="rtds-sr-only">Titolo file audio - </span>Trascrizione
      <svg class="rtds-icon outline--document-text rtds-transition-all group-hover/cta:rtds-scale-110">...</svg>
    </a>
  </figure>
</div>