Critère 1.10 figure / figcaption et rôle group

[innoticFR]

TL;DR: mettre à jour pour tenir compte des évolutions techniques, retirer la référence au role=group, renforcer la compatibilité avec les lecteurs d'écran en utilisant les propriétés ARIA

La note technique du critère 1.10 indique

L'implémentation d'un role="group" sur l'élément parent figure est destiné (sic) à pallier le manque de support actuel des éléments figure par les technologies d'assistance.

Ce point reprenait les considérations de la page HTML5: Techniques for providing useful text alternatives depuis 2012

Until the figure and figcaption elements are widely accessibility supported by browsers and/or assistive technology it is recommended that role="group" be used on the figure element and in the case where the figcaption content is the text alternative, provide a label for the image in the alt attribute.
[...]
the alt attribute is be used a a container for a text label that identifies the image and provides an implicit association between the image and the text that describes it. The use of the alt attribute in this context is recommended as a bridging technique until the figure and figcaption element semantics are implemented in browsers and assistive technology. Its use conforms to WCAG 2.0 [WCAG20]. Its use is a willful violation of HTML5 [HTML5].

Plusieurs changements ont eu lieu depuis cette date:

• Le rôle implicite des balises figure est le rôle figure depuis ARIA 1.1
• La balise figcaption avait vocation à être une alternative suffisante pour les balises img, or ce n'est plus le cas
• Le support des rôles ne donne pas systématiquement lieu à l'énoncé du nom accessible par les lecteurs d'écran (par exemple, celui du rôle group n'est annoncé que pour les champs de formulaire)

L'ensemble des mesures imposées dans le critère 1.10 n'apportent donc aucun effet significatif sur un certain nombre de lecteurs d'écran qui continuent à lire séquentiellement les textes sans annoncer les regroupements opérés.

Malgré tout, l'usage des balises figure et figcaption est une bonne pratique, et en l'état sauf à vouloir créer une redondance inutile entre le alt de l'image et l'élément figcaption, la meilleure solution reste de renforcer programmatiquement le lien qui existe entre l'image et sa légende via l'attribut aria-describedby ou aria-labelledby positionné sur la balise img.

Avec redondance : la description complète se situe dans le alt

<figure>
      <img src="shadows.jpg" alt="Shadow like figures and a graffiti tag drawn on the walls of a
     partially demolished building, illuminated by the light from a street lamp">
      <figcaption aria-hidden="true">Shadow like figures and a graffiti tag drawn on the walls of a
     partially demolished building, illuminated by the light from a street lamp.
     </figcaption>
</figure>

Sans redondance: la description complète est dans le figcaption

<figure>
      <img src="shadows.jpg" alt="Figure 1" aria-labelledby="caption">
      <figcaption aria-hidden="true" id="caption">Figure 1 : Shadow like figures and a graffiti tag drawn on the walls of a partially demolished building, illuminated by the light from a street lamp.
     </figcaption>
</figure>