Onepage et malvoyants

[Globe]

Bonjour à tous,

Je poste ce petit message pour avoir vos avis et conseils dans le cadre d'un projet personnel. Dans le cadre de la création d'un petit site vitrine j'aimerais utiliser le style onepage très en vogue depuis un an ou deux. Mon problème vient de la question de l'accessibilité aux malvoyants. Je m'explique :

J'ai donc un site qui utilise des ancres pour scroll le long du onepage. Si js est activé il supprime le href et utilise une animation, si js est désactivé il utilise alors un simple lien vers le contenu sans animation. Mes questions reposent sur la gestion du site par les liseuses d'écran pour ceux qui connaîtraient.
Utilisent-elle javascript ?
Gèrent-elle convenablement le saut vers du contenu sous la forme "page.html#contenu" ?
Peut-on segmenter la lecture d'une page avec la liseuse (lui dire de s'arrêter puis de reprendre) avec du code ?

Mes pages suivent un ordre plus ou moins chronologique et structuré, est-il donc rébarbatif pour un malvoyant de naviguer sur une page unique ?

Je m'adresse ici pour avoir vos avis de développeurs même si je vais poser ces mêmes questions à une association dès que j'en aurais l'occasion, il me semble d'ailleurs que kéké s'y connait pas mal de ce coté là.

Je ne cherche pas à trouver un workaround, l'idée de ce site est justement légèrement orienté dans le but de montrer ce qu'on peut faire en dégradation élégante et accessibilité numérique tout en respectant les tendances web du moment.

Merci de m'avoir lu

[keke]

Coucou,
Les malvoyants (très atteint) et aveugles utilisent globalement 2 types de méthode pour lire le web : une liseuse oral (principalement) ou une tablette braille (pour les plus initiés, vu le cout de ce machin !). Les autres malvoyants (les mieux lotis) peuvent s'en sortir avec une simple loupe (physique, ou via l'outil loupe de windows) , ou un système de lecture orale qui lit les paragraphes qui se trouve sous le clavier.

Utilisent-elle javascript ?

Ils activent ou non le javascript (pas de généralité à ce niveau). J'ai pris le parti sur Magdales de coder en JS pour les inscrits voyants, et un code sans JS pour les Déficient Visuel.

Gèrent-elle convenablement le saut vers du contenu sous la forme "page.html#contenu" ?

Oui (voir tout en haut de la page d'accueil de Magdales), sachant que en prime, ils utilisent : des hotkeys, des raccourcis pour passer de paragraphe à paragraphe, des raccourcis pour passer de liens en liens, des raccourcis pour passer de formulaire en formulaire (form ou input), des raccourcis pour passer de balise Hx à Hx (le système le plus utilisé d'après ce que j'ai repéré).

Mes pages suivent un ordre plus ou moins chronologique et structuré, est-il donc rébarbatif pour un malvoyant de naviguer sur une page unique ?

Est-ce rébarbatif ? Assurément. Est-ce que ca les gènes ? Moins que pour les valides, mais essaye de faire au mieux . Si tu mets des ancres, ça sera cependant le top.

J'espère avoir répondu (correctement) à toutes tes questions.

kéké
PS : et le meilleur moyen, c'est de faire ami-ami avec un copain testeur ^^. Parce que c'est pas toujours évidant de se poser les bonnes questions.

[Globe]

Je te remercie de ta réponse vachement complète. Je suis donc en train de structurer ma page autour d'une navigation à la tabulation et d'ancres placées de manière logique. J'ai l'adresse de plusieurs associations dans ma région que j'irais sans doute voir avec mes questions. J'ai également remplacé mes liens par des boutons afin d'assurer une meilleur accessibilité et une meilleure dégradation élégante.

Merci encore

Si ça intéresse les autres je connais également quelqu'un qui bosse sur un mémoire en droit sur l'accessibilité aux personnes atteintes de handicap et l'une des parties porte sur l’accessibilité web donc je pourrais partager ça ici si ça vous dis.

[keke]

Je suis preneur. Dans ce sujet, et comme il existe beaucoup d'handicape, n'hésite pas à me faire tes retours.

Et pourquoi des boutons plutôt que des liens ? les 2 sont accessibles si tu y fais attention.

kéké

[Xenos]

De ce que j'en avais vu sur SO (j'avais trouvé la formule assez agréable à retenir): le lien navigue mais le bouton agit. Cela facilite le choix de l'un ou de l'autre.
Et je suis également preneur de cette partie du mémoire (voir du mémoire entier ^^)

[Globe]

Le choix des boutons est également motivé par un problème technique. En fait j'ai eu utilisé un simulateur de lecteur d'écrans qui ne me permettait pas de suivre des liens sans href avec la touche entrée.

L'absence de href s'explique par mon script jquery. En fait les ancres se comportent comme des ancres html simples si js est désactivé. Si js est activé les href sont supprimés et une animation est jouée pour scroll d'une ancre à l'autre. Le href causait un amalgame du navigateur qui suivait l'ancre html avant de jouer l'animation jquery vers cette même ancre. Dans le cas ou un utilisateur malvoyant utilisait une liseuse ayant javascript il se retrouvait donc avec des liens de ce type :

Code :

<a title="#ancre">Ancre</a>

Le simulateur de lecteur ne m'autorisait pas activer ce lien sans href avec la touche entrée alors qu'il comprend la soumission d'un formulaire avec un bouton avec un listener pour la touche entrée. C'est une solution je pense temporaire, quand j'aurais du temps je chercherais une solution plus efficace comme ignorer les événements href plutôt que de les supprimer. En gros c'est un compromis pour satisfaire l'utilisateur voyant avec javascript (qui obtient donc une animation), l'utilisateur malvoyant avec javascript et les utilisateurs voyants ou malvoyants sans javascript.

