Accessibilité: problème de ponctuation persistante...

Bonjour,

J'ai moi un autre problème. Je prépare un site web sur un sujet médical.
Pour que ce site soit accessible, j'ai voulu mettre des accesskey sur mes liens de la façon suivante:

<div id="menu">
         <h2>Navigation</h2>
                  <ul>
                           <li><h3><a href="..." title="..." accesskey="0">blabla</a></h3></li>
                           <li><h3><a href="..." title="..." accesskey="1">blibli</a></h3></li>
                  </ul>
         <h2><a href="..." title="..." accesskey="2">bleble</a></h2>
         <h2><a href="..." title="..." accesskey="3">bloblo</a></h2>
         <h2><a href="..." title="..." accesskey="4">blublu</a></h2>
</div>

Or, j'ai pensé à nos amis non voyants, et aux navigateurs vocaux qui font de la synthèse vocale. J'ai voulu ajouté la ponctuation (avec des points-virgules entre les items du menus, et un point en dernier).

J'ai donc ajouté un :

<div id="menu">
         <h2>Navigation</h2>
                  <ul>
                           <li><h3><a href="..." title="..." accesskey="0">blabla<span> ;</span></a></h3></li>
                           <li><h3><a href="..." title="..." accesskey="1">blibli<span> ;</span></a></h3></li>
                  </ul>
         <h2><a href="..." title="..." accesskey="2">bleble<span> ;</span></a></h2>
         <h2><a href="..." title="..." accesskey="3">bloblo<span> ;</span></a></h2>
         <h2><a href="..." title="..." accesskey="4">blublu<span> ;</span></a></h2>
</div>

NB: dans le code que vous voyez, après la balise <span>, il y a une entité html " " (je ne mets pas volontairement ici le ";" de fin d'entité) qui donne l'impression d'un espace (et oui, en fait, c'est normal...).

Puis, dans la CSS, je pensais mettre tout simplement :

#menu h2 span {
         display: none;
}

#menu h3 span {
         display: none;
}

afin de ne pas montrer les caractères de ponctuation ";" et ".".

Mais rien n'y fait, j'ai beau essayé de sortir les span des balises a, j'ai beau changé et adapté ma CSS en fonction, je continue à voir ces ";" et "."!!

J'ai certainement loupé quelque chose de gros, mais je ne vois pas (la fatigue, halala....).

J'ai lu également l'article sur le fait de ne plus trop utiliser le

display: none;

pour cacher du contenu, mais je ne me suis encore penché à fond sur le sujet. Pour le moment, je souhaiterais faire quelque chose de simple (et cette façon de faire me semble une bonne solution le temps que je mette tout en place).

Donc si vous avez une idée, n'hésitez surtout pas à la partager avec moi !!

Merci par avance pour votre aide à tous!!!

En trois mots : page en ligne ?
Ça ira mieux ainsi...

Et sinon, l'utilisation des titres de section h2 me semble déplacée ici. S'il n'y a pas de section de contenu à introduire, à quoi bon utiliser un titre (à part pour dérouter l'utilisateur d'un lecteur d'écran, qui s'attendra à trouver un contenu après un titre...) ?

Non, malheureusement, elle n'est pas encore en ligne.

Ceci étant, j'utilise des div dans ma page:
- une div header
- une div conteneur, avec dedans:
- une div menu (que j'ai présentée plus haut)
- une div contenu
- une div footer.

Il s'agit d'une page php, avec switcher de style. Je sais pas si ça peut aider.

Ce qui m'étonne, c'est que j'avais déjà fais ça depuis mon site (vous avez le lien plus bas), avec mes items tout en haut.
Là, je fais la même chose, mais simplement, au lieu d'utiliser l'attribut class, j'utilise ici un id.

A quoi ça te sert d'avoir des liens en h3 ici ?
Avec un lecteur d'écran, ça donne quelque chose de lourd : il répète "titre de niveau 3" pour chaque lien alors que c'est inutile.

De plus, franchement, je ne vois pas l'utilité de tes signes de ponctuation, surtout si tu les caches avec display:none ce qui revient au même que de ne pas en avoir du tout.

QuentinC a écrit :
De plus, franchement, je ne vois pas l'utilité de tes signes de ponctuation, surtout si tu les caches avec display:none ce qui revient au même que de ne pas en avoir du tout.

C'est vrai que ça me parait peu utile. Les recommandations d'accessibilité conseillent l'utilisation d'un signe pour séparer une série de liens... quand les liens ne sont pas dans des éléments qui les séparent déjà. Si tu utilises une série de paragraphes (plutôt que de titres), ou une liste non ordonnée, pas besoin de signe de ponctuation (par contre, si tu veux en afficher, pas de contrindication).

Ok,

Merci pour vos réponses. C'est vrai, je ne m'étais pas posé ces questions de bon sens pourtant...
C'est le 1er site web que j'essaie de concevoir aux normes d'accessibilité (entre autres...)! Donc tout ne me vient pas encore naturellement...

a écrit :
C'est vrai que ça me parait peu utile. Les recommandations d'accessibilité conseillent l'utilisation d'un signe pour séparer une série de liens... quand les liens ne sont pas dans des éléments qui les séparent déjà. Si tu utilises une série de paragraphes (plutôt que de titres), ou une liste non ordonnée, pas besoin de signe de ponctuation (par contre, si tu veux en afficher, pas de contrindication).

Si j'ai bien compris, le mieux est de retirer tout simplement ces signes de ponctuation, qui sont effectivement déjà séparés par des <li> par exemple, c'est bien ça?


Merci pour votre aide à chacun !! Ca m'arrange en fait, il y a moins de boulot