18008 sujets
Questions générales et questions de débutants
ON ne peut pas, sauf si on ajoute les numéros de ligne directement dans le texte, et c'est une mauvaise idée pour au moins trois raisons :
1 - Accessibilité: les lecteurs d'écran liraient le numéro de la ligne à chaque ligne. C'est pas terrible, surtout pour du code.
2 - Copier-coller: on copierait le texte avec les numéros de ligne. Pas fameux, non ?
3 - Mise en page: c'est à mon avis plutôt difficile d'aligner correctement les numéros de ligne avec le texte
En fait, du point de vue accessibilité, les numéros de ligne sont plutôt problématiques.
On a en gros deux approches pour ajouter des numéros de ligne à un bout de code ou de texte :
1 - Soit on ajoute les numéros de ligne au début de chaque ligne
2 - Soit on ajoute tous les numéros de ligne dans un élément séparé
Rapidement, ça donne ça :
1°
Versus :
2°
Le problème, c'est qu'aucune des deux n'est vraiment satisfaisante !
Problèmes de la version n°1 :
a) Accessibilité: les lecteurs d'écran lisent le numéro de ligne avant chaque ligne... plutôt gênant même quand on a l'habitude de lire du code, voire même carrément énervant à la longue
b) Copier-coller: les fonctionnalités natives du navigateur en la matière ne font pas le travail attendu puisqu'ils copient le code avec les numéros de ligne; il faut user de subterfuges javascript pour proposer une fonctionnalité de copie. Cette fonctionnnalité personnalisée peut ne pas être compatible, ni accessible, ou ne pas être très pratique à côté de la sélection classique dont on a l'habitude
Problèmes de la version n°2 :
a) Accessibilité et intérêt: puisque nous autres utilisateurs de lecteurs d'écran lisont les contenus linéairement, les numéros de ligne ainsi présentés n'ont absolument plus aucun intérêt car ils sont lus à la suite, puis tout le code (pour l'exemple: "1 2 3 4 5 dièse include etc."). Pour 10 lignes ce n'est pas encore trop grave, mais pour des codes de plusieurs centaines de lignes, c'est autant de temps perdu à atteindre le vrai code
b) Je me doute bien que l'alignement vertical ne doit pas être facile, encore moins que l'alignement horizontal dans la version n°1.
Suggestion et conclusion :
a) Puisque de toute manière les numéros de ligne sont plutôt nuisibles qu'utiles pour les lecteurs d'écran et ce dans les deux situations que j'imagine (honnêtement je n'en vois pas d'autre), si vous voulez les garder tous, autant les ôter immédiatement.
Petite astuce: aria-hidden="true" peut être utile pour qu'un contenu soit rendu visuellement mais ignoré par les lecteurs d'écran. A ne pas confondre avec role="presentation" qui ne fait que supprimer le rôle par défaut d'un élément qui avait à la base un autre rôle, p.ex. <h1 role="presentation"> supprime le titre de la liste des titres et est sauté dans la navigation de titre en titre (comme vous voyez, ça n'a rien à voir).
b) Si vous avez besoin de numéros de ligne pour référence, n'indiquez que ceux-là précisément (p.ex. pour des commentaires d'explication du genre "à la ligne 12 on fait ceci"); et limitez-vous au pire à une numérotation de 10 en 10. Le top si vous pouvez, au lieu de numéroter les lignes de manière apparente (utilisez l'astuce A), faites un lien avec une ancre (p.ex. "A la <a href="#l12">ligne 12</a> on fait ceci"). Un clic sur le lien lit immédiatement l'endroit qui nous intéresse.
Voilà ! J'espère que ça pourra vous aider. Personnellement, quelque soit leur disposition, les numéros de ligne m'énervent toujours et ne me sont absolument d'aucune utilité, même dans un code de 100 lignes et plus (si j'ai besoin d'un tel code, je le colle dans un éditeur de texte et à partir de là, je fais comme j'ai l'habitude car c'est vraiment prévue pour ça). Tout ça pour conclure que les numéros de ligne sont un artifice de pure présentation qui ne devrait rien avoir à faire dans le contenu.
Modifié par QuentinC (25 Aug 2013 - 21:30)
1 - Accessibilité: les lecteurs d'écran liraient le numéro de la ligne à chaque ligne. C'est pas terrible, surtout pour du code.
2 - Copier-coller: on copierait le texte avec les numéros de ligne. Pas fameux, non ?
3 - Mise en page: c'est à mon avis plutôt difficile d'aligner correctement les numéros de ligne avec le texte
En fait, du point de vue accessibilité, les numéros de ligne sont plutôt problématiques.
On a en gros deux approches pour ajouter des numéros de ligne à un bout de code ou de texte :
1 - Soit on ajoute les numéros de ligne au début de chaque ligne
2 - Soit on ajoute tous les numéros de ligne dans un élément séparé
Rapidement, ça donne ça :
1°
<pre><code>
<span>1</span> #include<stdio.h><br />
<span>2</span> int main (void) {<br />
<span>3</span> printf("Hello, world !");<br />
<span>4</span> return 0;<br />
<span>5</span> }<br />
</code></pre>
Versus :
2°
<div>
1<br />
2 <br />
3 <br />
4 <br />
5<br />
</div>
<pre><code>
#include<stdio.h><br />
int main (void) {<br />
printf("Hello, world !");<br />
return 0;<br />
}<br />
</code></pre>
Le problème, c'est qu'aucune des deux n'est vraiment satisfaisante !
Problèmes de la version n°1 :
a) Accessibilité: les lecteurs d'écran lisent le numéro de ligne avant chaque ligne... plutôt gênant même quand on a l'habitude de lire du code, voire même carrément énervant à la longue
b) Copier-coller: les fonctionnalités natives du navigateur en la matière ne font pas le travail attendu puisqu'ils copient le code avec les numéros de ligne; il faut user de subterfuges javascript pour proposer une fonctionnalité de copie. Cette fonctionnnalité personnalisée peut ne pas être compatible, ni accessible, ou ne pas être très pratique à côté de la sélection classique dont on a l'habitude
Problèmes de la version n°2 :
a) Accessibilité et intérêt: puisque nous autres utilisateurs de lecteurs d'écran lisont les contenus linéairement, les numéros de ligne ainsi présentés n'ont absolument plus aucun intérêt car ils sont lus à la suite, puis tout le code (pour l'exemple: "1 2 3 4 5 dièse include etc."). Pour 10 lignes ce n'est pas encore trop grave, mais pour des codes de plusieurs centaines de lignes, c'est autant de temps perdu à atteindre le vrai code
b) Je me doute bien que l'alignement vertical ne doit pas être facile, encore moins que l'alignement horizontal dans la version n°1.
Suggestion et conclusion :
a) Puisque de toute manière les numéros de ligne sont plutôt nuisibles qu'utiles pour les lecteurs d'écran et ce dans les deux situations que j'imagine (honnêtement je n'en vois pas d'autre), si vous voulez les garder tous, autant les ôter immédiatement.
Petite astuce: aria-hidden="true" peut être utile pour qu'un contenu soit rendu visuellement mais ignoré par les lecteurs d'écran. A ne pas confondre avec role="presentation" qui ne fait que supprimer le rôle par défaut d'un élément qui avait à la base un autre rôle, p.ex. <h1 role="presentation"> supprime le titre de la liste des titres et est sauté dans la navigation de titre en titre (comme vous voyez, ça n'a rien à voir).
b) Si vous avez besoin de numéros de ligne pour référence, n'indiquez que ceux-là précisément (p.ex. pour des commentaires d'explication du genre "à la ligne 12 on fait ceci"); et limitez-vous au pire à une numérotation de 10 en 10. Le top si vous pouvez, au lieu de numéroter les lignes de manière apparente (utilisez l'astuce A), faites un lien avec une ancre (p.ex. "A la <a href="#l12">ligne 12</a> on fait ceci"). Un clic sur le lien lit immédiatement l'endroit qui nous intéresse.
Voilà ! J'espère que ça pourra vous aider. Personnellement, quelque soit leur disposition, les numéros de ligne m'énervent toujours et ne me sont absolument d'aucune utilité, même dans un code de 100 lignes et plus (si j'ai besoin d'un tel code, je le colle dans un éditeur de texte et à partir de là, je fais comme j'ai l'habitude car c'est vraiment prévue pour ça). Tout ça pour conclure que les numéros de ligne sont un artifice de pure présentation qui ne devrait rien avoir à faire dans le contenu.
Modifié par QuentinC (25 Aug 2013 - 21:30)
Euh, au tant pour la coloration syntaxique, je m'en douté et je comprends bien pourquoi, au tant là je suis moins d'accord.
Bon déjà pour répondre à tes différents points :
1- Pour le coup, l'accessibilité n'est pas importante sur ce projet car c'est une page perso.
2- Là je ne suis pas sûr mais à vérifier.
3- Ca marche très bien quand on sais faire
Je te donne le lien de JSON Lint qui l'utilise, j'ai pas pu y bosser aujourd'hui mais si j'ai pas mieux et que j'arrive à le mettre en place je reviendrais faire un feedback. Mais j'attends ton retour aussi.
http://jsonlint.com/
Bon déjà pour répondre à tes différents points :
1- Pour le coup, l'accessibilité n'est pas importante sur ce projet car c'est une page perso.
2- Là je ne suis pas sûr mais à vérifier.
3- Ca marche très bien quand on sais faire
Je te donne le lien de JSON Lint qui l'utilise, j'ai pas pu y bosser aujourd'hui mais si j'ai pas mieux et que j'arrive à le mettre en place je reviendrais faire un feedback. Mais j'attends ton retour aussi.
http://jsonlint.com/
Comme tu peux le voir, j'ai bien complété mon post initial.
Je suis peut-être trop idéaliste, mais ce que tu dis là sonne faux. L'accessibilité est toujours importante, que ce soit pour les petits autant que pour les gros sites.
IL n'y a rien de plus énervant que quelqu'un d'autre décide à ta place de ce que tu peux ou ne peux pas faire. Et ça, ça vaut autant dans la vraie vie que sur le web.
En plus, du point de vue pédagogique, ce n'est pas anodin de d'abord s'entraîner sur un site perso, pour par la suite faire les choses correctement sur des sites pro.
J'avais imaginé d'après ton premier message que tu voulais adopter quelque chose qui ressemblait plus à ma version n°1. Tu as choisi la version n°2, et effectivement celle-là n'a pas cet inconvénient.
Par contre en allant rapidement voir sur le site, j'ai effectivement le problème que j'évoque dans mon post édité: des numéros qui sont totalement inutiles, et qui sont déjà gênants même rien que pour 20. Si je te transcris ce que je « vois » avec mon lecteur d'écran, ça donne ceci :
En plus la zone d'édition n'a pas de label . . .
Modifié par QuentinC (25 Aug 2013 - 21:48)
a écrit :
1- Pour le coup, l'accessibilité n'est pas importante sur ce projet car c'est une page perso.
Je suis peut-être trop idéaliste, mais ce que tu dis là sonne faux. L'accessibilité est toujours importante, que ce soit pour les petits autant que pour les gros sites.
IL n'y a rien de plus énervant que quelqu'un d'autre décide à ta place de ce que tu peux ou ne peux pas faire. Et ça, ça vaut autant dans la vraie vie que sur le web.
En plus, du point de vue pédagogique, ce n'est pas anodin de d'abord s'entraîner sur un site perso, pour par la suite faire les choses correctement sur des sites pro.
a écrit :
2- Là je ne suis pas sûr mais à vérifier.
J'avais imaginé d'après ton premier message que tu voulais adopter quelque chose qui ressemblait plus à ma version n°1. Tu as choisi la version n°2, et effectivement celle-là n'a pas cet inconvénient.
Par contre en allant rapidement voir sur le site, j'ai effectivement le problème que j'évoque dans mon post édité: des numéros qui sont totalement inutiles, et qui sont déjà gênants même rien que pour 20. Si je te transcris ce que je « vois » avec mon lecteur d'écran, ça donne ceci :
a écrit :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Zone d'édition
Validate bouton
En plus la zone d'édition n'a pas de label . . .
Modifié par QuentinC (25 Aug 2013 - 21:48)
QuentinC a écrit :
Comme tu peux le voir, j'ai bien complété mon post initial.
Nos messages ce sont croisés.
a écrit :
Je suis peut-être trop idéaliste, mais ce que tu dis là sonne faux. L'accessibilité est toujours importante, que ce soit pour les petits autant que pour les gros sites.
IL n'y a rien de plus énervant que quelqu'un d'autre décide à ta place de ce que tu peux ou ne peux pas faire. Et ça, ça vaut autant dans la vraie vie que sur le web.
En plus, du point de vue pédagogique, ce n'est pas anodin de d'abord s'entraîner sur un site perso, pour par la suite faire les choses correctement sur des sites pro.
Non non, je t'assure que je tiens compte de l'accessibilité. La preuve, j'ai tenu compte de se que tu m'as dis sur le post pour les div masqué / affiché. Là quand je parle d'une page perso c'est vraiment perso puisque la page ne sera pas hébergé sur le net mais en local. Je suis pointilleux quand je développe une App ou un site, l'accessibilité est un point sur lequel je fais attention. Certes, je ne suis pas un spécialiste du sujet mais j'en tiens compte.
a écrit :
J'avais imaginé d'après ton premier message que tu voulais adopter quelque chose qui ressemblait plus à ma version n°1. Tu as choisi la version n°2, et effectivement celle-là n'a pas cet inconvénient.
Par contre en allant rapidement voir sur le site, j'ai effectivement le problème que j'évoque dans mon post édité: des numéros qui sont totalement inutiles, et qui sont déjà gênants même rien que pour 20. Si je te transcris ce que je « vois » avec mon lecteur d'écran, ça donne ceci :
Je n'ai rien choisi pour le moment. Le numéro de ligne à son importance car un message peut y faire référence. Si vraiment c'est trop compliqué ou contraignant je laisserais tomber.
Modifié par MagicCarpet (25 Aug 2013 - 23:34)
a écrit :
Là quand je parle d'une page perso c'est vraiment perso puisque la page ne sera pas hébergé sur le net mais en local.
Ah, dans ce cas, effectivement, ça ne regarde que toi...
a écrit :
Je n'ai rien choisi pour le moment.
Ton exemple appartient nécessairement à un des deux grands cas schématiques que j'ai présenté, en tout cas c'est comme ça que je vois les choses; à moins qu'il y en ait un troisième auquel je n'ai pas pensé
ON peut pinailler sur le terme de « choix » puisque ce n'est pas effectivement conscient ou volontaire. Toujours est-il que je range quand même ta page dans ma catégorie n°2.
a écrit :
Le numéro de ligne à son importance car un message peut y faire référence.
Si c'est au final pour faire un validateur genre celui du W3C, on a probablement accès au code qu'on demande à valider séparément dans son éditeur, donc les numéros de ligne sont totalement inutiles pour un lecteur d'écran. JE relèguerais ça à CSS uniquement, ou alors en appliquant l'astuce aria-hidden="true", qui ne se justifie pas souvent mais qui se justifierait bien ici.