Accessibilité: recommandez-vous une convention de texte alternatif pour les SVG et MathML?

Question

Aperçu

HTML5 permet désormais le balisage et dans un document HTML sans dépendre de namespaces externes (aperçu complet ici). Chacun possède son propre analogue d'attribut alt (voir ci-dessous) qui est effectivement ignoré par les logiciels de lecteur d'écran actuels. Ainsi, ces éléments sont inaccessibles aux utilisateurs aveugles.

Y a-t-il des plans pour mettre en place une convention de texte alternatif standard pour ces nouveaux éléments? J'ai examiné la documentation et je n'ai rien trouvé!

Détails Supplémentaires

Concernant SVG: le texte alternatif d'un SVG peut être considéré comme le contenu de la balise racine title ou desc.

  Un titre d'image
  Ceci est la description plus détaillée de l'image
  ...

J'ai trouvé un lecteur d'écran qui le lit ainsi, mais est-ce la norme? Les méthodes précédentes d'insertion de SVG avaient également des problèmes d'accessibilité car les balises ``sont traitées de manière incohérente par les lecteurs d'écran.

Concernant MathML: le texte alternatif de MathML doit être stocké dans l'attribut alttext.

  ...

Étant donné que les lecteurs d'écran ne semblent pas en tenir compte, la bibliothèque de rendu mathématique MathJax insère du texte dans un attribut aria-label pendant l'exécution.

...

Malheureusement, NVDA, JAWS, et d'autres ne lisent pas encore de manière fiable ces étiquettes. (Plus sur WAI-ARIA)

Concernant les deux: n'ayant pas de succès avec les attributs ARIA largement non pris en charge, j'ai essayé d'utiliser les attributs title. Ceux-ci semblent également être ignorés sur ces éléments HTML "étrangers".

Conclusion

Plus qu'un simple hack, je cherche le mode recommandé pour placer du texte alternatif sur ces nouveaux éléments HTML. Peut-être y a-t-il une spécification du W3C que j'ai omise? Ou est-il encore trop tôt dans le jeu?

``

Answer 1

Après quelques recherches, j'ai trouvé quelques recommandations plutôt officielles. Malheureusement, la plupart ne sont pas fonctionnelles à l'heure actuelle. Les navigateurs et les lecteurs d'écran ont beaucoup à implémenter avant que les mathématiques et les SVG soient considérés comme accessibles, mais les choses commencent à s'améliorer.

Avis de non-responsabilité : les recommandations ci-dessous sont ce que j'ai glané au cours des derniers mois de codage. Si quelque chose est complètement faux, veuillez me le faire savoir. J'essaierai de tenir cela à jour au fur et à mesure de l'avancement des navigateurs et des logiciels d'AT.

MathML

Recommandation

Utilisez role="math" ainsi qu'un aria-label sur une balise div entourante (voir docs). L'ajout de tabindex="0" permet aux lecteurs d'écran de se concentrer spécifiquement sur cet élément; l'élément aria-label peut être vocalisé en utilisant un raccourci clavier spécial (tel que NVDA+Tab).

    ...

Limitations/Considérations

• Un support douteux des lecteurs d'écran sur aria-label (et moins important sur role="math").
  Mise à jour: Tickets NVDA pertinents concernant aria-label ici et ici.
• L'encapsulation dans une balise div ou span semble inutile puisque math est un élément de premier ordre dans HTML5.
• J'ai trouvé très peu de références à la balise MathML alttext.
  Mise à jour: cela semble être une addition spécifique à DAISY, décrite ici.

Références

• http://www.w3.org/TR/wai-aria/roles#math
• http://lists.w3.org/Archives/Public/public-pfwg-comments/2008JanMar/0008.html
• http://www.w3.org/TR/wai-aria-practices/#math

SVG

Recommandation

Utilisez les balises </code> et <code><desc></code> de niveau supérieur ainsi que <code>role="img"</code> et <code>aria-label</code> sur la balise SVG racine.</p> <pre><code><svg role="img" aria-label="[titre + description]"> <title>[titre] [longue description] ...

Limitations/Considérations

• En février 2011, IE 9 bêta lit toutes les balises </code> et <code><desc></code>, ce qui est probablement indésirable. Cependant, NVDA, JAWS et WindowEyes liront le <code>aria-label</code> lorsque l'élément contient également <code>role="img"</code>.</li> <li>Si vous chargez un fichier SVG (c'est-à-dire pas inclus dans HTML), la balise <code><title></code> de niveau racine deviendra le titre de la page du navigateur, qui <em>sera</em> lu par le lecteur d'écran.</li> </ul> <p><strong>Références</strong></p> <ul> <li><a href="http://lists.w3.org/Archives/Public/www-svg/2010Oct/0029.html" rel="noreferrer">http://lists.w3.org/Archives/Public/www-svg/2010Oct/0029.html</a></li> <li><a href="http://lists.w3.org/Archives/Public/public-html/2010Jun/0127.html" rel="noreferrer">http://lists.w3.org/Archives/Public/public-html/2010Jun/0127.html</a></li> <li><a href="http://www.w3.org/TR/wai-aria/roles#img" rel="noreferrer">http://www.w3.org/TR/wai-aria/roles#img</a></li> <li><a href="http://www.w3.org/TR/wai-aria/roles#namecalculation" rel="noreferrer">http://www.w3.org/TR/wai-aria/roles#namecalculation</a></li> </ul></x-turndown>

