Téléphone : 06 72 27 10 69
    • Police

ARIA fournit un attribut qui permet de marquer un élément comme activable. Cela fonctionne assez uniformément dans les navigateurs et les lecteurs d’écran modernes. Pourtant, pour la plupart des situations, il existe des techniques alternatives plus robuste.

Le contexte

Dans les applications Web modernes, il existe souvent des situations où l’utilisateur doit pouvoir changer l’état d’un élément.

Visuellement, le changement d’état de traduit par l’affichage d’icônes, par exemple une icône pour signifier “lecture ou pause” pour un lecteur audio.

Mais cette information doit également être disponible au niveau sémantique, afin que les lecteurs d’écran puissent l’annoncer.

Une utilisation conforme

Au niveau sémantique, il existe un attribut Aria, nommé aria-pressed attribut est un bon choix pour indiquer que la visibilité d’un élément peut être activée, ainsi que son état actuel :

<button aria-pressed=”false”> Menu</button>

Un lecteur d’écran annoncera :

Basculer. Bouton non enfoncé.

Si le bouton est activé (et que le aria-pressed statut est changé en true par JavaScript), le lecteur d’écran annoncera ce changement :

Pressé.

Le code HTML

<p> Please click the following checkbox.</p>

<button aria-pressed="false">Play audio</button>

<audio id="audio" src="audio.mp3"></audio>

Le code JavaScript 

;(function () {

  $(document).ready(function () {

    var $button, audio

    $button = $('button')

    audio = document.getElementById('audio')

    audio.loop = true

    return $button.click(() => {

      if (audio.paused) {

        audio.play()

        return $button.attr('aria-pressed', true)

      } else {

        audio.pause()

        audio.currentTime = 0

        return $button.attr('aria-pressed', false)

      }

    })

  })

}.call(this))

 

Utilisation de l’attribut Aria-pressed 

Comme indiqué ci-dessus, si la valeur du bouton aria-pressed est modifiée à l’aide de JavaScript alors qu’il est ciblé, les lecteurs d’écran annoncent le changement. C’est assez exceptionnel, car la plupart des autres modifications apportées à un élément ne sont pas détectées par les lecteurs d’écran (et ne sont donc pas annoncées).

Conclusion

Si vous avez besoin de décrire le statut activable des éléments interactifs, aria-pressed est l’un des rares attributs ARIA que nous pouvons recommander pour une utilisation générale. 

Libre traduction de cet article : https://www.accessibility-developer-guide.com/examples/sensible-aria-usage/pressed/