Discussion :

[CoderInTheDark]

Bonjour,

J'ai constaté que la page d'accueil de "developpez.com" a changée.
Pour moi ça se traduit par une régression de l'accessibilité.

Avant il y avait des titres de niveaux 2 pour marquer les parties "A la une", "Actualités" et "publications".
Maintenant ce sont des graphiques, certes bien marqués avec un texte.
Mais les titres étaient bien pratiques pour naviguer.

De plus pour naviguer Il y a bien des zones de navigations pour marquer les menus et le pied de page, mais pas de zone pour marquer la zone principale.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<main role="main">
...</main>
...

Il n'y a pas de liens cachés "Aller au con tenu", "skip to content", et on peut envisager des liens vers les 3 rubriques que j'ai évoqué plus haut car elles sont les plus importantes de la page

, peut procéder ainsi avec le css
La zone sera invisible car trop petite pour être affichée par le navigateur, mais lu par les lecteur d'écrans

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

Cordialement

[Malick]

Salut,

En ce qui concerne les titres évoqués, je pense qu'ils apparaissent toujours.

Sinon il serait bien d'indiquer le navigateur utiliser pour permettre à l'équipe technique de voir c'est quoi le souci.

[Anomaly]

Bonjour CoderInTheDark,

C'est vrai qu'on ne pense pas toujours qu'il y a des non-voyants qui viennent sur Developpez.com.

J'avoue que je n'ai pas compris ton exemple de code CSS qui est visiblement endommagé vu qu'il commence par ": 0".

Peux-tu nous dire concrètement ce qu'il faudrait changer dans le code HTML pour que cela soit plus pratique pour toi s'il te plaît ? Merci d'avance.

[CoderInTheDark]

Bonjour,

L'idée du code CSS est de créer une zone invisible en haut de page, car trop petite pour être affichée par le navigateur., et d'y mettre des liens sur la page pour atteindre les zones principales de la page sans chercher.
Google le fait sur sa page de résultats de recherches Paradoxalement ce peut être mal vu par les moteurs d'indexations.
Ce sont des liens "aller au contenu", "skip to content".
Dans notre cas "aller a la rubrique à la une", "aller à la rubrique actualités", et "aller à la rubrique publication".
J'ai du pourrir le code car la touche 0 du pavé numérique en mode non verouillé sert de touche de racourçis pour mon lecteur d'écrans.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
blindZone {*** border: 0;
*** clip: rect(0 0 0 0);
*** height: 1px;
*** margin: -1px;
*** overflow: hidden;
*** padding: 0;
*** position: absolute;
*** width: 1px;
}

Je suis nul en CSS, car un non-voyant ne peut pas vérifier le résultat du CSS à l'écran.On a aucun retour pour avoir les informations mise en forme par le CSS.
Mais la logique me semble bonne.

Comme ça on tombe dessus directement , et on peut aller au contenu qui nous intéresse/

Vous avez utilisez des zones pour la navigation et le pied de pied de page.
Mais pas de zone pour le contenu principal de la page.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<main role="main">
…
</main>

On a une toucje pour naviguer de zone en zone, et la zone principale nous permet de nous repérer.

On peut utiliser les titres.
Il donne une hiérarchie au contenu.
On peut naviguer par titre et aussi par niveaux de titres.

C'est pour ça qu'avant c'était pratique quand les rubriques était des titres de niveaux 2.
La les rubriques sont marqués comme des graphiques et sont présentes plusieurs fois.

Je vais être occupé cette semaine, car je rédige une note de synthèse technique que je dois rendre lundi prochain

Si il faut en parler on peut remettre ça la semaine prochaine.?
Et j'ai toujours mon article sur le html accessible sous le coude

[CoderInTheDark]

Bonjour,

Je suis de retour


Les liens de "aller à" navigations permettent d'avoir des racourçis
Le but est de découper sémantiquement la page, avec les zone header main et footer, puis en ajoutant des titres marquer les différentes zones de la zone main.
Cordialement