ACCESSIBILITE 

ET QUALITE WEB

RETOUR D’EXPERIENCE
Yann Kozon

développeur freelance



@yannkozon
Fast and Furious
Startup agrégateur de contenu
Grande culture de l’expérience utilisateur
Le client
Reproduire le comportement
de l’application mobile dans le navigateur
La demande
Budget limité
Trop de devices lent
DOM trop lent
Les problématiques
Canvas
Détection des devices
Redirection vers l’application
La solution
Je veux mon award !
Administration
Le boss de l’agence
Le client
Site d’explication des nouveaux rythmes scolaires
Gagner des awards
La demande
Comment faire un site d’administration,
un site à award ?
La problématique
Site onepage
Effet au scroll
Musique d’ambiance
La solution
Navigation clavier
Images non utiles à la compréhension
La solution
Business is Business
E-commerçant français
Le client
Sur le site existant
ajouter une mise en avant
de l’inscription à la newsletter
La demande
Comment ne pas être trop intrusif
et augmenter le nombre d’inscrit
La problématique
Fenêtre modale
La solution (marketing)
Fenêtre modale
La solution
id=“ad“
Private Social Network
Laboratoire d’analyse
Le client
Site du laboratoire
avec accès distant client
La demande
Sécurité des données
La problématique
- back-office -
Contrôle IP, horaires spécifiques d’accès,
cryptage des mots de passe…
Les solutions
- front-office -
Génération aléatoire des accès client
Système anti-brute force
Les solutions
Tracking des clients
pour connaitre la population qui se connecte
La demande (bonus)
Google Analytics
La solution
Le client est roi
La demande du client
est roi
Accessibilité

et qualité web



Retour d’expérience
Fast and Furious
Tim Berners-Lee lors de la cérémonie des Jeux olympiques 2012
Canvas
=
Flash
Non compatible
avec les lecteurs d’écran
Jaws, NVDA, VoiceOver, Talkback…
Canvas
Pas de sélection des textes
Canvas
Je veux mon award !
Référentiel général
d'accessibilité pour les
administrations
RGAA
A bannir
ou
Arrêt rapide et simple
Autoplay
Texte de contenu

4,5:1
Texte supérieur à18pt
en gras supérieur à14pt

3:1
Contrastes
http://www.waqe.org/le-contraste-dan...
Business is Business
placeholder != label
<button> vs <a> vs <div>
Formulaire
*:focus { outline:0; }
focus et position:fixed
Focus
Si le site est responsive 

n’oubliez pas la version mobile
Pensez utilisateurs
Mobile
Private Social Network
https://4037109.fls.doubleclick.net/activityi;src=4037109;

type=20142003;cat=201420;ord=7917385912018;~oref=https://www.
...
the age of
privacy
is over
http://www.hngn.com/articles/39098/20140814/mark-zuckerberg-takes-als-ice-bucket-challenge-invi...
WAQE

Web Accessibilité Qualité Écologie
1. Aucun alt tu n’oublieras, et intelligemment tu rempliras.
2. La loi tu respecteras
3. L’élément <label> dans tes formul...
Sensibiliser
Former
Valoriser
Récompenser
Nos actions
Interventions auprès des professionnels du web
Sensibilisation des clients
Signaler un problème sur un site
Sensibiliser
Mini-conférences
Conférence annuelle
Formation des professionnels du web
Former
Annuaire de la communauté WAQE
Mise en avant des professionnels
Soutien des initiatives autour de nos thèmes
Valoriser
WAQE awards
Design, Accessibilité, Technique, Contenu
Système de récompenses interne
Récompenser
Engagez-vous !
waqe.org
Accessibilité et Qualité Web - retour d'expérience - WAQE
Accessibilité et Qualité Web - retour d'expérience - WAQE
Accessibilité et Qualité Web - retour d'expérience - WAQE
Accessibilité et Qualité Web - retour d'expérience - WAQE
Accessibilité et Qualité Web - retour d'expérience - WAQE
Accessibilité et Qualité Web - retour d'expérience - WAQE
Accessibilité et Qualité Web - retour d'expérience - WAQE
Accessibilité et Qualité Web - retour d'expérience - WAQE
Accessibilité et Qualité Web - retour d'expérience - WAQE
Prochain SlideShare
Chargement dans…5
×

Accessibilité et Qualité Web - retour d'expérience - WAQE

426 vues

Publié le

