Discussion :

[djmic]

Bonjour à tous,

je m'heurte à un problème de conception.

A l'heure actuelle, l'utilisateur peut encore désactiver javascript.
Est-il bon alors de coder nos validations de formulaire en javascript?

y a-t-il une solution à cette désactivation possible?

Qu'en est-il alors des librairies comme Bootstrap qui utilise Jquery par exemple?

Merci

[SylvainPV]

Même si JavaScript est activé, le code client est visible et modifiable par le client. Donc il faut toujours valider les entrées côté serveur, comme une forteresse à protéger. Règle numéro 1 du back-end : Never trust client.

En premier lieu il faut donc coder la validation côté serveur et la tester avec des requêtes "non orthodoxes". Il y a des logiciels spécialisés qui analysent les sites web et spamment le serveur en testant des failles courantes dans les champs de formulaires.

Une fois que tu es certain que ton serveur est blindé, alors on peut envisager d'utiliser en complément la validation HTML5 / JavaScript . La validation côté client est intéressante pour 3 raisons :
- accompagner l'utilisateur dans la saisie
- ajouter de la sémantique au formulaire (à condition d'utiliser les standards HTML5)
- ne pas requêter inutilement le serveur quand on sait que le formulaire est incorrect

[djmic]

Merci. je partais dans ce sens.

Mais qu'en est-il, par exemple, des menus déroulants, animations, etc...
Ils existe énormément de sites qui utilisent le javascript, mais quelles parades utilisent-ils pour palier à la désactivation du javascript?
Leur site ne fonctionne pas et ils ne s'en tracassent pas?

Y a-t-il moyen de savoir si le javascript a été désactivé du côté client?

Merci

[SpaceFrog]

il y a en effet moyen de tester si js est activé ou non et prévoir cela pour le comportement du formulaire.
Tu peux par exemple afficher un message sur la page disant qu'elle est prévue pour fonctionner avec js.
et coller un script au chargement qui efface ce message
=> js activé le message n'apparait pas
=> js désactivé le message apparait

Mais c'est tout de même assez rare

Tu peux aussi mettre un form sans js et le remplacer au chargement par un form avec js ...

[SylvainPV]

Si bien sûr il y a plusieurs apporoches pour palier à l'absence de JavaScript :

- JavaScript "isomorphique" ou "universel", c'est-à-dire utiliser la même base de code côté client et côté serveur pour pouvoir générer les vues avec ou sans le support JS client
- amélioration progressive (Progressive enhancement) ; faire en sorte que sans JS le site soit toujours fonctionnel bien que dégradé
- redirection ; rediriger vers une autre page si JS est désactivé avec une balise <meta>:

Code :

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

1
2
<noscript>  <meta http-equiv="refresh" content="0;url=noscript.html">
</noscript>

[djmic]

Je comprend bien tout ce que vous dites d'un point de vue validation de formulaire.

Je vois moins bien, par exemple, d'un point de vue animation.

Je m'explique.

Je me suis lancé dans Bootstrap qui utilise le javascript, plus précisément JQuery pour de petites animations comme pour les dropdown.



Lorsque le javascript est désactivé la liste ne s'affiche pas.

Il faudrait donc, lorsque le javascript est désactivé, que la flèche vers le bas ne soit pas affichéd et que le lien dirige sur une page avec les liens qui auraient dû s'afficher dans la dropdown.

Ce que je n'arrive pas à comprendre, c'est que le test ne se fait que dans un sens.

si pas de javascript possible alors ....

Mais pas de test inverse...

Ou alors il faut tout générer par javascript ce qui doit être utilisé quand javascript est actif?

Merci

[SylvainPV]

Déjà ce genre de menu dropdown peut être fait en pur CSS sans recours à JS. Ensuite oui, si JS est requis, il faut veiller à ce que la page soit consultable correctement s'il est désactivé, en choisissant une des 3 options précédemment citées.

Je ne comprends pas ce que tu veux dire par "test inverse". Tester le non support de JS et tester le support de JS... c'est le même test

[djmic]

La balise <noscript></noscript> permet de déterminer du code pur html à interpréter si le javascript est désactivé.

mais est-ce que la balise <script></script> permet de déterminer du code pur html?

[SylvainPV]

Ben non, si on veut ajouter du contenu HTML si JavaScript est activé on le fait... en JavaScript

[djmic]

C'était ma question :-)
Un grand merci :-)

[djmic]

j'ai encore besoin d'une petite précision.

Que me conseillez-vous comme méthode pour la partie qui doit apparaître qu'en javascript.

Créer mon bloc html en display:none et lors du chargement en javascript modifier l'attribut display?
Ou tout construire en javascript?