Answer 2

Toutes les réponses ici sont très anciennes; voici une mise à jour, basée sur un article de CSS Tricks de 2016 (qui est malheureusement le plus récent que j'ai pu trouver d'une source autorisée) pour la partie SVG de la question. Veuillez noter qu'il s'agit d'un résumé bref en supposant une connaissance de l'accessibilité et sans nécessité de cibler les anciens navigateurs. Consultez l'article pour une discussion plus complète.

Pour les svg inclus avec une balise

• Ajoutez une valeur alt à la balise .

Notez que si l'image est purement décorative, vous devez inclure alt mais le laisser vide - alt="".

Pour les en ligne

• Ajoutez un élément </code>; cela sera inclus en tant qu'info-bulle visuelle et disponible à l'API d'accessibilité.</li> <li>Sur la balise <code><svg></code>, ajoutez <code>role="img"</code>.</li> </ul> <pre class="lang-html prettyprint-override"><code><svg role="img"> <title>Titre descriptif ici

  Pour les en ligne décoratifs

  • Incluez un aria-hidden="true" sur la balise .

Answer 3

En général, HTML5 tente de dissuader les auteurs de fournir du contenu caché aux utilisateurs voyants, car (a) il contient souvent de nouvelles informations qui seraient utiles aux utilisateurs voyants, (b) il est souvent mal écrit car il y a peu de retour d'information pour l'auteur (généralement) voyant, et (c) il n'est pas aussi bien entretenu et peut donc devenir obsolète rapidement.

Par conséquent, au lieu de cacher l'information dans un attribut, envisagez de la placer normalement sur la page sous forme de légende dans une balise

à côté de la section svg ou math, ou placez le texte dans une balise

et mettez celle-ci et la section svg/math dans un élément

.

Si vous ne voulez vraiment pas que les utilisateurs voyants voient l'information, je crois que la technique standard est de positionner absolument la légende avec une grande valeur "left" négative, du moins jusqu'à ce que les lecteurs d'écran rattrapent HTML5.

Answer 4

En théorie, une image svg devrait être plus accessible qu'une image matricielle avec une balise alt. Pour une chose, le texte peut être conservé en tant que texte dans un svg, des fragments entiers de texte, pas seulement une courte phrase. C'est triste si les lecteurs d'écran ignorent ces informations supplémentaires. Cependant, tout le contenu textuel peut ne pas être visible à un moment donné, de même que pour html. De nombreuses images svg sont des images statiques, mais une tendance croissante (basée sur une utilisation réelle sur le web ouvert) semble être d'utiliser davantage de svgs dynamiques, par exemple pour afficher des graphiques ou des diagrammes qui peuvent être édités ou développés.

Une autre chose à savoir est que les éléments </code> seront affichés sous forme d'info-bulles (pour les utilisateurs voyants) dans tous les navigateurs compatibles avec svg, autant que je sache (au moins la dernière génération), et que vous pouvez les placer à l'intérieur d'autres éléments svg aussi (le titre s'applique à l'élément dont il est l'enfant direct).</p></x-turndown>

Answer 5

En ce qui concerne SVG, de manière similaire mais non identique aux suggestions ci-dessus, il semble que la meilleure approche actuelle soit d'utiliser aria-labelledby en faisant référence à l'identifiant de l'élément contenant le « texte alternatif » (et non le texte alternatif lui-même).

Un rectangle large

Vous pouvez également utiliser à la fois les éléments title et desc en définissant aria-labelledby="svg1title svg1desc".

Source : http://www.sitepoint.com/tips-accessible-svg/

De manière ennuyeuse, si vous faites cela, vous devrez (d'une manière ou d'une autre) veiller à ce que les identifiants soient uniques dans l'ensemble de la page (autrement dit, si vous utilisez beaucoup de SVG, ils doivent tous avoir des identifiants différents pour le titre). Cela s'applique également à d'autres identifiants à l'intérieur du SVG et constitue une grande nuisance générale avec les SVG intégrés.

(Si cela pose un problème majeur, vous voudrez peut-être envisager d'intégrer des SVG en utilisant la balise img - vous pouvez toujours le faire « en ligne » sans fichier externe si vous utilisez une URL de données et encodez en base64 le SVG.)