Bonsoir,
Cet exemple est une implémentation transitoire.
Figure est un élément de regroupement qui associe un contenu quelconque à une
légende, on peut ainsi utiliser le motif figure/figcaption pour tout type de
contenu, des images bien sur mais également des tableaux, des extraits de code,
une vidéo etc etc
Dans le cas d'une image, il faut distinguer deux cas généraux :
A. lorsque la légende peut faire office de texte de remplacement le motif HTML5
est le suivant :
<figure>
<img src="img.png">
<figcaption> Légende de l'image</figcaption>
</figure>
Notez l'bsence d'attribut alt sur l'image, puisqu'en HTML5 l'attribut alt est
optionnel.
Ce motif devrait être vocalisé "graphic - légende de l'image" donc de manière
strictement identique à une image avec un alt renseigné (ca fonctionne avec
NVDA et Jaws par exemple).
Comme l'a noté clément la légende est évidemment destinée à être visible.
Néanmoins, pour des raisons de retrocompatibilité il faut surcharger ce motif
"HTML5" pour prendre en charge les navigateurs ou les aides techniques qui ne
supportent pas ou mal HTML5 et/ou ARIA.
Donc :
1. Forcer le regroupement en surchargeant le role avec "group", cela indique
aux UA/AT qui comprennent ARIA que tout ce qui est dans le contenu regroupé
peut servir d'accessible name pour l'objet et donc le contenu de figcaption
notamment.
2. Pour les UA/AT qui n'implémentent pas ARIA il faut utiliser des techniques
de patch basiques comme G74 que nous utilisons pour la description détaillée
adjacente avec AW 2 : http://www.w3.org/TR/WCAG-TECHS/G74.html
Donc on implémente un alt avec une "référence" permettant de lier l'image et sa
légende de manière explicite.
L'exemple reprends le format documentaire via l'expression "figure" répété dans
le alt et dans la légende.
B. Lorsque la légende ne peut pas faire office de texte de remplacement, le
motif est le suivant :
<figure>
<img src="img.png" alt="alternative" >
<figcaption> Légende de l'image</figcaption>
</figure>
En version patchée
<figure role="group">
<img src="img.png" alt="alternative (figure 1)" >
<figcaption> (figure1) Légende de l'image</figcaption>
</figure>
Pour en savoir plus : http://dev.w3.org/html5/alt-techniques/ (à lire
impérativement si vous voulez maitriser les alternatives d'images en HTML 5)
JPV
________________________________
Jean-Pierre Villain - Qelios - 06 98 08 50 49
________________________________
De : Clément Hivet <clement.hi...@gmail.com>
À : liste_gta@list.accessiweb.org
Envoyé le : Vendredi 1 novembre 2013 21h41
Objet : Re: [Liste GTA] Alternative image HTML5
Bonsoir la liste, bonsoir Raoul,
Je pense que l'exemple du w3c est correct car le ficaption va faire apparaitre
une légende associée à l'image et visible par tous (voir les exemples :
http://www.alsacreations.com/article/lire/1337-html5-elements-figure-et-figcaption.html
)
Au niveau des lecteurs d'écrans, le figcaption doit être lu et associé à son
image.
Je me demande par contre si saisir le alt avec le même contenu que le
figcaption ne serait pas redondant.
Bonne soirée
Clement.
Le 1 nov. 2013 18:32, "Raoul MASSON" <raoul.mas...@free.fr> a écrit :
Bonjour la liste,
>
>Que pensez-vous de l’exemple suivant donné par le W3C dans
>http://www.w3.org/TR/html-alt-techniques/ ? :
>
><figure role="group">
><img src="figure1.gif" alt="Figure 1">
>
><figcaption>Figure 1. Distribution of Articles by Journal Category.
>Pie chart: Language=68%, Education=14% and Science=18%.</figcaption>
></figure>
>
>Pour ma part je pense qu’il y a un “détournement de balise” car si on
>respectait la sémantique correcte le détail du camembert (Pie chart:
>Language=68%, Education=14% and Science=18%) devrait se trouver plutôt dans
>l’attribut “alt” que dans la balise <figcaption>. De ce fait le site semble
>programmé pour les aveugles seulement et non pour tous.
>
>Il y a sûrement quelque-chose qui m’échappe, merci de vos lumières.
>
>Cordialement,
>
>Raoul
>
>Raoul Masson
>7 rue des sapins
>57655 BOULANGE
>_______________________________________________
>liste_gta mailing list
>liste_gta@list.accessiweb.org
>http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org
>
>
_______________________________________________
liste_gta mailing list
liste_gta@list.accessiweb.org
http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org
_______________________________________________
liste_gta mailing list
liste_gta@list.accessiweb.org
http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org
