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 ?.

• 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).

=== titre ===
;Sous titre
:Contenu

=== titre ===
==== sous-titre ====
Contenu

=== titre ===
<h4 style="font-size:1em;border:0">sous-titre</h4>
Contenu

=== titre ===
'''Sous-titre''' Contenu

• 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).

• 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.

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}}

• 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]}.

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…

• 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.

Population : 100 habitants
(<span style="color:#00cc33; font-size:11pt">▲</span>)

Population : 100 habitants
([[Fichier:Increase.svg|11px|alt=Augmentation|link=]])

• priorité : élevée
• difficulté : moyenne

L'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.

<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.
• 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.

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
• 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.

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]])...

• 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) » ;
• 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 les modèles {{abréviation}} ou {{abréviation discrète}} : WCAG ou WCAG ;
• 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.

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.

• 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.

<span title="en anglais">(en)</span>

({{Info|en|en anglais}})

(en anglais)

({{abréviation|en|en anglais}})

• 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).

[[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]

• 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.

[http://example.org/foo.pdf Titre du document]

{{pdf}} [http://example.org/foo.pdf Titre du document]

[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]

* [http://www.w3.org/TR/WAI-WEBCONTENT/
          {{langue|en|Web Content Accessibility Guidelines 1.0}}]

Exemple 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.

[[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]]

[[Fichier:Metro-M.svg|16x16px|alt=Métro de Paris|link=Métro de Paris]]

Voir aussi plus bas : Alternative des images illustratives.

• 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.

<td style="background-color: yellow>&nbsp;</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 ….

• 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]}

La société <span style="color: #FCB415">Renault</span>

La société Renault

<div style="color: #fff;background:#ff8080;font-weight:bold;text-align: center;">
Pokemon
</div>

<div style="text-align: center;">
'''Pokémon'''
</div>

• 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.

- 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]]
}}

• 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.

;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.

;Titre de la section
Contenu de la section

: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}}

• 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.

* 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

On distingue :

1. Les tableaux de données, pour lesquels les titres de colonnes et de lignes sont indispensables à la compréhension des données du contenu ;
2. Les tableaux de mise en forme, qui doivent être linéaires et dépourvus de structure comme les titres de colonnes et de lignes ;
3. Les cas spéciaux, comme les tableaux triables, les tableaux-fiches (type infobox, taxobox, modbox...) ou encore les tableaux-palettes de navigation.

Les 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.

• 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.

