Aide:Scope : Différence entre versions

De WikiGenWeb
Aller à : navigation, rechercher
m (Page créée avec « {{Palette aide}} {{PAGENAME}} »)
 
m
 
(4 révisions intermédiaires par le même utilisateur non affichées)
Ligne 1 : Ligne 1 :
 +
Les en-têtes permettent aux lecteurs d’écran utilisés par les '''internautes malvoyants''' de restituer la structure logique d’un tableau : les informations données par les cellules d’en-tête pourront être rappelées par le logiciel lorsque l’utilisateur se déplace dans le reste du tableau, afin qu’il puisse comprendre la signification des différentes données. Mais pour cela, il est <strong>indispensable</strong> que leur attribut <code>scope</code> soit présent : seul celui-ci permet au lecteur de différencier un en-tête de ligne (<code>scope="row"</code>) et un en-tête de colonne (<code>scope="col"</code>).
 +
 +
 +
Pour créer des en-têtes en syntaxe Wiki, on utilise le point d’exclamation à la place de la barre verticale :
 +
<span style="font-weight:bold;color:red">!</span> ''titre2'' <span style="font-weight:bold;color:red">!!</span> ''titre3''
 +
Avec l'attribut scope (attention : le séparateur entre attributs et contenu d’une cellule reste la barre verticale) :
 +
<span style="font-weight:bold;color:red">!scope="col" ''attributs''|</span> ''titre1''
 +
<span style="font-weight:bold;color:red">!scope="col" ''attributs''|</span> ''titre2''
 +
<span style="font-weight:bold;color:red">!scope="col" ''attributs''|</span> ''titre3''
 +
Ou à l’horizontale :
 +
<span style="font-weight:bold;color:red">!scope="col" ''attributs''|</span> ''titre1'' <span style="font-weight:bold;color:red">!!scope="col" ''attributs''|</span> ''titre2'' <span style="font-weight:bold;color:red">!!scope="col" ''attributs''|</span> ''titre3''
 +
Si la première rangée doit être interprétée comme une rangée d’en-tête :
 +
{| class="wikitable-center"
 +
|-
 +
!scope="col" style="background:#E0E0FF;"| Résultat affiché   
 +
!scope="col" style="background:#E0E0FF;"| Codage Wiki   
 +
!scope="col" style="background:#E0E0FF;"| Codage HTML   
 +
|-
 +
|<!-- Résultat affiché -->
 +
{|class="wikitable-center"
 +
|-
 +
!scope="col"| Titre 1
 +
!scope="col"| Titre 2
 +
|-
 +
| cellule 1
 +
| cellule 2
 +
|}
 +
|<!-- Codage Wiki -->
 +
<nowiki>{|</nowiki> class="wikitable-center"
 +
<nowiki>|</nowiki>-
 +
<span style="font-weight:bold;color:red"><nowiki>!</nowiki>scope="col"<nowiki>|</nowiki></span> Titre 1
 +
<span style="font-weight:bold;color:red"><nowiki>!</nowiki>scope="col"<nowiki>|</nowiki></span> Titre 2
 +
<nowiki>|</nowiki>-
 +
<nowiki>|</nowiki> cellule 1 <nowiki>||</nowiki> cellule 2
 +
<nowiki>|}</nowiki>
 +
|<!-- codage HTML -->
 +
<pre>
 +
<table class="wikitable-center">
 +
  <tr>     
 +
  <th scope="col">Titre 1</th>     
 +
  <th scope="col">Titre 2</th>     
 +
  </tr>     
 +
  <tr>     
 +
  <td>cellule 1</td>     
 +
  <td>cellule 2</td>     
 +
  </tr>     
 +
</table>
 +
</pre>
 +
|}
 +
Attention, pour faire des en-têtes de rangées, il n’est pas possible d’utiliser la seule forme horizontale du code Wiki. Sinon, le style d’en-tête se propage sur toutes les cellules mentionnées dans la même ligne :
 +
{| class="wikitable-center"
 +
|-
 +
!scope="col" style="background:#E0E0FF;"| Résultat affiché
 +
!scope="col" style="background:#E0E0FF;"| Codage Wiki
 +
!scope="col" style="background:#E0E0FF;"| Codage HTML
 +
|-
 +
|<!-- Résultat affiché -->
 +
{|class="wikitable-center"
 +
|-
 +
!scope="row"| Titre ligne || Cellule 1
 +
|}
 +
|<!-- Codage Wiki -->
 +
<nowiki>{|</nowiki> class="wikitable-center"
 +
<nowiki>|</nowiki>-
 +
<span style="font-weight:bold;color:red">!scope="row"|</span> Titre ligne <span style="font-weight:bold;color:red">||</span> Cellule 1
 +
<nowiki>|}</nowiki>
 +
|<!-- codage HTML -->
 +
<pre>
 +
<table class="wikitable-center"
 +
  <tr>     
 +
  <th scope="row">Titre ligne</th><th>Cellule 1</th>     
 +
  </tr>     
 +
</table>
 +
</pre>
 +
|-
 +
|<!-- Résultat affiché -->
 +
{|class="wikitable-center"
 +
|-
 +
!scope="row"| Titre ligne
 +
| Cellule 1
 +
|}
 +
|<!-- Codage Wiki -->
 +
<nowiki>{|</nowiki> class="wikitable-center"
 +
<nowiki>|</nowiki>-
 +
<span style="font-weight:bold;color:red"><nowiki>!</nowiki>scope="row"<nowiki>|</nowiki></span> Titre ligne
 +
<span style="font-weight:bold;color:red"><nowiki>|</nowiki></span> Cellule 1
 +
<nowiki>|}</nowiki>
 +
|<!-- Codage HTML -->
 +
<pre>
 +
<table class="wikitable-center">
 +
  <tr>
 +
  <th scope="row">Titre ligne</th><td>Cellule 1</td>     
 +
  </tr>
 +
</table>
 +
</pre>
 +
|}
 +
