accessibilité et qualité web - retour d'expérience - waqe
TRANSCRIPT
ACCESSIBILITE ET QUALITE WEB
RETOUR D’EXPERIENCE
Yann Kozondé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 solutionid=“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 contenu4,5:1
Texte supérieur à18pt en gras supérieur à14pt
3:1
Contrastes
http://www.waqe.org/le-contraste-dans-vos-sites/
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.
hc.gov/see-plans/85601/results/?county=04019&age=40&smoker=1&parent=
&pregnant=1&mec=&zip=85601&state=AZ&income=35000&&step=4?
the age of privacy is over
http://www.hngn.com/articles/39098/20140814/mark-zuckerberg-takes-als-ice-bucket-challenge-invites-bill-gates.htm
WAQEWeb Accessibilité Qualité Écologie
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
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