Regione Toscana Design System

Audio 

<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
     rtds-action-link--has-icon rtds-group/cta rtds-action-link--sm
">
            <span class="rtds-sr-only">Titolo file audio - </span>Trascrizione

            <svg class="rtds-icon rtds-fill-current rtds-transition-all group-hover/cta:rtds-scale-110" aria-hidden="true" focusable="false" role="img">
                <use href="../../icons.svg#outline--document-text" />
            </svg>

        </a>

    </figure>
</div>
 
<div class="rtds-audio">
    <figure class="rtds-space-y-4">
        <figcaption class="rtds-heading-4">{{ caption }}</figcaption>
        <audio controls>
            <source src="{{ src }}" type="audio/mpeg">
            <p>Il tuo browser non supporta questo tipo di oggetto html</p>
        </audio>
        
        {% if link %}
            {% render '@action-link--sm', link, true %} 
        {% endif %}
    </figure>
</div>
 
{
  "caption": "Titolo file audio",
  "src": "/media/audio-sample.mp3",
  "link": {
    "classes": "rtds-action-link--has-icon rtds-group/cta",
    "iconClasses": "rtds-transition-all group-hover/cta:rtds-scale-110",
    "hasIcon": "true",
    "icon": "outline--document-text",
    "label": "<span class=\"rtds-sr-only\">Titolo file audio - </span>Trascrizione",
    "href": "#",
    "iconSize": ""
  }
}
  • Content: 
    @layer components {
    .rtds-audio {
        @apply rtds-p-4 rtds-bg-white rtds-rounded-lg rtds-border rtds-border-gray-01;
    }


    .rtds-audio audio {
        @apply rtds-w-full;
    }   

}
  • URL: /components/raw/audio/audio.css
  • Filesystem Path: components/03-molecules/audio/audio.css
  • Size: 197 Bytes

Audio

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

Comportamento

Il componente implementa un player audio accessibile che:

  • Fornisce controlli nativi del browser per la riproduzione
  • Include una didascalia descrittiva
  • Supporta il collegamento a una trascrizione
  • È completamente personalizzabile
  • Rispetta i requisiti di accessibilità WCAG 2.1 per i contenuti audio

Linee Guida per l’Accessibilità dei Contenuti Audio

Per garantire l’accessibilità dei contenuti audio, è necessario seguire questi criteri di successo WCAG 2.1:

Best Practices per i Contenuti Audio

  • Fornire sempre una trascrizione testuale completa
  • Includere descrizioni di suoni non verbali rilevanti
  • Indicare chiaramente la presenza di contenuti audio
  • Assicurare che i controlli di riproduzione siano accessibili da tastiera
  • Evitare contenuti audio che si avviano automaticamente
  • Fornire controlli per la regolazione del volume

Conformità WCAG 2.1

Il componente soddisfa i seguenti criteri di successo WCAG 2.1 per i contenuti audio:

Parametri di Configurazione

Parametri Base

  • caption (stringa, obbligatorio): Titolo/descrizione del file audio
  • src (stringa, obbligatorio): URL del file audio
  • 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

Stili CSS

Classi Base

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

Classi per l’Elemento Audio

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

Esempio di Utilizzo

<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>

Note sull’Accessibilità

  • Il componente utilizza l’elemento <figure> e <figcaption> per associare correttamente la descrizione al contenuto audio
  • Il testo alternativo per screen reader è incluso nel link alla trascrizione
  • I controlli audio nativi del browser garantiscono l’accessibilità di base
  • Il fallback per browser non supportati è incluso
  • Il link alla trascrizione è chiaramente visibile e accessibile da tastiera