Images de texte
Éviter les images de texte
Les images de texte sont plus susceptibles de se déformer et de pixéliser lorsqu’elles sont redimensionnées, et elles peuvent être problématiques pour les utilisateurs d’appareils mobiles et les utilisateurs malvoyants. Dans les situations où des images de texte doivent être utilisées, l’équivalent textuel doit contenir le même texte que celui présenté dans l’image.
Il est recommandé d’utiliser du texte réel, formaté et stylé avec des feuilles de style en cascades pour s’adapter au concept plutôt qu’une image de texte. Le texte réel peut être modifié et redimensionné sans perdre de clarté en fonction des préférences de lecture des utilisateurs, et il est plus souple à utiliser que les images.
À moins que le texte sous forme d’image soit essentiel ou personnalisable, les images ne doivent pas comporter de texte informatif. Le texte faisant partie d’un logo ou d’un nom de marque est considéré comme essentiel.
Exemple type : Texte stylé avec des feuilles de style en cascades (CSS)
Dans cet exemple, on utilise du texte réel stylé avec des feuilles de style en cascades plutôt qu’une image de texte. Les propriétés CSS sont entièrement responsables du style, de l’espacement et de la mise en page des polices et du texte.
L'exemple commence
L'accessibilité au bout de vos doigts
L'exemple finit
CSS
Début du code
<p class="checker">L'accessibilité au bout de vos doigts</p>
.checker {
border: 2px solid black;
background: #aa061a;
margin: auto;
padding: 20px;
padding-top:10px;
text-align: center;
text-shadow: 5px 5px 5px #620915;
font-size:35px;
color:white;
}Fin du code
Mauvais exemple : Image de texte
Éviter les images de texte à moins qu’elles ne soient essentielles (comme un logo) ou personnalisables. Dans l’exemple ci-dessous, trois liens emboîtent des images de texte.
Les utilisateurs de dispositifs de grossissement d’écran peuvent avoir de la difficulté à lire une image de texte lorsqu’elle est agrandie et pixélisée, comme le montre l’image ci-dessous.
Expressions mathématiques
Conception avec des expressions mathématiques
Le langage HTML ne comporte pas de balises pour les expressions mathématiques en tant que structures, et il n’existe aucun moyen simple de produire des éléments essentiellement bidimensionnels au-delà de la mise en indice supérieur ou de la mise en indice.
Il existe deux stratégies:
- Utiliser une image avec texte de remplacement ou une longue description de l’expression mathématique.
- Étiqueter l’expression mathématique sémantiquement dans MathML et utiliser une bibliothèque mathématique JavaScript.
Stratégie 1 : Utiliser une image avec texte de remplacement décrivant l’expression mathématique
Les images d’expressions mathématiques ne doivent être utilisées que lorsque les mathématiques font exception au contenu ordinaire du site Web. Dans ce cas, la valeur de l’attribut alt de l’élément img doit communiquer l’expression mathématique, sauf si plus de 150 caractères sont requis, auquel cas il faut utiliser une description longue.
L'exemple commence
L'exemple finit
HTML
Début du code
<img src="recurring.png" alt="zéro point un, récurrent">Fin du code
Stratégie 2 : Utiliser MathML
La méthode privilégiée pour saisir des expressions mathématiques en tant que contenu sémantique et accessible est le langage de balisage MathML. Le balisage MathML permet aux agents utilisateurs de déterminer la structure des expressions mathématiques d’une façon lisible par machine.
La plupart des navigateurs Web ont besoin de modules d’extension pour bien rendre MathML aux fins de présentation, comme la bibliothèque de source ouverte MathJax de source ouverte, qui offre un soutien pour l’affichage et d’autres fonctions d’accessibilité. Les bibliothèques de mathématiques de JavaScript prennent généralement en charge les expressions mathématiques rédigées en Tex et LaTeX et AsciiMath, pas seulement MathML.
Dans l’exemple ci-dessous, MathML communique une expression mathématique avec un balisage sémantique et une syntaxe adaptée aux technologies d’assistance comme les lecteurs d’écran. MathJax offre un bon rendu pour l’écran avec la composition appropriée.
L'exemple commence
L'exemple finit
Voir le MathML
Début du code
<head>
[…]
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
</head>
<body>
<math display="block" xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mi>E</mi><mo>=</mo>
<mfrac>
<mrow>
<mn>2</mn><mi>π</mi><mi>h</mi>
<msup>
<mi>c</mi>
<mn>2</mn>
</msup>
</mrow>
<mrow>
<msup>
<mi>λ</mi>
<mn>5</mn>
</msup>
<mrow>
<mo>(</mo>
<mrow>
<msup>
<mi>e</mi>
<mrow>
<mi>h</mi><mi>c</mi><mo>−</mo><mi>λ</mi>
<msub>
<mi>k</mi>
<mi>b</mi>
</msub>
<mi>T</mi>
</mrow>
</msup>
<mo>−</mo><mn>1</mn>
</mrow>
<mo>)</mo>
</mrow>
</mrow>
</mfrac>
</mrow>
</math>
</body>Fin du code
Source: MathML test page (en anglais seulement)