Comment à partir de problématiques réelles trouver de mauvaises solutions pour de bonnes raisons.
Présentation de l'association WAQE - Web Accessibilité Qualité et Écologie, pour un web responsable !

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
426
Sur SlideShare
0
Issues des intégrations
0
Intégrations
49
Actions
Partages
0
Téléchargements
3
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Accessibilité et Qualité Web - retour d'expérience - WAQE

  1. 1. ACCESSIBILITE 
 ET QUALITE WEB
 RETOUR D’EXPERIENCE
  2. 2. Yann Kozon
 développeur freelance
 
 @yannkozon
  3. 3. Fast and Furious
  4. 4. Startup agrégateur de contenu Grande culture de l’expérience utilisateur Le client
  5. 5. Reproduire le comportement de l’application mobile dans le navigateur La demande
  6. 6. Budget limité Trop de devices lent DOM trop lent Les problématiques
  7. 7. Canvas Détection des devices Redirection vers l’application La solution
  8. 8. Je veux mon award !
  9. 9. Administration Le boss de l’agence Le client
  10. 10. Site d’explication des nouveaux rythmes scolaires Gagner des awards La demande
  11. 11. Comment faire un site d’administration, un site à award ? La problématique
  12. 12. Site onepage Effet au scroll Musique d’ambiance La solution
  13. 13. Navigation clavier Images non utiles à la compréhension La solution
  14. 14. Business is Business
  15. 15. E-commerçant français Le client
  16. 16. Sur le site existant ajouter une mise en avant de l’inscription à la newsletter La demande
  17. 17. Comment ne pas être trop intrusif et augmenter le nombre d’inscrit La problématique
  18. 18. Fenêtre modale La solution (marketing)
  19. 19. Fenêtre modale La solution id=“ad“
  20. 20. Private Social Network
  21. 21. Laboratoire d’analyse Le client
  22. 22. Site du laboratoire avec accès distant client La demande
  23. 23. Sécurité des données La problématique
  24. 24. - back-office - Contrôle IP, horaires spécifiques d’accès, cryptage des mots de passe… Les solutions
  25. 25. - front-office - Génération aléatoire des accès client Système anti-brute force Les solutions
  26. 26. Tracking des clients pour connaitre la population qui se connecte La demande (bonus)
  27. 27. Google Analytics La solution
  28. 28. Le client est roi
  29. 29. La demande du client est roi
  30. 30. Accessibilité
 et qualité web
 
 Retour d’expérience
  31. 31. Fast and Furious
  32. 32. Tim Berners-Lee lors de la cérémonie des Jeux olympiques 2012
  33. 33. Canvas = Flash
  34. 34. Non compatible avec les lecteurs d’écran Jaws, NVDA, VoiceOver, Talkback… Canvas
  35. 35. Pas de sélection des textes Canvas
  36. 36. Je veux mon award !
  37. 37. Référentiel général d'accessibilité pour les administrations RGAA
  38. 38. A bannir ou Arrêt rapide et simple Autoplay
  39. 39. Texte de contenu
 4,5:1 Texte supérieur à18pt en gras supérieur à14pt
 3:1 Contrastes http://www.waqe.org/le-contraste-dans-vos-sites/
  40. 40. Business is Business
  41. 41. placeholder != label <button> vs <a> vs <div> Formulaire
  42. 42. *:focus { outline:0; } focus et position:fixed Focus
  43. 43. Si le site est responsive 
 n’oubliez pas la version mobile Pensez utilisateurs Mobile
  44. 44. Private Social Network
  45. 45. https://4037109.fls.doubleclick.net/activityi;src=4037109;
 type=20142003;cat=201420;ord=7917385912018;~oref=https://www.
 hc.gov/see-plans/85601/results/?county=04019 &age=40 &smoker=1 &parent= &pregnant=1 &mec=&zip=85601&state=AZ&income=35000&&step=4?
  46. 46. the age of privacy is over http://www.hngn.com/articles/39098/20140814/mark-zuckerberg-takes-als-ice-bucket-challenge-invites-bill-gates.htm
  47. 47. WAQE
 Web Accessibilité Qualité Écologie
  48. 48. 1. Aucun alt tu n’oublieras, et intelligemment tu rempliras. 2. La loi tu respecteras 3. L’élément <label> dans tes formulaires tu utiliseras 4. Le focus clavier tu ne masqueras pas 5. Les contrastes attention tu feras 6. Ton niveau de language à ta cible tu adapteras 7. A l’utilisateur final tu penseras 8. Les données sensibles tu protègeras 9. Les images tu optimiseras 10. Les bonnes pratiques tu défendras 10 commandements
  49. 49. Sensibiliser Former Valoriser Récompenser Nos actions
  50. 50. Interventions auprès des professionnels du web Sensibilisation des clients Signaler un problème sur un site Sensibiliser
  51. 51. Mini-conférences Conférence annuelle Formation des professionnels du web Former
  52. 52. Annuaire de la communauté WAQE Mise en avant des professionnels Soutien des initiatives autour de nos thèmes Valoriser
  53. 53. WAQE awards Design, Accessibilité, Technique, Contenu Système de récompenses interne Récompenser
  54. 54. Engagez-vous ! waqe.org

×