Dans le cas de tableaux complexes comportant des en-têtes qui ne s’appliquent pas à la totalité d’une rangée ou d’une colonne, l’attribut <code>scope=</code> doit être remplacé par la combinaison des attributs <code>id=""</code> (dans les cellules d’entête) et <code>headers=""</code> (dans les cellules de données). Voir à ce sujet [[wikipedia.fr:Wikipédia:Atelier accessibilité|Wikipédia:Atelier accessibilité]].
 +
 +
 +
== Voir aussi ==
 +
* [[Aide:Tableau pour débutant|Tableau pour débutant]] pour découvrir comment on crée un tableau
 +
* [[Aide:Tableau pour initiés|Tableau pour initiés]] pour comprendre comment on crée un tableau
 +
* [[Aide:Tableau pour expert|Tableau pour expert]] Toutes les fonctions possibles « pas à pas ».
 +
* [[Aide:Feuilles de style|Feuilles de style]]
 +
 +
==Articles connexes==
 +
* [[Aide:Tableau|Tableau]]
 +
  
 
{{Palette aide}}
 
{{Palette aide}}
 
[[Catégorie:Aide|{{PAGENAME}}]]
 
[[Catégorie:Aide|{{PAGENAME}}]]
 +
 +
{{w3c}}

Version actuelle en date du 1 mars 2011 à 09:45

Les en-têtes permettent aux lecteurs d’écran utilisés par les internautes malvoyants de restituer la structure logique d’un tableau : les informations données par les cellules d’en-tête pourront être rappelées par le logiciel lorsque l’utilisateur se déplace dans le reste du tableau, afin qu’il puisse comprendre la signification des différentes données. Mais pour cela, il est indispensable que leur attribut scope soit présent : seul celui-ci permet au lecteur de différencier un en-tête de ligne (scope="row") et un en-tête de colonne (scope="col").


Pour créer des en-têtes en syntaxe Wiki, on utilise le point d’exclamation à la place de la barre verticale : 

! titre2 !! titre3

Avec l'attribut scope (attention : le séparateur entre attributs et contenu d’une cellule reste la barre verticale) : 

!scope="col" attributs| titre1
!scope="col" attributs| titre2
!scope="col" attributs| titre3

Ou à l’horizontale : 

!scope="col" attributs| titre1 !!scope="col" attributs| titre2 !!scope="col" attributs| titre3

Si la première rangée doit être interprétée comme une rangée d’en-tête :

Résultat affiché Codage Wiki Codage HTML
Titre 1 Titre 2
cellule 1 cellule 2 
{| class="wikitable-center"
|-
!scope="col"| Titre 1
!scope="col"| Titre 2
|-
| cellule 1 || cellule 2
|}

 <table class="wikitable-center">
  <tr>       
  <th scope="col">Titre 1</th>       
  <th scope="col">Titre 2</th>       
  </tr>       
  <tr>       
  <td>cellule 1</td>       
  <td>cellule 2</td>       
  </tr>       
 </table>

Attention, pour faire des en-têtes de rangées, il n’est pas possible d’utiliser la seule forme horizontale du code Wiki. Sinon, le style d’en-tête se propage sur toutes les cellules mentionnées dans la même ligne :

Résultat affiché Codage Wiki Codage HTML
Titre ligne Cellule 1 
{| class="wikitable-center"
|-
!scope="row"| Titre ligne || Cellule 1
|}

 <table class="wikitable-center"
  <tr>       
  <th scope="row">Titre ligne</th><th>Cellule 1</th>       
  </tr>       
 </table>
Titre ligne Cellule 1 
{| class="wikitable-center"
|-
!scope="row"| Titre ligne
| Cellule 1
|}

 <table class="wikitable-center">
  <tr>
  <th scope="row">Titre ligne</th><td>Cellule 1</td>       
  </tr>
 </table>

Dans le cas de tableaux complexes comportant des en-têtes qui ne s’appliquent pas à la totalité d’une rangée ou d’une colonne, l’attribut scope= doit être remplacé par la combinaison des attributs id="" (dans les cellules d’entête) et headers="" (dans les cellules de données). Voir à ce sujet Wikipédia:Atelier accessibilité.


Voir aussi

Articles connexes




Wiki.png
Liste des manuels d'utilisation
Projet:Aide
Lecteurs Manuel du lecteur Wiki.png
Éditeurs Manuel de l'éditeur
Administrateurs Manuel de l'administrateur
 
Valid-xhtml10.png
Récupérée de « https://www.francegenweb.com:80/wiki/index.php?title=Aide:Scope&oldid=5018 »