Feedback2'0

1
Feedback2.0

• Présentation Seminaire Accessiweb
• par Renaud Morvan de Dimelo

2
Quest ce que feedback2.0 ?
3
Un espace de dialogue en ligne

• Feedback2.0 relation client Mise en place par
  une entreprise à lusage de ses clients
• Feedback2.0 projet dédié à laccompagnement de
  projet

4
Un service web2.0

• Communautaire Regroupement autour dun projet ou
  dun produit
• Participatif Recueillir lavis et les
  suggestions des participants
• Et la folksonomie ? Recherche consensus à travers
  les votes, les tags
• Ultra communiquant API, RSS,...

5
Et la technique ?

• Repose sur le framework Ruby on Rails
• XHTML CSS Javascript
• Et évidemment de lAJAX ...

6
Et laccessibilité dans tout ca ?

• Les fondamentaux techniques du web2.0 vise à
  dépasser les limitations des standards actuels
• Utilisation de technologie non standardisée par
  le W3C notamment XmlHttpRequest
• Utilisation intensive de javascript
• Nouvelle ergonomie basée principalement sur le
  visuel et lutilisation de la souris

7
Fini le blabla, passons à quelques cas pratiques

• Interaction de bloc à la Netvibes, Drag and Drop
• Gestion de listing, classement et filtrage
  dynamique
• Upload de fichier avec barre de progression

8
Gestion de blocs

• Classement des blocs via drag and drop
• Gestion de la visibilité du bloc
• Sauvegarde de la configuration dans la session
  utilisateur

Exemple disponible à lurl http//exalead-fr.feed
back20.info
9
Les contraintes

• Souris obligatoire pour le drag drop
• Répond à des besoins utilisateurs purement
  visuels
• Laffichage conditionnel des blocs ne doit pas
  cacher linformation aux lecteurs décrans ou à
  des visiteurs sans javascript

Exemple disponible à lurl http//exalead-fr.feed
back20.info
10
Limplémentation

• Le serveur renvoie lintégralité du contenu,
  laspect dynamique est géré coté client via
  javascript
• Les règles css relatives à laspect visuel sont
  configurées à la volée par javascript ( attention
  pas de displaynone)
• Les contrôles sont gérés sans html pour ne pas
  perturber les lecteurs décrans

Exemple disponible à lurl http//exalead-fr.feed
back20.info
11
Gestion dynamique de liste
exemple http//exalead-fr.feedback20.info/feedbac
k/list
12
Les contraintes

• Le filtrage et le classement doit pouvoir se
  faire avec ou sans javascript
• Les conséquences des actions doivent être
  compréhensibles même sans le feedback visuel

exemple http//exalead-fr.feedback20.info/feedbac
k/list
13
Limplémentation

• Les actions sont déclenchées par des liens
  hypertext, javascript se charge de linterception
  des événements et déclenche les appels AJAX quand
  il est activé, sinon cest une navigation
  classique
• API REST capable de répondre différemment suivant
  que la requête est une requête ajax ou une
  requête classique
• En cas dappel ajax, lapplication renvoie les
  actions javascripts à effectuer

14
Upload avec progession
http//exalead-fr.feedback20.info/feedback/show/14
10
15
Les contraintes

• Ne pas recharger la page et afficher un écran
  blanc sans information sur ce qui se passe quand
  cest possible
• Ne pas limiter lupload de fichier aux
  navigateurs supportant javascript
• Délivrer des informations non visuelles aux
  lecteurs décran supportant javascript quand
  lupload est terminé

http//exalead-fr.feedback20.info/feedback/show/14
10
16
Limplémentation

• Upload dans une iframe si javascript est activé
  indice pour le serveur que la réponse javascript
  doit être effectuée dans la page parente
• Upload classique sinon
• Pour les lecteurs décran positionner le focus
  sur lélément rajouté ?

http//exalead-fr.feedback20.info/feedback/show/14
10
17
Conclusion

• Sur des utilisations sémantiques de la panoplie
  web2.0 le support de javascript désactivé nest
  pas un réel problème et ramène à des
  problématiques connues et normées daccessibilité
• Le vrai problème daccessibilité se pose quand
  javascript est activé, notamment en ce qui
  concerne les modifications de la DOM à la volée.
  Il manque un moyen de notifier à lutilisateur ce
  qui sest passé.