{|
|
| '''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 :

{| 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 :

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.

• 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ête id="foo1".

En effet, dans ce cas, chaque cellule doit être individuellement rattachée à l'en-tête de son bloc^{[WCAG-TECH 18]}.

Cette syntaxe peut se combiner avec l'utilisation de scope pour d'autres en-têtes ne posant ce problème :

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.

• 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]}.

{|
! 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
|}

• 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="".

Les modèles d'infobox V3 offrent une base permettant la création de modèles d'infobox accessibles.

Cette section est vide, insuffisamment détaillée ou incomplète. Votre aide est la bienvenue ! Comment faire ?

L'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.

Les images peuvent être inaccessibles à certains utilisateurs pour diverses raisons (désactivation des images, lecture hors connexion, handicaps visuels, etc.).

L'attribut « alt » est obligatoire pour l'accessibilité et le standard HTML, toutefois son contenu dépend du type d'image et du contexte^[4]. Les images peuvent être de trois types^{[5][réf. non conforme]} :

• fonctionnelle : l'image est cliquable ou interagit avec l'utilisateur. Sur Wikipédia, c'est toujours le cas des images consultées en ligne (par un lien vers Wikimedia Commons) ;
• informative : l'image est nécessaire pour communiquer brièvement un concept ou une information. Une alternative textuelle est nécessaire ;
• décorative : l'image n'ajoute pas d'information nouvelle par rapport au texte, elle illustre uniquement ce qui est déjà expliqué. L'alternative textuelle est remplie en indiquant qu'elle est vide (<!-- Image décorative -->).

Toutes les images de Wikipédia sont fonctionnelles puisqu'elles renvoient vers Commons. Toutefois, certaines images ont pour but de rediriger vers une autre adresse (paramètre link=) lors du clic. Par exemple, dans les infobox, le logo d'information () renvoie vers la documentation de l'infobox et une page protégée sera indiquée par un cadenas rouge (), qui renvoie vers Catégorie:Page non modifiable.

Lorsqu'une image fonctionnelle véhicule une idée ou une information, l'alternative doit correspondre au sens de l'image, sauf si l'information est jugée inutile (l'image est alors décorative). Par exemple :

• le logo d'information signifie « Pour information », l'alternative textuelle devrait être « Pour information, consultez [...] » ;
• le cadenas rouge signifie « Page protégée », l'alternative textuelle peut soit renvoyer aux autres pages protégées (« Voir les autres pages protégées sur [...] »), soit être considérée comme décorative (alt=<!-- Image décorative -->).

Une 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 n'est 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.

• 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.

[[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.]]

• 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]}.

[[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.]]

• 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]}.

[[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]].]]

[[Fichier:DBP 1973 780 Otto Wels.jpg|vignette
|alt=Description du timbre postal représentant Otto Wels
|Timbre à l'effigie d'[[Otto Wels]].]]

[[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.]]

[[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}}]]

Portail de la tour Eiffel

France

• 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.

[[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>

.bandeau.icone1 {
background: url(...icone1.png) no-repeat left center;
padding-left: ...px;
}

L'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^[6].

Un lecteur d'écran, ou une synthèse vocale, lira le texte de la page de manière linéaire. Il est conseillé de ne pas introduire une page par un fichier, il faut laisser l'utilisateur avoir les premières informations du résumé introductif, surtout si l'image est décorative.

• 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]}.

Exemple de combinaison d'images via CSS, non accessible

Rendu espéré	Rendu sans CSS ou avec couleurs désactivées dans un navigateur graphique	Transcription du rendu dans un lecteur d'écran	Contenu réel publié
		« Lien graphique Voir la carte administrative »	« Voir la carte administrative »

• 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.

• 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.

<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>

<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>

• 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.

L'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.

• 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).

« La légende de graphique », exemple de pseudo-contenu CSS et de rendus non accessibles

Rendu espéré	Rendu sans CSS dans un navigateur graphique
Légende : Nicolas Sarkozy Ségolène Royal François Bayrou Jean-Marie Le Pen Olivier Besancenot Philippe de Villiers Marie-George Buffet Dominique Voynet Arlette Laguiller José Bové Frédéric Nihous Gérard Schivardi	Légende : Nicolas Sarkozy Ségolène Royal François Bayrou Jean-Marie Le Pen Olivier Besancenot Philippe de Villiers Marie-George Buffet Dominique Voynet Arlette Laguiller José Bové Frédéric Nihous Gérard Schivardi

« Le maillot », exemple de pseudo-contenu CSS et de rendus non accessibles

Rendu espéré	Rendu sans CSS dans un navigateur graphique	Rendu avec CSS par défaut	Transcription du rendu dans un lecteur d'écran	Contenu réel publié
De 1970 à 1973	De 1970 à 1973	De 1970 à 1973	« Lien graphique Team colour Lien graphique Team colour Lien graphique Team colour Lien graphique Team colour Lien graphique Team colour De 1970 à 1973 »	« Team colour Team colour Team colour Team colour Team colour De 1970 à 1973 »

Javascript 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.

• 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]}.

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';

• 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 type submit, reset, image, button, radio et checkbox
• button
• area

<span >
    Lorem ipsum
</span>

<a href="#" >
    Lorem ipsum
</a>

<img src="bouton.gif" alt="Lorem ipsum"  />

<a href="#" >
    <img src="bouton.gif" alt="Lorem ipsum" />
</a>

• 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.

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 :

• Wikipédia:Articles de qualité/Accessibilité