Le problème ici vient du conflit entre expérience en dégradation élégante et inexpérience en développement pour les utilisateurs atteints de handicaps divers.

Après le cadre de ce projet bien qu'il respecte au mieux les normes Facile à Lire et comprendre ne s'étend pas à la portée aux handicapés mentaux sévères puisque le site lui même traite de développement accessible et je ne peux donc clairement pas m'abstenir de termes techniques et anglophones.

Le "mémoire" (c'est en réalité ce que ses profs appellent un "mini-mémoire post rapport de stage" d'une cinquantaine de pages) de cette amie sera rendu le 15 août normalement donc je lui demanderais alors s'il est possible de le diffuser. C'est pour le moment un tour d'horizon des problématiques d'accessibilité aux handicapés aux lieux publics et au numérique mais qui devrait au final devenir une analyse plus juridique.

Merci encore du coup de main et je ferais parvenir mes retours et conclusions au plus tôt (je cherche actuellement du taff et développe plusieurs projets personnels donc je ne suis pas riche en temps).

[Xenos]

liens sans href avec la touche entrée.

Cela n'a justement pas de sens, puisque le lien navigue donc soit il doit être le point de départ de la navigation (et posséder un href), soit être le point d'arrivé d'une navigation (et posséder un id, mais cette méthode est vieillotte puisque l'id est maintenant directement mis sur l'élément que l'on veut cibler). D'où le fait que le lecteur d'écran le snob :p

Si le navigateur suit le lien, c'est car effectivement, tu ne lui a probablement pas dit de ne pas le suivre:

.click(function(event){
event.preventDefault();
// Click code here...
});

Après, personnellement, je pense que les scrolls "doux" sont du ressort du navigateur: je préfère une navigation vive et nerveuse, et non un truc qui me glisse pendant 2-3 secondes jusqu'à l'endroit où je veux aller (en un sens, j'm'en f**s d'où se trouve ce que je voulais lire sur la page, je veux juste le lire là, tout de suite). C'est un peu comme l'option "Défilement doux" de Firefox (Options / Avancés / Case Utiliser le défilement doux): certains utilisateurs aimeront, moi pas, donc "forcer" un comportement me parait assez hasardeux voir mal venu si on souhaite un site "Top Accessibilité" (normalement, l'accessibilité passe en tout premier lieu par le navigateur car c'est l'élément qui parle directement à l'utilisateur et sur lequel l'utilisateur peut faire les réglages qu'il souhaite).

[Globe]

Si le navigateur suit le lien, c'est car effectivement, tu ne lui a probablement pas dit de ne pas le suivre:

.click(function(event){
event.preventDefault();
// Click code here...
});

En fait tu résumes exactement ce que j'expliquais ici :

une solution plus efficace comme ignorer les événements href plutôt que de les supprimer

Après, personnellement, je pense que les scrolls "doux" sont du ressort du navigateur: je préfère une navigation vive et nerveuse, et non un truc qui me glisse pendant 2-3 secondes jusqu'à l'endroit où je veux aller (en un sens, j'm'en f**s d'où se trouve ce que je voulais lire sur la page, je veux juste le lire là, tout de suite). C'est un peu comme l'option "Défilement doux" de Firefox (Options / Avancés / Case Utiliser le défilement doux): certains utilisateurs aimeront, moi pas, donc "forcer" un comportement me parait assez hasardeux voir mal venu si on souhaite un site "Top Accessibilité" (normalement, l'accessibilité passe en tout premier lieu par le navigateur car c'est l'élément qui parle directement à l'utilisateur et sur lequel l'utilisateur peut faire les réglages qu'il souhaite).

Après concernant le scroll j'aurais tendance à me ranger de ton point de vue mais tu n'as pas saisi le but de l'exercice ici:
Je parle de dégradation élégante mais on appelle ça aussi l'amélioration progressive. Dans la pratique il s'agit d'offrir un contenu qui se dégrade en fonction de la technologie utilisée mais de la manière la plus esthétique et pratique possible. Donc aux utilisateurs disposant d'un accès maximal j'impose effectivement une animation (mais c'est un peu comme dire qu'un film sous titré pour malentendants impose le son aux spectateurs dotés d'une bonne audition).

Je n'aime pas personnellement ces animations, je n'aime pas non plus les onepage, et je n'aime pas du tout ce que les gens semblent appeler UX aujourd'hui, ce qui pour moi est une promotion totalement hors contexte de la navigation tablette au prix de la navigation machine (cf. Recherche d'images google.com plutot que .fr très adaptée aux tablettes et sacrément handicapante sur pc de bureau à mes yeux). Cette folie du "web 3.0" ne me plaît absolument pas mais c'est pourtant ce que tous les clients veulent. Ils veulent du parallax, ils veulent du slider, ils veulent simuler la navigation avec les mains avec une souris.
L'idée derrière ce design est donc non pas de faire ce que moi j'appelle accessible mais de créer un compromis entre design moderne et accessibilité, satisfaire ce que j'aime à appeller les "Fashion Victim" du web tout en permettant aux personnes victimes de handicap, mais aussi aux personnes utilisant de vieux navigateurs et des machines faiblardes de naviguer convenablement.

[Ter Rowan]

c'est vrai qu'en cherchant dans google "onepage" (je ne connaissais pas), je suis tombé, évidemment, sur un site qui donnait les "dix meilleurs" sites onepage, et là.. y en a bien la moitié où j'étais complètement perdu

pas top comme expérience