Accessibilite web
•
0 gostou•731 visualizações
Présentation à la nAcademy (Janvier 2013) : introduction à l'accessibilité Web par Christophe Villeneuve
Recomendados
Recomendados
Mais conteúdo relacionado
Mais de neuros
Mais de neuros (20)
Accessibilite web
- 1. ACCESSIBILITE WEB Christophe Villeneuve 16 Janvier 2013
- 2. Sommaire ✔ Pour qui ✔ Les types de handicaps ✔ Le Frein d'accessibilité ✔ Solution ✔ Conception ✔ Tester NAcademy – 16 Janvier 2013
- 3. Pour Qui ? NAcademy – 16 Janvier 2013
- 4. Les Types de handicaps ➢ Handicaps Visuels ✔ Troubles de la vision ✔ Absence d'écran ✔ Vision floue ✔ Absence d'éléments petits ✔ Perception des couleurs ✔ Daltonien ✔ Yeux sensible ✔ Soleil NAcademy – 16 Janvier 2013
- 5. Les Types de handicaps ➢ Handicaps Visuels ✔ Surdités ➢ Handicaps Auditifs ✔ Totale ou partielle ✔ Problèmes de lectures ✔ Bruit ambiant VS mp3 NAcademy – 16 Janvier 2013
- 6. Les Types de handicaps ➢ Handicaps Visuels ✔ Paralysie ➢ Handicaps Auditifs ✔ Problème souris ➢ Handicaps Moteurs ✔ Problème clavier [TAB] ✔ Certaines maladies ✔ Les personnes agées ✔ Boutons trop rapprochés ✔ Durée de sessions NAcademy – 16 Janvier 2013
- 7. Les Types de handicaps ➢ Handicaps Visuels Trouble de la mémoire ✔ ➢ Handicaps Auditifs ✔ Handicaps temporaires ➢ Handicaps Moteurs ✔ Problème icone / menu ✔ Difficulté de lecture ➢ Handicaps Cognitifs ✔ Eviter les gifs animés NAcademy – 16 Janvier 2013
- 8. Les Types de handicaps ➢ Handicaps Visuels ✔ Langue étrangère (FR) ➢ Handicaps Auditifs ✔ Les abréviations ➢ Handicaps Moteurs ✔ Le langage SMS ➢ Handicaps Cognitifs ➢ La Barrière de la langue NAcademy – 16 Janvier 2013
- 9. Les Types de handicaps ➢ Handicaps Visuels ✔ Les anciens navigateurs ➢ Handicaps Auditifs ✔ Le matériel ➢ Handicaps Moteurs modem ✔ ✔ Le débit internet ➢ Handicaps Cognitifs ➢ La Barrière de la langue ➢ Autres NAcademy – 16 Janvier 2013
- 10. Le Frein d'accessibilité VS NAcademy – 16 Janvier 2013
- 11. Le Frein Accessibilité Frein Faux problème ● Nombre de visiteurs ● Référencement naturel avec un handicap ● Augmentation audience ● Contrainte graphique ● Maintenance facile ● Le coût élevé ● Portabilité ● Compliqué ● Meilleur image ● Obligation légale NAcademy – 16 Janvier 2013
- 12. Solution NAcademy – 16 Janvier 2013
- 13. Solutions 1/3 Handicaps Visuel ✔ ✔ Handicaps Auditifs ✔ ✔ ✔ Utiliser la Balise ALT Utiliser la Balise ALT ✔ Sous titrés les vidéos ✔ Pas de contenu en CSS Transcrire le contenu audio ✔ Pas de contenu en CSS ✔ Idem en JS Idem en JS idem pour la video ✔ Liens pertinents ✔ Liens pertinents ✔ ✔ Naviguer avec [TAB] Naviguer avec [TAB] ✔ Description de l'image ✔ Description de l'image ✔ ✔ Modération texte // image Modération texte image ✔ Contraste suffisant dans ✔ Contraste suffisant dans <form>, contenus, fonds <form>, contenus, fonds NAcademy – 16 Janvier 2013
- 14. Solutions 2/3 Handicaps Moteurs ✔ ✔ Handicaps Cognitifs ✔ ✔ ✔ Ne pas bloquer la Ne pas bloquer la ✔ Menu clair navigation au clavier navigation au clavier ✔ Arborescence logique ✔ Alternative à 100% de la ✔ Alternative à 100% de la ✔ Récupération Login + PWD souris souris ✔ File d'ariane ✔ Ne pas limiter le temps lors ✔ Ne pas limiter le temps lors d'une action (Sessions) ✔ Augmenter la hauteur des d'une action (Sessions) lignes ✔ Attention zones cliquables ✔ Attention zones cliquables ✔ Séparer Titre et Contenu ✔ Page 404 NAcademy – 16 Janvier 2013
- 15. Solutions 3/3 La langue ✔ ✔ Autres ✔ ✔ ✔ Utiliser un langage courant Utiliser un langage courant ✔ Ne pas bloquer les ✔ Eviter Google Traduction ✔ Eviter Google Traduction navigateurs ✔ Optimisation des images NAcademy – 16 Janvier 2013
- 16. Conception © http://accede-web.com NAcademy – 16 Janvier 2013
- 17. Les Types de conception (Graphiques/Maquettes) Accessibilité Graphique ✔ Navigation ✔ Texte & symboles ✔ Couleurs / constraste ✔ Liens ✔ Documents ✔ (poids, .ext) ✔ Formulaires ✔ (bouton, captcha, messages...) ✔ Multimédia (son, vidéo) NAcademy – 16 Janvier 2013
- 18. Les Types de conception (Intégrateurs / Développeurs) Accessibilité Graphique ✔ Structure ✔ Régions, titre, navigation Accessibilité HTML / CSS ✔ Métadonnées (Title) ✔ Les balises ✔ Images ✔ Liens / boutons ✔ Formulaires (Label) ✔ Liste ✔ Tableaux ✔ ... NAcademy – 16 Janvier 2013
- 19. Les Types de conception (Intégrateurs / Développeurs) Accessibilité Graphique ✔ Différencier les boutons de liens Accessibilité HTML / CSS ✔ Alternatives Interfaces riches & Javascript ✔ Flash, Javascript ✔ Clavier, souris ✔ Navigation ✔ Formulaire NAcademy – 16 Janvier 2013
- 20. Les Types de conception (contributeurs éditoriaux) Accessibilité Graphique ✔ Mettre en forme le contenu Accessibilité HTML / CSS ✔ Hiérarchie des titres Interfaces riches & Javascript ✔ Des liens accessibles Accessibilité éditoriale ✔ Les images ✔ Couleurs / contrastes ✔ Contenus riches / multimédias NAcademy – 16 Janvier 2013
- 21. Tester NAcademy – 16 Janvier 2013
- 22. Tester Test W3C Test ✔ ✔ Test de performance ✔ Test utilisateurs ✔ Test accessibilité // couleur Test accessibilité couleur ✔ ✔ NAcademy – 16 Janvier 2013
- 23. Questions ? nAcademy – JJ Mois AAAA