web-dev-qa-db-fra.com

Accessibilité: convention de texte alternatif recommandée pour SVG et MathML?

Présentation

HTML5 permet désormais<svg> et <math> balisage avec un document HTML sans dépendre d'espaces de noms externes (aperçu décent ici ). Les deux ont leurs propres analogues d'attribut altvoir ci-dessous) qui sont effectivement ignorés par le logiciel de lecture d'écran d'aujourd'hui. Ainsi, ces éléments sont inaccessibles aux utilisateurs aveugles.

Est-il prévu de mettre en œuvre une convention de texte alternatif standard pour ces nouveaux éléments? J'ai parcouru la documentation et je suis tombé à l'eau!

Plus de détails

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

<svg>
  <title>An image title</title>
  <desc>This is the longer image description</desc>
  ...
</svg>

J'ai trouvé --- (un lecteur d'écran qui le lit comme tel, mais est-ce standard? méthodes précédentes d'insertion de SVG avait également des problèmes d'accessibilité depuis <object> 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 .

<math alttext="A squared plus B squared equals C squared">
  ...
</math>

Étant donné que les lecteurs d'écran ne semblent pas le reconnaître, la bibliothèque de rendu mathématique MathJax insère du texte dans un aria-label attribut au moment de l'exécution.

<span aria-label="[alttext contents]">...</span>

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

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

Récapitulation

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

html5svgaccessibilitymathmlalt-attribute
68
Courtney Christensen

Après quelques recherches, j'ai trouvé des recommandations quelque peu officielles. Malheureusement, la plupart ne sont pas fonctionnels à ce stade. Les navigateurs et les lecteurs d'écran ont beaucoup à implémenter avant que Math et SVG puissent être considérés comme accessibles, mais les choses le sont commencent à chercher.

Avertissement: les recommandations ci-dessous sont ce que j'ai glané au cours des derniers mois de codage. Si quelque chose ne va pas, faites-le moi savoir. Je vais essayer de le garder à jour au fur et à mesure que les navigateurs et AT progresse.

MathML

Recommandation

Utilisez role="math" Avec un aria-label Sur une balise div environnante (voir docs ). L'ajout de tabindex="0" Permet aux lecteurs d'écran de se concentrer spécifiquement sur cet élément; aria-label de cet élément peut être prononcé à l'aide d'un raccourci clavier spécial (tel que NVDA+Tab).

<div role="math" tabindex="0" aria-label="[spoken equivalent]">
  <math xmlns="http://www.w3.org/1998/Math/MathML">
    ...
  </math>
</div>

Limitations/considérations

  • Prise en charge de lecteur d'écran sommaire sur aria-label (Et moins important role="math").
    Mise à jour: Billets NVDA pertinents concernant aria-labelici et ici .
  • L'encapsulation dans la balise div ou span semble inutile car math est un élément de première classe en HTML5.
  • J'ai trouvé très peu de références à la balise MathML alttext.
    Mise à jour: cela semble être une MARGUERITE - spécifique en plus, décrit ici .

Références

[~ # ~] svg [~ # ~]

Recommandation

Utilisez les balises <title> Et <desc> De niveau supérieur avec role="img" Et aria-label Sur la balise SVG racine.

<svg role="img" aria-label="[title + description]">
  <title>[title]</title>
  <desc>[long description]</desc>
  ...
</svg>

Limitations/considérations

  • En février 2011, IE 9 beta lit tout <title> Et <desc> , ce qui n'est probablement pas souhaitable. Cependant, NVDA, JAWS et WindowEyes liront aria-label lorsque l'élément contient également role="img".
  • Si vous chargez un fichier SVG (c'est-à-dire pas en ligne en HTML), la balise au niveau racine <title> Deviendra le titre de la page du navigateur, qui sera lu par le lecteur d'écran .

Références

74
Courtney Christensen

En général, HTML5 essaie de décourager les auteurs de fournir du contenu caché aux utilisateurs voyants, car (a) il contient souvent de nouvelles informations qui pourraient être utiles aux utilisateurs voyants, (b) il est souvent mal écrit car il y a peu de commentaires sur le (normalement ) auteur voyant, et (c) il n'est pas entretenu avec autant de soin et peut donc devenir vicié rapidement.

Ainsi, au lieu de masquer les informations dans un attribut, pensez à les placer normalement sur la page en tant que légende dans un <p> tag adjacent à la section svg ou math, ou placez le texte dans un <figcaption> tag et mettre cela et la section svg/math dans un <figure> élément.

Si vous ne voulez vraiment pas que les utilisateurs voyants voient les informations, je pense que la technique standard consiste à positionner absolument la légende avec une grande valeur "gauche" négative, au moins jusqu'à ce que les lecteurs d'écran rattrapent HTML5.

3
Alohci

En ce qui concerne SVG, similaire mais non identique aux suggestions ci-dessus, il semble que la meilleure approche actuelle pourrait être d'utiliser aria-labelled en se référant à l'id de l'élément qui contient le `` texte alternatif '' (pas le texte alternatif lui-même).

<svg aria-labelledby="svg1title">
<title id="svg1title">A wide rectangle</title>
<rect width="70" height="10" fill="black" />
</svg>

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

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

De façon ennuyeuse, si vous faites cela, vous devrez (d'une manière ou d'une autre) vous assurer que les ID sont uniques sur toute la page (en d'autres termes, si vous utilisez beaucoup de SVG, ils doivent tous avoir des ID différents pour le titre). Cela s'applique également à d'autres identifiants au sein du SVG et constitue une gêne générale grave avec le SVG en ligne.

(Si cela est gravement problématique, vous voudrez peut-être envisager d'incorporer des SVG à l'aide de 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.)

3
sam

En théorie, une image svg devrait être plus accessible qu'une image raster avec une balise alt. D'une part, le texte peut être conservé sous forme de texte dans un svg, des fragments entiers de texte et pas seulement une courte phrase. C'est triste si les lecteurs d'écran ignorent ces informations supplémentaires. Cependant, tout le contenu du texte peut ne pas être visible à un moment donné, comme pour le 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 des svgs plus dynamiques, par exemple pour afficher des graphiques ou des diagrammes qui peuvent être modifiés ou dépliés.

Une autre chose à savoir est que <title> les éléments seront affichés sous forme d'infobulles (pour les utilisateurs voyants) dans tous les navigateurs compatibles SVG AFAIK (au moins la dernière génération), et que vous pouvez également les placer dans d'autres éléments svg (le titre s'applique à l'élément auquel il appartient) un enfant direct).

2
Erik Dahlström

Je n'ai pas testé cela, mais vous pouvez essayer d'ajouter alt = "any" à un conteneur DIV. Oui, ce n'est pas un attribut valide pour DIV, mais je peux voir des lecteurs d'écran plus anciens ne se souciant pas de l'endroit où alt apparaît.

Par exemple:

<div aria-label="Whatever" alt="Whatever" role="math">
    <math>...</math>
</div>

De toute évidence, cela repose sur l'hypothèse que les lecteurs d'écran liront (incorrectement) les attributs alt sur des éléments autres que IMG. N'ont pas été testés, mais c'est mieux que d'attendre que les lecteurs d'écran se rattrapent si cela fonctionne.

0
ZiggyTheHamster