car mon bloc est assez conséquent.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<li id="menu-administration"><a href="#">Administration</a></li>
<li class="dropdown">
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Championnat<span class="caret"></span></a>
     <ul class="dropdown-menu">
	<li><a href="calendrier">Calendrier</a></li>
	<li><a href="resultatsweekend">Résultats du Weekend</a></li>
	<li><a href="classements">Classements</a></li>
	<li><a href="resultatsperso">Résultats personnels</a></li>
	<li><a href="effectif">Effectif du weekend</a></li>
     </ul>
</li>

Merci

[SylvainPV]

Ce HTML a l'air lisible sans JavaScript, ça montrera la liste avec un titre. J'imagine qu'il est caché en CSS pour le faire apparaître en JS, sans doute avec la classe dropdown. Donc tout ce que tu as à faire est ajouter cette classe en JavaScript en même temps que le dropdown est initialisé.

[ABCIWEB]

Basiquement dans un lien de ce type :

<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Championnat<span class="caret"></span></a>

tu peux indiquer une url qui sera suivie uniquement si javascript est désactivé (s'il est activé tu fais classiquement un "return fase" sur le lien). Tu peux donc passer une variable dans ce lien pour faire afficher le bloc de menu sur une condition côté serveur. Par exemple :

<a href="ma_page.php?menu=championnat" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Championnat<span class="caret"></span></a>

[SylvainPV]

Oui enfin recharger toute une page pour juste déplier un menu ça me paraît disproportionné. Surtout si on peut le faire simplement sans JavaScript : http://codepen.io/anon/pen/yNpeRN

[ABCIWEB]

Oui enfin c'était sur le principe d'avoir un comportement différent sur un lien en fonction de javascript activé ou non.
Après suivant les cas si on peut faire l'équivalent en css bien sûr c'est mieux (mais vérifier la compatibilité du code - notamment si on emploi css3 - avec les anciens navigateurs).

[djmic]

En faisant ceci, est-ce que justement il ne risque pas d'afficher par défaut la liste?
Si c'est le cas, ça ne risque pas d'être très présentable.

Justement est-ce que ce ne serait pas mieux par défaut de mettre mon lien pointant vers ma page administration en laissant tel quel la dropdown en display none, et dans le cas où le javascript est activé de modifier le href et pointer vers #?

[SylvainPV]

Le contenu passe toujours avant la présentation. Le principe d'amélioration progressive implique d'avoir un contenu toujours accessible dans le pire des cas. Donc mettre un display:none par défaut n'est pas une bonne idée. Par exemple, les screen readers ne lisent pas les éléments en display:none. Un malvoyant pourrait ainsi ne pas savoir que ton menu a une sous-liste de liens.

[ABCIWEB]

Effectivement si javascript est désactivé la présentation passe au second plan. Globalement, à part quelques paranos qui savent à quoi ils s'attendent (un site dégradé), il n'y a que les robots et les non-voyants pour qui javascript sera désactivé, et là aussi la présentation visuelle passe au second plan. L'important est donc que toutes les pages (au minimum les plus importantes, mais toutes si tu veux un référencement et une accessibilité maximum) de ton site soient consultables avec js désactivé.

Pour info cela fait déjà quelques temps que Firefox (pour donner l'exemple d'un navigateur qui était facilement configurable à tous les niveaux) ne propose plus la désactivation de javascript dans ses options standard, il faut maintenant installer un module spécifique (ex : "NoScript"). Pour dire que pour un usage courant, javascript ne sera qu'exceptionnellement désactivé. Donc bien entendu il faut préserver la validation des formulaires côté serveur dans tous les cas, mais niveau présentation tu peux te permettre pas mal de largesses avec js désactivé.

[djmic]

j'ai testé en mettant le lien vers la page alternative comme ceci :

Code :

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

<a href="championnat" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Championnat<span class="caret"></span></a>

Et ça réagit assez bien en fonction que le javascript est activé ou non.

Si javascript est activé, le dropdown s'affiche bien et dans le cas contraire, on passe bien sur la page "alternative" qui liste les liens qui auraient dû être affiché dans la dropdown.

Je viens seulement de me lancer dans Bootstrap, mais concernant l'accessibilité aux screen readers, Bootstrap a prévu une classe .sr-only qui permet justement de mettre un block en display : hidden au lieu de le mettre par défaut en display:non.

Donc finalement Bootstrap a prévu tout ce qu'il faut pour tout respecter.

Tiens, comment tester l'accessibilité d'un site pour les screen readers?

[SylvainPV]

display:hidden ça n'existe pas. Tu dois parler de visibility. Attention avec visibility:hidden l'élément est caché mais occupe toujours l'espace qu'il est censé prendre dans la page.

Je continue à croire que recharger toute la page pour déplier un menu est complètement disproportionné, et que tu ferais mieux d'afficher directement la sous-liste aux clients avec JS désactivé, comme l'a expliqué ABCIWEB.

Pour tester l'accessibilité d'un site il y a des extensions et des services en ligne. Une petite recherche Google et hop:
https://www.google.fr/search?q=test+...+accessibility
http://www.w3.org/WAI/ER/tools/