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