Discussion :

[laurentSc]

Bonsoir,

de nombreux utilisateurs de mon site sont mal ou non-voyants donc son accessibilité est importante.
Voici ce que j'ai fait :
- j'ai utilisé le code de jreaux62 permettant aux malvoyants de grossir l'affichage du texte (et ce sur chaque page de mon site) ; (même si ces derniers utilisent en général des logiciels permettant de grossir l'affichage, fournir cette fonctionnalité est un plus ) ;

- j'ai déplacé tous les liens vers les partenaires dans le footer afin que les lecteurs d'écran accèdent immédiatement au menu ;

- j'ai simplifié celui-ci :
- déplacement de certains liens dans le footer (adhésion, nous écrire, partenaires)

- j'en ai réduit le nombre de niveaux (1 ou 2) sauf pour les 2 rubriques qui ne concernent pas ceux qui voient mal ou pas du tout (photos et vidéos)

- concernant ces 2 rubriques, au lieu de mettre dans les sous-menus des liens vers différentes archives, j'ai créé pour chaque rubrique une page "archives" qui contient une liste déroulante permettant de sélectionner l'année souhaitée à afficher.

Que pensez-vous de l'accessibilité du site ? (http://vercorshandisport.org/)

[Invité]

Bonjour Laurent,

pour commencer, j'ai de très bons amis handicapés, dont un développeur web aveugle, pour qui j'ai réalisé le design (aspect graphique) de quelques-uns de ses sites (DVRGV).
Ceci étant dit...

1- Manifestement, Laurent, tu t'es dit que ce n'était pas la peine de réaliser un quelconque design pour ton site : TOUT EST EN VRAC !!
Tous les handicapés (concernés par ton site) NE SONT PAS aveugles !
Ton site ne ressemble à rien !!
Voilà pour l'aspect VISUEL.


2- Ton code HTML est mal construit. Là encore, TOUT EST EN VRAC.
C'est n'importe quoi.
Les balises HTML5 (<section>, <nav>,...) sont mises n'importe où, sans vraiment prendre en compte leur sémantique.


3- Parlons ergonomie...

3.1- C'est justement une structure HTML sémantique correcte qui permettra une circulation fluide dans dans site, même avec un logiciel d'aide à la lecture.

3.2- Le MENU : Avant d'accéder à l'onglet "Espace adhérent", il faut se farcir TOOOOOOOOOOOOOOOOOOOOUT le reste du menu (y compris les sous-menus, sous-sous-menus, sous-sous-sous-menus....) !
sous-menus, sous-sous-menus, sous-sous-sous-menus : là encore, c'est n'importe quoi.

Il est préférable d'avoir :

• un menu principal SIMPLE
• et, dans la page, un menu secondaire (avec soit des liens vers d'autres pages, soit des ancres vers des sections de la page)
• pour des archives : soit des liens (avec l'année) ou une liste déroulante des années, ou... (en fonction du tri à faire)

3.3- Il faut concevoir le menu avec LOGIQUE.
tu dois te demander (et SAVOIR) :

• quels sont les onglets (du menu) qui nécessitent un accès DIRECT, RAPIDE (ceux qui seront le plus cliqués) : on doit les mettre en premier !
• quelles sont les sections les plus importantes, et celles "secondaires" (comme la liste des partenaires, judicieusement mise en bas du site).

4- Concernant les photos et vidéos.

4.1- Ne va pas imaginer que les non et mal-voyants ne s'y intéressent pas !
PAR CONTRE, il faut soigner le descriptif de chaque photo / vidéo : expliquer avec des mots ce qui s'y passe, qui s'y trouve,...

4.2- onglets "Photos" et "Vidéos" du menu :

• les sous-menu sont INUTILES : il suffit D'UNE SEULE PAGE, qui affiche les vidéos/photos de l'ANNEE CHOISIE.
• Mais les sous-sous-menus.... sont ridicules et surtout : INUTILES !!
  C'est RIDICULE d'avoir UNE page pour UNE vidéos ou UNE galerie-photo.

Il faut donc :

• REGROUPER !!
• Mettre des TITRES, des commentaires,...
• Une liste déroulante OU des liens pour pouvoir CHANGER d'année (et accéder aux archives).

INSPIRE-TOI de cet exemple (clique sur le bouton "Recherhe / Archives").
Tu remarqueras aussi le système de pagination, et dans la barre d'adresse : ...?an=2018&pg=2#mainContent

Ou encore de cette galerie-photos :
Avec une seule page, on peut afficher toutes les galeries, une par une, avec une liste déroulante pour choisir.


5- Circulons un peu dans les pages...

5.1- "trombinoscope" : les balises <img /> sont censée avoir un attribut alt !
Totalement absent ici.
Et accessoirement : avoir les noms sans indiquer la fonction de chacun n'a pas grand intérêt, si ? (quelle est la fonction de "Laurent Schmitt", là dedans ? )

5.2- "Bureau" - "Commissions" : là, c'est le pompon !
On a juste une image !
Comme dirait Coluche : "Circulez, y'a rien à voir !"
Sauf que c'est le contraire : "Circulez les non-voyants : y'a même pas un bout de texte pour expliquer ce qui se passe sur cette page !"

Bon. Je ne vais pas toutes les faire, c'est déprimant.

5-3 Mais rien que pour l'onglet "le club", il n'y a PAS BESOIN de sous-menu :

• TOUT peut tenir dans UNE SEULE page
• Il suffit éventuellement d'un menu secondaire dans la page, avec des ANCRES pour circuler d'un article à l'autre.

CONCLUSION : NON, ton site n'est pas ergonomique. L'accessibilité (ou plutôt son manque) est catastrophique.
Les informations ne sont pas facilement accessibles (voire pas du tout).
Il n'est même pas beau ni correctement structuré.

LA PREMIERE CHOSE A FAIRE :

• écrire une structure HTML(5) correcte et sémantique. C'est le PLUS IMPORTANT.

ENSUITE :

• structurer / hiérarchiser les informations : mettre les plus importante en premier (dans le menu), et regrouper celles qui peuvent l'être (exemple du "club")
• SIMPLIFIER le MENU principal
• Ajouter dans les pages (si nécessaire) un "menu secondaire" (pour circuler au sein de la page, ou accéder à d'autres pages)

Sur ce.... As-tu passé de bonnes vacances ?
Parce que là (quand tu auras fini de pleurer... ) : y'a du boulot !!

[laurentSc]

Sur ce.... As-tu passé de bonnes vacances ?

Elles commencent ce soir !

y'a du boulot !!

Après t'avoir lu, OK. Quand les vacances seront passées...

[bourvil]

a oui , le site est tout en vrac.
Je suis tombee sur un site http://www.art-prime.com/ avec une sorte d'interface d'accessibilite.
peu etre que cela correspond a tes besoins
bonne vacances

[laurentSc]

Voici une parenthèse dans mes vacances mais je repars demain...

Cela dit, je suis très intéressé par vos commentaires, notamment ceux (détaillés avant la déprime) de jreaux62 (mais le 2e exemple dont je suis censé m'inspirer pour les photos/vidéos est un lien inexistant...)

Quand vous dites que tout est en vrac ou que le site ne ressemble à rien, pouvez-vous préciser ? Car, j'y suis tellement habitué que je ne remarque rien.

Enfin, Bourvil, j'ai bien vu qu'il y avait une aide à l'accessibilité avec le bonhomme dans le rond bleu par contre le + et le - à droite de la page ne semble rien apporter; sais-tu à quoi ça sert ?

[Invité]

Bonjour Laurent,

1- j'ai rétabli le lien


2- je t'ai expliqué quoi faire dans ma conclusion.

Le lien proposé par Bourvil est intéressant, mais ce n'est pas du tout la priorité pour toi (ni essentiel).
Oublie ça pour l'instant.


3- Montre le site a tes amis. Demande leur ce qu'ils en pensent.


Bonne vacances...