Wikipédia:Atelier accessibilité/Bonnes pratiques
Pour en savoir plus sur l'accessibilité sur Wikipédia, lisez Wikipédia:Atelier accessibilité/Qu'est-ce que c'est ?.
Les bonnes pratiques ci-dessous sont issues des directives d'accessibilité des contenus Web du W3C, qui sont la norme internationale dans ce domaine (leur référence est la norme Web Content Accessibility Guidelines (WCAG) 2.1).
Elles sont proposées comme un guide pour :
- la rédaction au quotidien de contenus plus accessibles ;
- les contributeurs intervenants sur les modèles, les portails ;
- les administrateurs d'interface intervenants notamment sur common.css, common.js, voire certains messages système.
Chaque bonne pratique est marquée d'un degré de priorité en fonction du niveau d'accessibilité WCAG correspondant :
- priorité élevée : le niveau A d'accessibilité, c'est-à-dire ce qui « doit être fait » ;
- priorité moyenne : le niveau AA d'accessibilité, c'est-à-dire ce qui « devrait être fait » ; c'est le niveau de référence de tout projet Web par défaut ;
- priorité faible : le niveau AAA d'accessibilité, c'est-à-dire ce qui « pourrait être fait » dans la mesure du possible, en fonction du type de contenu.
Les problèmes d'accessibilité rencontrés concrètement par les internautes sont de plusieurs sortes :
- certains sont dus à des erreurs commises par les contributeurs lors de la production du contenu des articles. C'est aux contributeurs de régler le problème et c'est l'objet de cette page ;
- d'autres sont dus aux bugs des navigateurs et des aides techniques utilisées par les internautes. C'est essentiellement aux développeurs des navigateurs et des aides techniques de régler le problème, mais c'est une question à aborder avec ouverture et prudence : il ne s'agit pas de surcharger les contributeurs de contraintes qui ne relèvent pas de leur responsabilité ; cependant, exceptionnellement, il peut être pertinent de compenser un bug de navigateur ou d'aide technique quand cela ne pose pas de difficulté par ailleurs ;
- d'autres sont dus aux utilisateurs handicapés eux-mêmes. C'est à l'utilisateur de recourir à l'outil adapté à ses besoins ;
- d'autres sont dus à mediawiki et non aux contributeurs qui l'utilisent. C'est aux développeurs de mediawiki de corriger (mais les contributeurs sont les bienvenus pour alerter les développeurs).
Les problèmes évoqués dans cette page sont uniquement ceux qui relèvent de la responsabilité des contributeurs.
Structure des articles
modifierTitres de section
modifier==
, ===
, etc.) et ne pas créer de pseudos-titres à l'aide d'une mise en gras ('''
), d'une liste de définitions (;
), d'un élément div
mis en forme (<div style="font-weight: bold">
), etc. Un marquage standardisé des titres de section contribue à rendre Wikipédia accessible au plus grand nombre[WCAG-TECH 1].- priorité : élevée
- difficulté : facile
Les titres de section permettent à MediaWiki de construire automatiquement une table des matières, des ancres pour les hyperliens, et de présenter les articles sous forme de boîtes déroulantes (sur mobile). Ils peuvent également être exploités par les logiciels d'aide à la lecture (lecteurs d'écran, loupe d'écran).
Non accessible | Accessible |
---|---|
=== titre === ;Sous titre :Contenu |
=== titre === ==== sous-titre ==== Contenu === titre === <h4 style="font-size:1em;border:0">sous-titre</h4> Contenu |
=== titre === '''Sous-titre''' Contenu |
Position des blocs de navigation
modifier- priorité : moyenne
- difficulté : facile
La position des éléments de navigation doit être prévisible pour les utilisateurs : il faut donc éviter de placer les blocs de navigation à des endroits différents selon les articles (parfois en début de contenu, parfois au milieu, parfois en fin de contenu). Quel que soit l'emplacement retenu (il est indifférent pour l'accessibilité), celui-ci doit être constant[WCAG-TECH 2].
Remarque : ce n'est pas la position à l'écran qui compte en matière d'accessibilité (à droite ou à gauche par exemple) mais la position dans l'ordre du code HTML (en début ou en fin du code de la zone de contenu de la page).
Texte des articles
modifierPriorité élevée
modifierCitations
modifier- priorité : élevée.
- difficulté : facile.
Les modèles {{Citation}}, {{Citation bloc}} et {{Début citation}} … {{Fin citation}} ont été spécifiquement créés pour permettre le balisage pertinent des citations, qui aide à leur identification par les utilisateurs d'aides techniques[WCAG-TECH 3]. En effet, en l'absence du balisage HTML propre aux éléments de citations, ceux-ci peuvent rencontrer des difficultés de compréhension dues à des ambiguïtés sur la portion exacte de texte qui est incluse dans la citation. L'utilisation de simples guillemets ne suffit pas à baliser le texte cité.
Remarque : bien que MediaWiki prend en charge l’élément q
, il n’est, pour le moment, pas utilisé par le modèle {{Citation}} en raison de problèmes de copier-coller qui touchent plusieurs navigateurs. Cependant, son utilisation dès maintenant par les contributeurs est nécessaire pour permettre, lorsque ce sera possible, une mise à jour immédiate et transparente de ce balisage.
Non accessible | Accessible |
---|---|
Selon la WAI, « l'accessibilité du web… » |
Selon la WAI, {{Citation|l'accessibilité du web…}} |
Selon la WAI : « L'accessibilité du web… » |
Selon la WAI : {{Citation bloc| L'accessibilité du web…}} Selon la WAI : {{Début citation}}L'accessibilité du web…{{Fin citation}} |
Références à un contenu par sa position à l'écran
modifier- priorité : élevée
- difficulté : facile
Il peut être nécessaire de faire référence dans le texte d'un article à une illustration, un tableau ou tout autre contenu affiché dans le même article. Dans ce cas, si cette référence s'appuie uniquement sur la position ou la forme de ce contenu, elle ne sera pas compréhensible pour qui ne consulte pas l'article sous la même forme que le rédacteur. Ainsi, sur écran d'ordinateur les images sont souvent placées à côté du texte, sur écran de téléphone elle sont en pleine largeur, avec un lecteur d'écran il n'y a pas d'accès visuel à la page[WCAG-TECH 4].
Non accessible | Accessible |
---|---|
Dans le cas de figure décrit par l'image de gauche… |
Dans le cas de figure décrit par l'image numéro 1… (La légende de l'illustration indique son numéro) |
Recours aux symboles graphiques Unicode
modifier- priorité : élevée
- difficulté : facile
L'usage de caractères Unicode pour leur apparence plutôt que pour leur sens est à la fois une mode et une facilité technique sur Wikipédia permise par le standard Unicode. Par exemple, les caractères triangles ▼ ▲ sont utilisés dans certains articles pour indiquer des tendances haussières ou baissières. Mais l'information véhiculée par l'affichage de tels caractères n'est pas restituable pour divers utilisateurs : par exemple, un lecteur d'écran ne peut pas traduire le caractère par « remonter, ouvrir, etc. », ou encore l'information n'est pas compréhensible si la police nécessaire à ce caractère n'est pas prise en charge[WCAG-TECH 5]. De même, un lecteur ne sachant pas que le rédacteur associe le triangle pointé vers le haut à une tendance haussière peut être dérouté par cette inattendue information tendancière. Ainsi, même pour un utilisateur ordinaire, la signification ne peut pas être devinée si elle n'est pas explicitée.
L'usage de textes explicites ou d'images dotées d'alternatives textuelles explicites est le seul moyen de garantir que tous les utilisateurs auront accès à l'information.
Non accessible | Accessible |
---|---|
Population : 100 habitants (<span style="color:#00cc33; font-size:11pt">▲</span>) Population : 100 habitants (▲) |
Population : 100 habitants ([[Fichier:Increase.svg|11px|alt=Augmentation|link=]]) Population : 100 habitants ( ) |
Diagrammes et images en caractères ASCII (art ASCII)
modifierpre
et de caractères ASCII. Privilégier les diagrammes en images accompagnés d'alternatives textuelles ou les structures HTML à base de listes imbriquées.- priorité : élevée
- difficulté : moyenne
Arborescences
modifierL'art ASCII est parfois utilisé pour produire des diagrammes arborescents, notamment des arbres généralogiques (exemple : Généalogie des Capétiens). Comme toute autre forme d'ASCII art, ces contenus sont dénués de sens pour les utilisateurs de synthèses vocales[WCAG-TECH 6]. Il existe deux solutions de remplacement : l'utilisation d'une véritable image permet de fournir une alternative textuelle pour les diagrammes simples (exemple : Guillaume II d'Angleterre), tandis que les structures de listes imbriquées permettent de créer un contenu plus complexe directement exploitable par toutes les aides techniques.
Non accessible | Accessible |
---|---|
<pre> Robert le Magnifique († 1035) X Arlette († v. 1050) ¦ +->Guillaume le Conquérant (v. 1027-1087) ¦ X Mathilde de Flandres († 1083) ¦ ¦ ¦ +->Robert Courteheuse (1050/52-1134) ¦ ¦ |
[[Fichier:Descendance de Robert le Magnifique-4.png |vignette|Arbre généalogique de Guillaume le Roux.]] Robert le Magnifique (mort en 1035) a pour descendants… |
Le modèle {{Arbre}} permet de créer un arbre (par exemple généalogique ou phylogénétique) correctement structuré et accessible, affiché sous forme d’une arborescence.
Priorité moyenne
modifierChangements de langue
modifierlang
en syntaxe wiki HTML, mais on peut s’en dispenser pour un nom propre, pour un terme technique ou pour un mot ou expression faisant partie du français courant.- priorité : moyenne.
- difficulté : facile.
Les lecteurs d’écran ont besoin d’être renseignés sur la langue du contenu pour adopter une prononciation adaptée[WCAG-TECH 7].
Hors cas particulier où le mot ou le nom en langue étrangère aurait une prononciation « française » originale et entrée dans les usages, le point déterminant est : « est-ce qu’il sera compréhensible ou reconnaissable s’il est prononcé à la française ? ».
Attention : la langue doit être indiquée uniquement à l’aide d’un code de langue IETF valide, dont le ou les composants sont présents dans la liste des composants maintenue par l’IANA. Par conséquent :
- il ne faut pas se fier aux éventuelles indications de code ISO-639 données dans les articles de Wikipédia sur les langues : seuls certains codes ISO-639 sont pertinents pour mentionner un changement de langue d’un contenu Web. Le code à utiliser est parfois indiqué comme « code de langue IETF » ou « IETF », et peut être vérifié à l’aide de cet outil de recherche. Il permet, par exemple, de s’assurer que le code correct pour l’occitan est oc et non oci ;
- pour les langues absentes de la liste de l’IANA (le normand ou le monégasque par exemple), le changement de langue ne doit pas être indiqué.
Dans les modèles, utiliser l’attribut lang
et non xml:lang
: Mediawiki ignore ce dernier en syntaxe wiki, mais génère les deux attributs attendus dans le code final XHTML.
Si le titre de l'article est un titre à mettre en italique (titre d'œuvre par exemple), utiliser le modèle {{Titre en italique}} avec en paramètre le code langue : {{Titre en italique|en}}
pour un titre en anglais par exemple.
Non accessible | Accessible |
---|---|
La première version des Directives pour l’accessibilité du contenu web (''Web Content Accessibility Guidelines'') a été publiée en 1999 par la ''[[Web Accessibility Initiative]]'' du [[W3C]]. |
La première version des Directives pour l’accessibilité du contenu web (''{{Langue|en|Web Content Accessibility Guidelines}}'') a été publiée en 1999 par la ''[[Web Accessibility Initiative| {{Langue|en|Web Accessibility Initiative}}]]'' du [[W3C]]. |
Priorité faible
modifierTermes techniques et usages rares d'un terme
modifier- priorité : faible
- difficulté : facile
Les directives pour l'accessibilité des contenus recommandent d'expliciter le sens des « mots ou expressions utilisés de manière inhabituelle ou de façon limitée » et d'apporter plus généralement les informations facilitant la compréhension des contenus[WCAG-TECH 8].
On pourra donc selon les cas, et dans la mesure du possible :
- recourir à un lien interne qui donne accès à l'article consacré au terme concerné ;
- fournir une définition du terme dans son contexte.
Non accessible | Accessible |
---|---|
Une base de données relationnelle ou objet... |
une [[base de données]] [[Base de données relationnelle|relationnelle]] ou [[Base de données orientée objet|objet]]... |
Un agrégateur de contenu... |
Un agrégateur de contenu (logiciel qui permet de suivre des [[Syndication de contenu|fils de syndication]])... |
Sigles et abréviations
modifier- priorité : faible
- difficulté : facile
Les directives pour l'accessibilité des contenus recommandent d'expliciter le sens des sigles et d'apporter plus généralement les informations facilitant le compréhension des contenus. Il n'est pas nécessaire d'expliciter chaque occurrence d'un même sigle quand il est présent plusieurs fois dans une même page : seule la première occurrence est nécessaire[WCAG-TECH 9].
On pourra donc selon les cas, et dans la mesure du possible :
- adopter une formulation directement explicite, du type : « Les Directives pour l'accessibilité des contenus Web (WCAG)… » ou « WCAG (Directives pour l'accessibilité des contenus Web) » ;
- utiliser les modèles {{abréviation}} ou {{abréviation discrète}} : WCAG ou WCAG ;
- recourir à un lien interne qui peut donner accès à la signification détaillée du sigle : « la WAI du W3C… » (utiliser un lien permet également de profiter du
title
de celui-ci, généralement pertinent pour les articles liés aux sigles) ; - utiliser le modèle {{abbr wikitexte}}, qui affiche à la fois la signification souhaitée et un lien interne : WCAGDirectives pour l'accessibilité des contenus Web.
Non accessible | Accessible |
---|---|
La SNCF |
La SNCF (Société nationale des chemins de fer français) La Société nationale des chemins de fer français (SNCF) La {{abréviation|SNCF|Société nationale des chemins de fer français}} La {{abréviation discrète|SNCF|Société nationale des chemins de fer français}} La {{abbr wikitexte|SNCF|[[Société nationale des chemins de fer français]]}} |
La [[SNCF]] |
La [[Société nationale des chemins de fer français|SNCF]] |
En revanche, expliciter systématiquement toutes les occurrences d'un sigle fréquemment répété dans un article est déconseillé, car cela peut se transformer en une gêne pour certains utilisateurs : l'usage systématique du lien ou des modèles d'abréviation rend en effet le contenu extrêmement verbeux et donc pénible à consulter dans un lecteur d'écran.
Attribut HTML title
modifier
title
d'un élément du type span
ou div
pour donner une information nécessaire à la compréhension du contenu.- priorité : faible
- difficulté : facile
Mediawiki permet de créer des contenus du type <span title="en anglais">'''(en)'''</span>
qui donnent (en). Mais l'information portée par un attribut HTML title
n'est perceptible pour tous les utilisateurs que sur certains éléments tels que les liens a
, les champs de formulaires ou encore les éléments abbr
. Portée par un élément div
ou span
, cette information ne sera pas accessible par exemple aux utilisateurs de lecteurs d'écran, de navigateurs non graphiques, ou encore naviguant au clavier.
Non accessible | Accessible |
---|---|
<span title="en anglais">(en)</span> ({{Info|en|en anglais}}) |
(en anglais) ({{abréviation|en|en anglais}}) Attention : |
Liens
modifierLibellés des liens
modifier- priorité : élevée
- difficulté : moyenne
Des liens accessibles ont des libellés sans ambiguïtés, qui permettent à tous les utilisateurs d'identifier leur cible et le résultat de leur action s'ils les suivent. Ceci prend une forme particulière pour les utilisateurs de lecteurs d'écran, qui sont fréquemment amenés à entendre ces libellés isolés de leur contexte[WCAG-TECH 10].
Cependant, le rendu des liens est également soumis à la présence de l'attribut HTML title
du lien : dans une configuration courante de lecteur d'écran, le contenu de cet attribut remplace celui du libellé de lien s'il est plus long. Or, MediaWiki produit automatiquement cet attribut pour les liens internes, en reproduisant le titre de la page cible si le libellé du lien est différent de celui-ci (les liens externes en revanche sont dénués d'attribut title
).
Éviter | Préférer |
---|---|
[[WP:AG]] [[WP:AG|Cliquez ici]] [[WP:AG|?]] [[Paris|Lire la suite…]] |
[[WP:AG|Atelier graphique]] [[Paris|Lire la suite de l'article Paris]] |
http://www.la-grange.net/w3c/ [http://www.la-grange.net/w3c/] [http://www.la-grange.net/w3c/ Cliquez ici] |
[http://www.la-grange.net/w3c/ Traduction en français des recommandations du W3C] |
[[Foo1|Détail]]… [[Foo2|Détail]] [http://example.org/foo1.html Archive] … [http://example.org/foo2.html Archive] |
[[Foo1]]… [[Foo2]] [http://example.org/foo1.html Archive de Lorem ipsum] … [http://example.org/foo2.html Archive de Sic dolor amet] |
Format de fichier et mention de la langue dans les liens externes
modifier- priorité : élevée
- difficulté : facile
Pour les liens externes, deux informations supplémentaires peuvent être nécessaires dans certains cas :
- la mention du format d'un document externe, lorsque le lien ne mène pas à une page HTML mais à un document à télécharger ;
- la mention de la langue de la page cible quand le lien mène à une page qui n'est pas en français.
Ces informations peuvent être apportées dans le contexte immédiat du lien ou, mieux, dans son libellé lui-même[WCAG-TECH 11].
Les usages en vigueur dans Wikipédia prévoient déjà la mention de ces informations dans le contexte des liens : les modèles d'extension de fichier sont fréquemment utilisés pour indiquer le format : {{pdf}} faire apparaître la mention [PDF] avant le lien. Dans la mesure du possible, il sera préférable que le format soit directement indiqué dans le libellé.
De la même manière, les modèles d'indication de langue sont utilisés pour indiquer la langue d'une page externe : {{en}} faire apparaître la mention (en) avant le lien. Dans la mesure du possible, il sera péférable que le libellé soit directement rédigé dans la langue concernée, en recourant au modèle {{langue}} pour préciser celle-ci.
Non accessible | Accessible |
---|---|
[http://example.org/foo.pdf Titre du document] |
{{pdf}} [http://example.org/foo.pdf Titre du document] Ou mieux : [http://example.org/foo.pdf Titre du document (PDF)] |
* [http://www.w3.org/TR/WAI-WEBCONTENT/ Directives d'accessibilité des contenus Web 1.0] |
* {{en}} [http://www.w3.org/TR/WAI-WEBCONTENT/ Directives d'accessibilité des contenus Web 1.0] Ou mieux, lien accessible dans la langue d'origine : * [http://www.w3.org/TR/WAI-WEBCONTENT/ {{langue|en|Web Content Accessibility Guidelines 1.0}}] |
Alternative des liens sur icône
modifierExemple de lien sur image
La cible est l'atelier accessibilité
L'alternative est « Atelier accessibilité »
- priorité : élevée
- difficulté : facile
Mediawiki permet de créer un lien interne ou externe sur une image, avec la syntaxe :
[[Fichier:Exemple.jpg|Alternative textuelle|link=page cible]]
Où :
- page cible est le titre d'une page interne, ou l'url d'un lien externe ;
- « Alternative textuelle » est le texte qui sera restitué lorsque l'image ne peut pas l'être (par exemple, par un navigateur non graphique, un lecteur d'écran, etc.).
L'alternative textuelle joue ici le même rôle que le libellé d'un lien texte : elle doit permettre d'identifier aisément la cible du lien. Elle ne doit en aucun cas décrire l'image elle-même, à la différence des autres cas d'alternatives textuelles d'images.
Lorsque l'alternative textuelle n'est pas renseignée par les contributeurs, mediawiki utilise le nom du fichier image comme alternative, ce qui n'est pas pertinent.
Éviter | Préférer |
---|---|
[[Fichier:Exemple.jpg|link=Wikipédia:Le Bistro]] [[Fichier:Exemple.jpg|Une fleur|link=Wikipédia:Le Bistro]] |
[[Fichier:Exemple.jpg|Le Bistro|link=Wikipédia:Le Bistro]] |
[[Fichier:Exemple.jpg|link=http://www.google.fr]] [[Fichier:Exemple.jpg|Icône de Google|link=http://www.google.fr]] |
[[Fichier:Exemple.jpg|Google|link=http://www.google.fr]] |
[[Fichier:Metro-M.svg|16x16px|alt=(M)|link=Métro de Paris]] L'image est un lien vers Métro de Paris, mais a pour alternative (M) |
[[Fichier:Metro-M.svg|16x16px|alt=Métro de Paris|link=Métro de Paris]] L'image-lien a pour alternative Métro de Paris qui désigne bien l'article visé |
Voir aussi plus bas : Alternative des images illustratives.
Couleurs
modifierUtilisation de la couleur et des informations sensorielles
modifier- priorité : élevée
- difficulté : facile
Lorsqu'une information n'est indiquée qu'à l'aide de changements de couleur, elle ne sera pas accessible à différents types d'utilisateurs : utilisateurs de lecteurs d'écran, de loupes d'écran modifiant les contrastes et les couleurs, utilisateurs souhaitant consulter un article après son impression sur une imprimante monochrome, ou encore utilisateurs ayant coché l'option d'accessibilité « Ignorer les couleurs… » dans leur navigateur[WCAG-TECH 12].
Que ce soit dans le texte ou dans une image (carte, graphique, etc.), l'information doit toujours être accessible, indépendamment des capacités sensorielles du lecteur[WCAG-TECH 13].
Plutôt que de fournir des informations à travers l'utilisation des formes, de la couleur, un changement de taille, la localisation de l'information, son orientation ou du son produit[1], préférez donner l'information en toutes lettres ou via une alternative textuelle et/ou contextuelle.
Non accessible | Accessible |
---|---|
<td style="background-color: yellow> </td> |
<td><[[Fichier:yellow.png|Icône médaille d'or]]</td> <td>Médaille d'or</td> |
En rouge, les œuvres majeures de cet auteur : * <span style="color:red">… |
Cet auteur a publié cinq œuvres dont trois sont considérées comme majeures : …, … et …. Les deux autres sont : … et …. |
Choix de couleurs et contrastes
modifier- priorité : moyenne
- difficulté : facile
Le niveau de contraste des couleurs d'avant-plan et d'arrière-plan peut également être une source de difficulté pour les utilisateurs handicapés visuels, daltoniens, etc. Il est recommandé de conserver un ratio de contraste de couleurs d'avant-plan et d'arrière-plan au moins supérieur à 4,5, tel qu'il peut être mesuré avec le Colour Contrast Analyser (Windows ou Mac)[2] ou en ligne comme sur le site app.contrast-finder.org[3]. Cela ne s'applique pas aux éléments purement décoratifs (bordures, images ne portant pas à elles seules une information nécessaire à la compréhension de la page, etc.)[WCAG-TECH 14]
Non accessible | Accessible |
---|---|
La société <span style="color: #FCB415">Renault</span> La société Renault |
La société Renault La société Renault |
<div style="color: #fff;background:#ff8080;font-weight:bold;text-align: center;"> Pokemon </div> Pokémon
|
<div style="text-align: center;"> '''Pokémon''' </div> Pokémon |
Listes
modifierListes à puces et listes numérotées
modifierol
, #
) et non ordonnées (ul
, *
) pour les énumérations.- priorité : élevée
- difficulté : facile.
Les énumérations de contenus nécessitent une structure spécifique pour être identifiables et aisément manipulables par les logiciels d'aide aux utilisateurs handicapés[WCAG-TECH 15].
Il est recommandé d'utiliser la syntaxe wiki *
pour les listes à puces et #
pour les listes numérotés, et d'éviter dans tous les cas les listes faites à l'aide de tirets, d'icônes, de retours à la ligne, etc.
Les listes non structurées faites au fil du texte à l'aide de séparateurs « | » (pipe) ou « • » (boulet) ne sont pas optimales, mais peuvent être admises quand le nombre d'élément est réduit (une demi-douzaine au plus, par exemple). L'utilisation d'une liste structurée et mise en forme via CSS permet d'obtenir le même résultat visuel de manière plus accessible.
Non accessible | Accessible |
---|---|
- item 1<br> - item 2<br> - item 3<br> |
* item 1 * item 2 * item 3 |
1. item<br> 2. item<br> 3. item<br> |
# item 1 # item 2 # item 3 |
[[lien 1]] • [[lien 2]] • [[lien 3]] |
{{Liste horizontale| * [[lien 1]] * [[lien 2]] * [[lien 3]] }} |
Listes de définitions
modifierdl
, dt
et dd
, en wiki ;
et :
) de manière à ce qu'un terme ou nom propre soit systématiquement associé à sa définition ou à sa description. Ne pas utiliser ces éléments pour d'autres raisons.- priorité : élevée
- difficulté : facile.
Les listes de définitions (ou de descriptions) permettent d'associer un ou plusieurs paragraphes à un terme ou nom propre qu'ils définissent ou décrivent.
Non accessible | Accessible |
---|---|
;Terme défini Contenu |
;Terme défini :Description de la définition |
;Terme défini * Élément de liste n°1 * Élément de liste n°2 * Élément de liste n°3 |
;Terme défini :* Description de la définition n°1 :* Description de la définition n°2 :* Description de la définition n°3 |
Le balisage dt
(wiki : ;
) est cependant fréquemment utilisé pour produire un pseudo-titre de section lorsqu'on ne souhaite pas que celui-ci apparaisse dans le sommaire de l'article, ou encore simplement l'introduction d'une liste. Il faut le plus souvent les remplacer par de vrais titres de section (voir #Titres de section). Le balisage dd
(wiki : :
) est fréquemment utilisé pour produire un retrait. Il est nécessaire dans certains cas de le remplacer par le modèle retrait
.
Non accessible | Accessible (à choisir selon le contenu) |
---|---|
;Titre de la section Contenu de la section ou :Texte en retrait |
;Terme expliqué :Explicitation du terme |
==== Titre de la section ==== Contenu de la section | |
'''Titre de la liste :''' * item de liste * item de liste * item de liste | |
{{retrait|Texte en retrait}} |
Syntaxe wiki des listes à puces, listes numérotées, listes de définitions
modifier- priorité : élevée
- difficulté : facile
Il faut absolument éviter d'aérer le code en sautant des lignes entre deux entrées *
, #
, ;
ou :
d'une liste. Cela a pour conséquence de redémarrer une nouvelle liste à chaque fois. Tous les éléments d'une liste doivent être « collés » les uns aux autres.
Non accessible | Accessible |
---|---|
* item 1 * item 2 |
* item 1 * item 2 |
# item 1 # item 2 |
# item 1 # item 2 |
;terme 1 :définition du terme 1 ;terme 2 :définition du terme 2 |
;terme 1 :définition du terme 1 ;terme 2 :définition du terme 2 |
;terme 1 :définition du terme 1 ;terme 2 :définition du terme 2 |
Tableaux
modifierOn distingue :
- Les tableaux de données, pour lesquels les titres de colonnes et de lignes sont indispensables à la compréhension des données du contenu ;
- Les tableaux de mise en forme, qui doivent être linéaires et dépourvus de structure comme les titres de colonnes et de lignes ;
- Les cas spéciaux, comme les tableaux triables, les tableaux-fiches (type infobox, taxobox, modbox...) ou encore les tableaux-palettes de navigation.
Tableaux de données
modifierLes tableaux de données organisent l'information, en rattachant les cellules à des en-têtes de ligne et/ou de colonnes. Ces en-têtes sont la structure qui permet de comprendre le sens du tableau. Étant un mode d'organisation de l'information exclusivement visuel, ils nécessitent des mesures particulières pour pouvoir être compris quand ils sont restitués par un lecteur d'écran.
Cas général
modifier! scope=col
, ! scope=row
) dans les tableaux de données. Utiliser autant que possible la syntaxe |+
pour indiquer le titre du tableau. Ne jamais imbriquer plusieurs niveaux de tableaux.- priorité : élevée.
- difficulté : facile.
Les en-têtes de ligne et de colonne doivent toujours être indiqués à l'aide de la syntaxe !
(ou <th>
). Les en-têtes de colonne sont identifiés par l'attribut scope=col
, et les en-têtes de ligne par scope=row
[WCAG-TECH 16], quand ils s'appliquent à la totalité d'une ligne ou d'une colonne. Voir l'aide sur les tableaux qui fournit des modèles-type à copier/coller.
Non accessible | Accessible |
---|---|
{| | | '''En-tête colonne 2''' | '''En-tête colonne 3''' |- | '''En-tête ligne 1''' | Contenu | Contenu |} |
{| | ! scope=col | En-tête colonne 2 ! scope=col | En-tête colonne 3 |- ! scope=row | En-tête ligne 1 | Contenu | Contenu |} |
Il est également possible d'améliorer l'accessibilité d'un tableau de données en lui donnant un titre explicite. Le titre de tableau est créé à l'aide de la syntaxe |+
(ou <caption>
)[WCAG-TECH 17].
Exemple :
texte affiché | wikicode | |||||||||
---|---|---|---|---|---|---|---|---|---|---|
|
{| class="wikitable" |+ Titre du tableau |- ! scope=col | ! scope=col | Titre 1 ! scope=col | Titre 2 |- ! scope=row| A |width=50%| Contenu 1a | Contenu 2a |- ! scope=row| B | Contenu 1b | contenu 2b |} |
Le code d'un tableau de données à doubles entrées sera donc du type :
! scope=col
|
! scope=col
| |
---|---|---|
! scope=row
|
Contenu | Contenu |
! scope=row
|
Contenu | Contenu |
L'imbrication d'un tableau de données à l'intérieur d'un autre tableau de données peut créer un contenu qui sera très difficilement compréhensible dans un lecteur d'écran : elle doit être proscrite.
Tableaux complexes
modifierid
et headers
pour relier chaque cellule de contenu à son ou à ses en-têtes de lignes et de colonnes.- priorité : élevée.
- difficulté : difficile.
Les tableaux complexes comportent des divisions par blocs de lignes ou de colonnes. Ce type de tableau peut et devrait le plus souvent être réécrit en le décomposant en plusieurs tableaux simples. Cependant, lorsque ce n'est pas possible, des mesures spécifiques doivent être prises pour leur accessibilité.
Si des en-têtes de ligne ou de colonne ne s'appliquent qu'à une partie des cellules de la ligne ou de la colonne, l'attribut scope
ne convient pas. Un code plus complexe est nécessaire, combinant :
- l'attribut
id
de l'en-tête!
(ou<th>
). Par exemple,id="foo1"
pour celui du premier bloc de lignes ; - l'attribut
headers
de chaque cellule de donnée à laquelle s'applique l'en-tête :headers="foo1"
pour chaque cellule rattachée à l'en-têteid="foo1"
.
En effet, dans ce cas, chaque cellule doit être individuellement rattachée à l'en-tête de son bloc[WCAG-TECH 18].
En-tête du premier bloc de lignes, codé ! id="entete_a"
|
---|
contenu codé | headers="entete_a"
|
contenu codé | headers="entete_a"
|
contenu codé | headers="entete_a"
|
En-tête du deuxième bloc de lignes, codé ! id="entete_b"
|
contenu codé | headers="entete_b"
|
contenu codé | headers="entete_b"
|
contenu codé | headers="entete_b"
|
Cette syntaxe peut se combiner avec l'utilisation de scope
pour d'autres en-têtes ne posant ce problème :
En-tête du premier bloc de lignes, codé ! id="entete_1"
| |
---|---|
en-tête de ligne codé ! scope=row headers="entete_1"
|
contenu codé | headers="entete_1"
|
en-tête de ligne codé ! scope=row headers="entete_1"
|
contenu codé | headers="entete_1"
|
en-tête de ligne codé ! scope=row headers="entete_1"
|
contenu codé | headers="entete_1"
|
En-tête du deuxième bloc de lignes, codé ! id="entete_2"
| |
en-tête de ligne codé ! scope=row headers="entete_2"
|
contenu codé | headers="entete_2"
|
en-tête de ligne codé ! scope=row headers="entete_2"
|
contenu codé | headers="entete_2"
|
en-tête de ligne codé ! scope=row headers="entete_2"
|
contenu codé | headers="entete_2"
|
Si on utilisait scope=col
pour les deux en-têtes de bloc de ligne, un lecteur d'écran associerait les deux en-têtes en même temps à chaque cellule du deuxième bloc, ce qui ne correspond pas au sens du tableau.
Attention : chaque identifiant id
doivent être unique dans une page Web. Il faut donc anticiper la présence éventuelle de plusieurs tableaux du même type dans la même page.
Tableaux de mise en forme
modifier<caption>
ou |+
, en-têtes de ligne ou de colonne <th>
ou !
).- priorité : élevée.
- difficulté : facile.
Des tableaux peuvent aussi être utilisés de manière accessible pour mettre en forme le contenu. Ils doivent alors répondre à deux contraintes :
- se différencier des tableaux de données en n'utilisant aucune syntaxe propre à ces derniers: pas d'en-tête de ligne ou de colonnes, pas de titre de tableau[WCAG-TECH 19] ;
- permettre à leur contenu de conserver tout son sens quand il est perçu sans le support visuel et sans l'ordre de lecture fourni par les lignes et les colonnes (de manière linéaire)[WCAG-TECH 20].
Non accessible | Accessible |
---|---|
{| ! Ceci est en gras | Suite du contenu |} |
{| |'''Ceci est en gras''' | Suite du contenu |} |
{| |- |[[Fichier:...]] |[[Fichier: ...]] |- |Légende de l'image 1 |Légende de l'image 2 |} |
{| |[[Fichier:...]]<br>Légende de l'image 1 |[[Fichier: ...]]<br>Légende de l'image 2 |} |
Plan des voies de la ligne 3a du tramway d'Île-de-France | Une image cliquable |
Tableaux triables
modifier- priorité : élevée
- difficulté : moyenne
L'utilisation du modèle {{smn}} génère dans le tableau des données masquées fournissant des clés de tri différentes des données affichées dans le tableau. Ces clés de tri étant un contenu HTML simplement masqué dans chaque cellule concernée et non une métadonnée[WCAG-TECH 21], elles rendent incompréhensible leur contenu pour les utilisateurs chez qui les styles CSS ne sont pas pris en compte ou sont désactivés.
Entre-temps, MediaWiki est passé au nouveau standard HTML5, version introduisant notamment les attributs de données personnalisés data-*, ouvrant la voie à l'utilisation de l'attribut data-sort-value=""
. Cet attribut n'affecte aucunement les utilisateurs dont le support des styles CSS est désactivé, et le système de tri des tableaux de MediaWiki a également fait d'importants progrès : les cinq premières lignes d'un tableau étant maintenant analysées pour essayer de déterminer le type de données.
Est également apparu l'attribut data-sort-type=""
, à utiliser sur les en-têtes de colonnes, pour indiquer quel type de données la colonne contient, au cas-où malgré la prise en compte des cinq premières lignes du tableau, le type aurait été mal détecté.
Si des clés de tri restent nécessaires, il faut privilégier l'utilisation du modèle {{tri}} ou l'usage de l'attribut data-sort-value=""
.
Modèle | Code | Rendu affiché avec CSS | Contenu réel de la cellule de tableau restitué si les styles CSS ne sont pas pris en compte |
---|---|---|---|
{{smn}} | {{smn|5|4|100}}
|
5 | |
{{tri}} | {{tri|5}} 5 ou {{tri|5|5}}
|
5 | 5 |
Infobox et taxobox
modifierLes modèles d'infobox V3 offrent une base permettant la création de modèles d'infobox accessibles.
Palettes de navigation
modifierL'usage dans des modèles comme {{Méta palette de navigation}} de tableaux imbriqués avec l'option sous-groupe est fortement déconseillé. Voir également les remarques faites sur ce modèle, dans ce tableau, sur la page des points à améliorer.
Boîtes déroulantes
modifierImages
modifierLes images peuvent être désactivées par certains utilisateurs, ou non visibles par des handicapés visuels. Le contenu de l'attribut « alt », obligatoire pour l'accessibilité et le standard HTML, dépendra du type d'image et du contexte[4].
Choix de l'emplacement du code
modifierL'emplacement du code de l'image devrait se trouver dans le même ordre par rapport au texte que dans le rendu visuel. Par exemple, si une image apparaît au quart d'une page, l'appel [[fichier:...]]
devrait apparaître au quart du wikitexte[5].
Images portant une information
modifierUne image peut porter une information qui n'est pas présente par ailleurs dans le contenu de la page. Pour être perceptible par les utilisateurs de lecteur d'écran, de navigateur ne restituant pas les images (affichage des images non fonctionnel ou volontairement désactivé, navigateur en mode texte, etc.), cette information doit être également indiquée de manière textuelle. C'est le rôle de l'alternative textuelle de l'image (attribut HTML alt
) et de sa description étendue (attribut HTML longdesc
)[WCAG-TECH 22]. Cette alternative n'est pas affichée par défaut, et ne sera restituée que lorsque l'image elle-même ne peut pas l'être.
Mediawiki permet d'indiquer l'alternative textuelle d'une image mise en vignette, par le paramètre alt
, ou de toute autre image sans que ce paramètre soit explicite :
[[Fichier:Nom de l'image|vignette|alt=Alternative textuelle de l'image|Légende affichée sous l'image.]] [[Fichier:Nom de l'image|Alternative textuelle de l'image]]
Cette alternative textuelle doit impérativement être renseignée : si le paramètre alt
est vide ou absent, MediaWiki génère en effet une image-lien avec le nom de fichier comme alternative. Cela produit un résultat très difficilement compréhensible : aucune information pertinente ne sera restituée si les images ne peuvent être affichées, et un lecteur d'écran énoncera au mieux le nom du fichier image en guise d'alternative. Exemples :
[[Fichier:image.jpg|...|alt=Alternative textuelle|Légende de l'image]]
→ la légende est utilisé dans l'infobulle, l'alternative comme alternative textuelle si l'image ne peut pas être chargée ;[[Fichier:image.jpg|...|alt=Alternative textuelle]]
→ pas de légende en infobulle, juste l'alternative textuelle ;[[Fichier:image.jpg|...|Légende de l'image]]
(page d'accueil) → la légende est utilisé dans l'infobulle et en tant qu'alternative textuelle ;[[Fichier:image.jpg|...|]]
→ pas de légende en infobulle, le nom du fichier est utilisé comme alternative textuelle.
L'alternative doit être rédigée en fonction du contexte où se trouve l'image, et de l'information utile qu'elle apporte dans celui-ci. Sa rédaction est rendue plus difficile par le fait que chaque image insérée à l'aide de la syntaxe [[Fichier:...
est également un lien vers sa propre page wiki : l'alternative doit, autant que possible, éviter de donner à penser que ce lien vise un article de Wikipédia.
Exemple d'une image illustrative, apportant une information mineure
modifieralt
des images avec une brève description de l'information donnée par l'image et permettant d'identifier sa nature.- priorité : élevée
- difficulté : difficile
La plupart des images ajoutées aux articles en vignette n'apportent pas d'information majeure, et ont un rôle essentiellement illustratif. D'autre part, une partie de cette information est souvent déjà donnée sous forme textuelle dans la légende de l'image. Le fait que l'image soit un lien interdit cependant de lui donner une alternative textuelle vide.
Dans ce cas, l'alternative, aussi concise que possible (éviter de dépasser 120 caractères), devrait décrire factuellement l'image.
Non accessible | Accessible |
---|---|
[[Fichier:La Tour Eiffel surplombant Paris.jpg |vignette |La tour Eiffel surplombant [[Paris]] de ses {{nobr|300 mètres}} de hauteur.]] [[Fichier:La Tour Eiffel surplombant Paris.jpg |vignette |alt=La tour Eiffel |La tour Eiffel surplombant [[Paris]] de ses {{nobr|300 mètres}} de hauteur.]] |
[[Fichier:La Tour Eiffel surplombant Paris.jpg |vignette |alt=Photographie montrant le second étage de la tour Eiffel dominant le toit des immeubles environnants. |La tour Eiffel surplombant [[Paris]] de ses {{nobr|300 mètres}} de hauteur.]] |
Exemple d'une image apportant une information majeure
modifieralt
des images pour indiquer où se trouve l'information textuelle.- priorité : élevée
- difficulté : facile
Dans certains cas, le contexte sera difficilement compréhensible ou incomplet en l'absence de l'image. L'information apporté par l'image est alors le plus souvent complexe, et nécessite une description détaillée et longue. Mais l'alternative textuelle n'est pas destinée à donner cette description détaillée : c'est le rôle du longdesc
qui n'est actuellement pas pris en charge par mediawiki.
Dans ce cas, il convient de compléter le texte de l'article ou la légende de l'image ou encore le champ description de sa propre page afin d'y faire figurer l'information que l'image vient alors simplement illustrer ou reproduire sous forme graphique. L'alternative textuelle se contente de signaler la fonction de l'image-lien et d'indiquer où l'information est décrite : alt=Consulter les données associées à cette image, dont la description suit ci-après
[WCAG-TECH 23].
Non accessible | Accessible |
---|---|
[[Fichier:Fréquentation tour Eiffel.svg |vignette |Évolution de la fréquentation de la tour Eiffel depuis 1889.]] [[Fichier:Fréquentation tour Eiffel.svg |vignette |alt=Statistiques de fréquentation |Évolution de la fréquentation de la tour Eiffel depuis 1889.]] |
[[Fichier:Fréquentation tour Eiffel.svg |vignette |alt=Consulter les données associées à cette image, dont la description suit ci-après |Fréquentation de la tour Eiffel : moins d'un million d'entrées annuelles de 1889 à 1945, puis une croissance presque continue jusqu'à {{nobr|6 millions}} d'entrées annuelles après 2000.]] |
Longueur de l'alternative textuelle
modifier- priorité : élevée
- difficulté : facile
Bien qu'il n'y ait aucune limite chiffrée strictement définie, les alternatives textuelles doivent rester concises. Dépasser une longueur d'environ 120 caractères en français indique que l'alternative doit être abrégée et combinée avec une description plus complète présente sous une forme plus appropriée dans la même page que l'image ou dans une autre page accessible à partir de celle-ci[note 1].
Non accessible | Accessible |
---|---|
[[Fichier:DBP 1973 780 Otto Wels.jpg|vignette|alt=Timbre postal de la république fédérale allemande émis en 1973 à l'occasion du centenaire de la naissance d'Otto Wels. À gauche de l'image, l'inscription {{langue|de|Deutsche Bundespost}} ; à droite ''Otto Wels * 15.9.1973. Sur un fond mauve clair, le buste de Wels emplit les trois quarts gauche de l'image. Le front dégarni, les cheveux coiffés vers l'arrière, Wels a des poches sous les yeux, un nez assez fort et porte une épaisse moustache. Son visage dégage une impression de tristesse. |Timbre à l'effigie d'[[Otto Wels]].]] |
Déplacer la description dans la page de l'image sur Wikimedia Commons : [[Fichier:DBP 1973 780 Otto Wels.jpg|vignette |alt=Description du timbre postal représentant Otto Wels |Timbre à l'effigie d'[[Otto Wels]].]] Se reporter à la page de l'image Commons:File:DBP 1973 780 Otto Wels.jpg pour voir comment la description y est intégrée. |
[[Fichier:Reichstag - 1933.png|vignette|upright=1.5 |alt=Graphique en couleur, en forme de demi-cercle orienté vers le haut, représentant la répartition des 647 sièges du parlement allemand après l'élection du 5 mars 1933. À la droite du graphique, un grand secteur de couleur brun foncé figure les 288 sièges du parti nazi. À gauche, deux aires, de couleur rouge foncé et rouge clair, illustrent les 201 sièges du parti communiste et du parti social-démocrate. Entre ces deux grands blocs, au centre de l'image, 4 aires, variant du bleu foncé au gris clair, pour les autres partis |Répartition des {{nobr|647 sièges}} du Reichstag après l'élection de 1933.]] |
Déplacer l'alternative dans la légende : [[Fichier:Reichstag - 1933.png|vignette|upright=1.5 |alt=Composition du parlement allemand après l'élection du 5 mars 1933, décrite ci-après |Répartition des {{nobr|647 sièges}} du Reichstag après l'élection de 1933. {{Légende/Début}} {{Légende|#C00000|Parti communiste - KPD (81 sièges)}} {{Légende|#EA0000|Parti social-démocrate - SPD (120 sièges)}} {{Légende|#BFBFBF|Autres partis (14 sièges)}} {{Légende|#95B3D7|Parti populaire bavarois (18 sièges)}} {{Légende|#558ED5|Parti du centre - ''Zentrum'' (74 sièges)}} {{Légende|#17375E|Parti national du peuple allemand - DNVP (52 sièges)}} {{Légende|#600000|Parti national-socialiste (288 sièges)}} {{Légende/Fin}}]] |
Images décoratives
modifier[[Fichier:...]]
pour des icônes et autres images décoratives qui ne portent aucune information qui ne soit présente par ailleurs dans leur contexte. Privilégier l'utilisation des images d'arrière-plan CSS. À défaut, renseigner systématiquement le paramètre alt
des images pour identifier la nature du lien généré par celle-ci.- priorité : élevée.
- difficulté : moyenne.
Théoriquement, une image décorative, qui ne porte pas d'information nécessaire à la compréhension de la page, devrait avoir une légende (alternative textuelle) vide, afin d'être ignorée notamment par les synthèses vocales[WCAG-TECH 24].
Mais toute image placée dans une page Wikipédia à l'aide de la syntaxe wiki est en fait une image-lien (vers sa page commons en général). Or, les lecteurs d'écran n'ignorent jamais les images liens, même si leur alternative textuelle est vide. Le plus souvent, ils lisent alors tout ou partie de l'URL de l'image, ce qui n'est pratiquement pas compréhensible pour l'utilisateur.
On ne peut donc pas mettre en pratique sur Wikipédia la règle habituelle d'accessibilité consistant à donner une alternative textuelle vide à une image décorative. On s'efforcera d'indiquer une alternative aussi explicite que possible, qui indique que le lien a pour cible la page de l'image.
Autant que possible, on privilégiera également le passage par une classe CSS ajoutée à common.css pour gérer ces images décoratives sous forme d'arrière-plan CSS (background-image
) qui ne posent pas ce type de problèmes d'accessibilité[WCAG-TECH 25]. Pour s'assurer du respect des licences, utiliser une image dans le domaine public ou CC0. Le cas échéant, créditer l'image sur WP:Crédits graphiques.
Non accessible | Accessible |
---|---|
[[Fichier:P Eiffel.png|48x24px|]] [[Fichier:P Eiffel.png|48x24px|La tour Eiffel]] |
[[Fichier:P Eiffel.png|48x24px|Icône du Portail de la tour Eiffel]] |
<div class="bandeau"> [[Fichier:icone1.png|]] Contenu textuel du bandeau </div> |
<div class="bandeau icone1"> Contenu textuel du bandeau </div> Dans MediaWiki:Common.css : .bandeau.icone1 { background: url(...icone1.png) no-repeat left center; padding-left: ...px; } |
Combinaisons d'images via CSS
modifier- priorité : élevée
- difficulté : moyenne
Pour économiser la création de séries d'images exploitant toutes un fond identique, il peut être tentant de recourir aux styles CSS et de superposer deux images (un fond de carte et un point de localisation, par exemple). L'information résultant de la combinaison de ces deux images ne sera cependant perceptible que pour une partie des utilisateurs, qui ont accès au rendu visuel CSS. Par ailleurs, l'image ne sera pas réutilisable ou copiable. Enfin, le rendu pourra être compromis en cas d'agrandissement de la taille des caractères via les options d'accessibilité du navigateur. Ces techniques de composition d'images sont un défaut d'accessibilité au niveau le plus grave[WCAG-TECH 26].
Rendu espéré | Rendu sans CSS dans un navigateur graphique | |
---|---|---|
|
Images animées
modifier- priorité : élevée.
- difficulté : difficile.
Les animations (mouvement, clignotement, défilement) sont une source de difficulté pour les utilisateurs souffrants de trouble de la concentration, ou pour ceux ayant besoin de davantage de temps que prévu pour percevoir et comprendre les étapes successives de l'animation. Il est nécessaire de permettre d'interrompre une animation qui perturbe l'attention, ou plus généralement de fournir les contrôles nécessaires pour mettre celle-ci en pause puis passer à son étape suivante en la relançant.
À cet effet, les normes d'accessibilité prévoient que les animations lancées automatiquement au chargement de la page :
- ou bien ne doivent pas excéder une durée de 5 secondes[WCAG-TECH 27] (ce qui revient à en faire un élément purement décoratif) ;
- ou doivent être dotées de fonctionnalités de contrôle (arrêt, pause, démarrage)[WCAG-TECH 28].
Les images GIF animées ne peuvent pas être dotées de ces contrôles et sont donc considérées comme non accessibles si l'animation est en boucle ou si elle excède 5 secondes (elles ne peuvent qu'être stoppées via la touche escape sans possibilité de redémarrage et sans contrôle précis de l'étape sur laquelle s'effectue l'interruption). En revanche, une animation au format Ogg Theora ne démarre qu'à l'initiative de l'utilisateur et s'accompagne des contrôles utilisateurs nécessaires.
Pour savoir comment faire la conversion de GIF à Ogg Theora, consulter : Conversion d'une animation gif en vidéo Ogg Theora.
Images cliquables
modifier- priorité : élevée.
- difficulté : facile.
L'extension ImageMap permet de créer des cartes et autres images cliquables respectant les contraintes d'accessibilité :
- l'image peut avoir son alternative textuelle globale, qui devrait être rédigée sous la forme « carte de… » ou « organigramme de… » par exemple ;
- l'extension génère automatiquement les alternatives textuelles de chaque zone cliquable, à l'aide du lien vers la page concernée.
Il faut en revanche proscrire les pseudos-images MAP réalisées en positionnant des liens HTML sur un fond de carte, le résultat n'étant pas accessible sans le support de CSS.
Non accessible | Accessible |
---|---|
<div style="position: relative;"> [[Fichier:foo.png|300px]] <span style="position: absolute; top: ...px; left: ...px">[[Lien 1]]</span> <span style="position: absolute; top: ...px; left: ...px">[[Lien 2]]</span> </div> |
<imagemap> Fichier:foo.png|300px|Carte des principales villes de Syldavie rect position-du-lien-1 [[lien-1]] rect position-du-lien-2 [[lien-2]] desc position-de-la-description </imagemap> |
Galeries
modifieralt
de chaque image dans les galeries réalisées avec <gallery>
, de manière à décrire brièvement le sujet de l'image.Non accessible | Accessible |
---|---|
<gallery> Fichier:Wikipedia-logo-v2-fr.svg|Légende de l'image. Fichier:Exemple.jpg|Légende de l'image. </gallery>
|
<gallery> Fichier:Wikipedia-logo-v2-fr.svg|Légende de l'image.|alt=Logo de Wikipedia Fichier:Exemple.jpg|Légende de l'image.|alt=Photographie d'une fleur de tournesol en gros plan </gallery>
|
Animations, vidéos, fichiers audios
modifier- priorité : élevée.
- difficulté : moyenne.
Les « media temporels », c'est à dire les animations, les contenus vidéo ou audio, nécessitent une transcription de l'information sous forme textuelle pour que celle-ci soit accessible à tous :
- une animation ou une vidéo ne seront pas perceptibles pour un utilisateur n'ayant pas accès au rendu visuel (utilisateur aveugle par exemple, ou utilisateur dont le système n'a pas le support du format Ogg Theora), sauf si l'information visuelle et sonore est disponible dans la même page sous forme textuelle[WCAG-TECH 29] ;
- un fichier sonore ne sera pas perceptible pour un utilisateur n'ayant pas accès au rendu sonore (utilisateur sourd, par exemple, utilisateur dont le système n'a pas le support du format Ogg Vorbis, ou utilisateur n'ayant pas la possibilité d'activer le son dans un contexte donné), sauf si l'information sonore est disponible dans la même page sous forme textuelle[WCAG-TECH 30].
Le moyen le plus direct de disposer de cette transcription est de privilégier, lors de la rédaction, le contenu textuel des articles. Autrement dit, il s'agit de décrire (d'abord) dans le texte les informations qui peuvent (ensuite) être illustrées par un document multimédia ou une animation.
Frises chronologiques
modifierL'extension permettant de créer des frises chronologiques ne tenant pas compte des contraintes d'accessibilité et ne permettant pas de donner une alternative textuelle à ces images, l'utilisation de
<timeline>
est déconseillée.
À réévaluer, le résultat dépend de la manière dont l'extension est utilisée :
- le résultat est une image MAP potentiellement accessible si les légendes sont des liens ;
- mais l'extension ne génère aucune alternative textuelle lorsque les légendes sont du texte brut.
Formules mathématiques
modifierFormules chimiques
modifierStyles CSS
modifierPseudo contenu CSS
modifier- priorité : élevée.
- difficulté : moyenne.
Le rôle fondamental des styles CSS est de permettre la séparation du contenu structuré et de sa présentation : les styles CSS ne portent aucune information de contenu, et ne servent qu'à mettre en forme ce dernier.
Ceci contribue de manière essentielle à l'accessibilité : cette séparation permet en effet aux navigateurs et aux aides techniques d'adapter aisément la mise en forme du contenu aux besoins de l'utilisateur.
Cependant, il existe plusieurs dérives possibles de l'utilisation des styles CSS, qui vont totalement à l'encontre de ce principe de séparation, en générant via les styles CSS un « pseudo-contenu » dépendant en tout ou partie de la mise en forme. C'est le cas notamment :
- des légendes de cartes, de tableaux ou de diagrammes où les couleurs ou icônes sont des arrières-plans (
background
) CSS ; - des cartes de géolocalisation où une image ou un point sont positionnés via CSS sur un fond de carte vierge ;
- des images génériques colorées via CSS.
La consultation d'un article avec ou sans activation des styles CSS ne doit entraîner aucune perte d'information[WCAG-TECH 31].
Ces détournements de CSS devraient être remplacés par des contenus HTML indépendants de la mise en forme, c'est-à-dire dans la plupart des cas des images complètes. Le niveau de faisabilité est variable selon le nombre d'images concernées (il est par exemple faible dans le cas de la géolocalisation, en l'absence d'une extension dédiée permettant de générer automatiquement les très nombreuses images de remplacement nécessaires).
Javascript
modifierJavascript est utilisé sur Wikipédia :
- soit pour l'ajout de fonctionnalités : modèles déroulants, gadgets, wikiAltlas, etc. ;
- soit pour des modifications locales de l'interface ou du contenu : réécriture des titres d'article, icônes de titre, etc.
Du point de vue de son accessibilité :
- javascript doit être utilisé de manière compatible avec l'accessibilité : tout contenu ou élément d'interface modifié ou créé via javascript doit respecter l'ensemble des règles d'accessibilité ;
- en revanche, un script respectant cette première condition n'a pas à être doté d'une alternative : contrairement à WCAG1.0, les normes d'accessibilité WCAG2.0 n'exige en effet pas d'alternative à javascript pour les utilisateurs n'ayant pas le support de cette technologie ou ayant désactivé celui-ci.
Produire un code compatible avec l'accessibilité
modifier- priorité : élevée.
- difficulté : moyenne.
Les lecteurs de l'encyclopédie en situation de handicap personnel ou technique n'auront pas nécessairement désactivé le support de javascript dans leur navigateur. Il est donc nécessaire que tout contenu généré via javascript soit accessible en lui-même, c'est-à-dire qu'il comporte en particulier l'ensemble des éléments et attributs nécessaires indiqués dans les bonnes pratiques d'accessibilité[WCAG 1].
Non accessible | Accessible |
---|---|
var image = document.createElement('img'); image.src = 'http://example.org/foo.png'; |
var image = document.createElement('img'); image.src = 'http://example.org/foo.png'; image.alt = 'Ici, alternative textuelle pertinente pour cette image'; |
var lien = document.createElement('a'); lien.href = 'http://example.org'; lien.appendChild(document.createTextNode('+'); |
var lien = document.createElement('a'); lien.href = 'http://example.org'; lien.appendChild(document.createTextNode('+'); lien.title = 'Ici, texte explicitant la cible du lien'; |
Accessibilité au clavier
modifier- priorité : élevée.
- difficulté : moyenne.
Tous les lecteurs de Wikipédia n'ont pas la possibilité d'utiliser une souris ou un dispositif de pointage équivalent. S'assurer que chaque interaction est également possible via la touche tabulation du clavier garantit que tous auront accès à cette interaction indépendamment de leur périphérique de saisie[WCAG-TECH 32].
L'un des principaux points clés à respecter est de n'utiliser le gestionnaire d'événement onclick
que sur des éléments qui sont sémantiquement destinés à produire un lien ou un contrôle, et de ne jamais l'utiliser sur des éléments tels que span
, div
ou img
[WCAG-TECH 33].
Onclick
peut être utilisé de manière accessible sur les éléments :
a
input
de typesubmit
,reset
,image
,button
,radio
etcheckbox
button
area
Non accessible | Accessible |
---|---|
<span onclick="maFonction();"> Lorem ipsum </span> |
<a href="#" onclick="maFonction(); return false;"> Lorem ipsum </a> |
<img src="bouton.gif" alt="Lorem ipsum" onclick="maFonction();" /> |
<a href="#" onclick="maFonction(); return false;"> <img src="bouton.gif" alt="Lorem ipsum" /> </a> |
Redirections et rafraîchissements de page
modifier- priorité : faible.
- difficulté : facile.
Les redirections automatiques via javascript affichent une page temporaire qui déclenche la redirection vers la page finale après un délai donné. De même, un script de rafraîchissement provoque le rechargement automatique de la page toutes les n secondes.
Quelle que soit la temporisation choisie, des utilisateurs d'aide technique auront des difficultés à consulter ces pages dans le délai fixé : l'accès peut être en effet beaucoup plus lent pour un utilisateur naviguant au clavier, recourant à une loupe ou encore à un lecteur d'écran. Ce type de script est donc à éviter autant que possible[WCAG-TECH 34].
Si nécessaire, il est possible cependant de rendre accessible les rafraîchissements et redirections via javascript :
- en veillant à insérer en tout début de contenu de page, et de manière visible à l'affichage, un lien permettant à l'utilisateur de désactiver celles-ci ;
- ou encore en permettant à l'utilisateur de configurer la durée d'affichage avant la redirection ou le rafraîchissement.
Notes et références
modifier- (en) « Understanding SC 1.3.3:Sensory Characteristics (Level A) »
- Colour Contrast Analyser, sur paciellogroup.com. Précision : L'algorithme à utiliser est celui de luminosité, pas celui de différence des couleurs.
- app.contrast-finder.org.
- Chaque image a un attribut alt, sur le site AnySurfer, consulté le 18 mars 2014.
- voir ce commentaire d'un non voyant : Wikipédia:RAW/2013-09-13#Dans_les_coulisses_de_la_Wikimedia
- Cette approche est en cours de normalisation en particulier dans HTML5: Techniques for providing useful text alternatives, W3C Working Draft 25 May 2011.
Les références suivantes mènent à la version originale en anglais des Règles pour l'accessibilité des contenus Web (WCAG) 2.0 :
Les références suivantes mènent à la version originale en anglais des Techniques pour WCAG2.0 :
- Using h1-h6 to identify headings, niveau d'accessibilité A.
- Presenting repeated components in the same relative order each time they appear, niveau d'accessibilité AA.
- Using semantic markup to mark emphasized or special text et Failure of Success Criterion 1.3.1 due to using changes in text presentation to convey information without using the appropriate markup or text, niveau d'accessibilité A
- Failure of Success Criterion 1.3.3 due to identifying content only by its shape or location, niveau d'accessibilité A
- F26: Failure of Success Criterion 1.3.3 due to using a graphical symbol alone to convey information, niveau d'accessibilité A.
- Providing text alternatives for ASCII art, emoticons, and leetspeak et Failure of Success Criterion 1.1.1 due to using ASCII art without providing a text alternative, niveau d'accessibilité A
- Using language attributes to identify changes in the human language, niveau d’accessibilité AA.
- Unusual Words, niveau d'accessibilité AAA
- Providing the expansion or explanation of an abbreviation, niveau d'accessibilité AAA
- Identifying the purpose of a link using link text combined with its enclosing list item, Identifying the purpose of a link using link text combined with its enclosing paragraph, Identifying the purpose of a link using link text combined with its enclosing table cell and associated table headings, Identifying the purpose of a link using link text combined with the preceding heading element, Identifying the purpose of a link in a nested list using link text combined with the parent list item under which the list is nested, niveau d'accessibilité A
- Identifying the purpose of a link using link text combined with the text of the enclosing sentence, niveau d'accessibilité A ; Providing link text that describes the purpose of a link, niveau d'accessibilité AAA
- Ensuring that additional visual cues are available when text color differences are used to convey information, niveau d'accessibilité A
- Technique G96:Providing textual identification of items that otherwise rely only on sensory information to be understood
- Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text, niveau d'accessibilité AA.
- Using ol, ul and dl for lists, niveau d'accessibilité A
- Using the scope attribute to associate header cells and data cells in data tables, niveau d'accessibilité A.
- Using caption elements to associate data table captions with data tables, niveau d'accessibilité A.
- Using id and headers attributes to associate data cells with header cells in data tables, niveau d'accessibilité A
- Failure of Success Criterion 1.3.1 due to using th elements, caption elements, or non-empty summary attributes in layout tables, niveau d'accessibilité A
- Failure of Success Criterion 1.3.2 due to using an HTML layout table that does not make sense when linearized, niveau d'accessibilité A
- G115: Using semantic elements to mark up structure, niveau d'accessibilité A
- Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content et Providing long description for non-text content that serves the same purpose and presents the same information niveau d'accessibilité A.
- G74: Providing a long description in text near the non-text content, with a reference to the location of the long description in the short description, niveau d'accessibilité A.
- Using null alt text and no title attribute on img elements for images that AT should ignore, niveau d'accessibilité A
- Using CSS to include decorative images, niveau d'accessibilité A
- Failure of Success Criterion 1.3.2 due to changing the meaning of content by positioning information with CSS, niveau d'accessibilité A
- Setting animated gif images to stop blinking after n cycles (within 5 seconds), niveau d'accessibilité A
- Allowing the content to be paused and restarted from where it was paused, niveau d'accessibilité A
- Providing an alternative for time based media, niveau d'accessibilité A
- Providing an alternative for time-based media for audio-only content, niveau d'accessibilité A
- Failure of Success Criterion 1.3.2 due to changing the meaning of content by positioning information with CSS, niveau d'accessibilité A
- Providing keyboard-triggered event handlers, niveau d'accessibilité A
- F42: Failure of Success Criterion 1.3.1 and 2.1.1 due to using scripting events to emulate links in a way that is not programmatically determinable et Making actions keyboard accessible by using the onclick event of anchors and buttons
- Failure of Success Criterion 2.2.1 due to using server-side techniques to automatically redirect pages after a time-out et Failure of Success Criterion 3.2.5 due to complete change of main content through an automatic update that the user cannot disable from within the content, niveau d'accessibilité AAA