ACCESSIBILITE WEB  Christophe Villeneuve    16 Janvier 2013
Sommaire ✔     Pour qui ✔     Les types de handicaps ✔     Le Frein daccessibilité ✔     Solution ✔     Conception ✔     T...
Pour Qui ?    NAcademy – 16 Janvier 2013
Les Types de handicaps ➢     Handicaps Visuels              ✔                                        Troubles de la vision...
Les Types de handicaps ➢     Handicaps Visuels              ✔                                        Surdités ➢     Handic...
Les Types de handicaps ➢     Handicaps Visuels              ✔                                        Paralysie ➢   Handica...
Les Types de handicaps ➢     Handicaps Visuels              Trouble de la mémoire                                    ✔ ➢  ...
Les Types de handicaps ➢     Handicaps Visuels              ✔                                        Langue étrangère (FR)...
Les Types de handicaps ➢     Handicaps Visuels              ✔                                        Les anciens navigateu...
Le Frein daccessibilité                                 VS    NAcademy – 16 Janvier 2013
Le Frein Accessibilité                Frein                     Faux problème ●     Nombre de visiteurs           ●       ...
Solution    NAcademy – 16 Janvier 2013
Solutions 1/3 Handicaps Visuel ✔ ✔                                    Handicaps Auditifs                                  ...
Solutions 2/3 Handicaps Moteurs ✔ ✔                                    Handicaps Cognitifs                                ...
Solutions 3/3 La langue ✔ ✔                                    Autres                                      ✔     ✔     ✔ U...
Conception      © http://accede-web.com   NAcademy – 16 Janvier 2013
Les Types de conception(Graphiques/Maquettes) Accessibilité Graphique         ✔                                     Naviga...
Les Types de conception (Intégrateurs /Développeurs) Accessibilité Graphique         ✔                                    ...
Les Types de conception (Intégrateurs /Développeurs) Accessibilité Graphique          ✔                                   ...
Les Types de conception (contributeurséditoriaux) Accessibilité Graphique          ✔                                   Met...
Tester    NAcademy – 16 Janvier 2013
Tester Test W3C Test ✔ ✔                                Test de performance                                  ✔ Test utilis...
Questions ?    nAcademy – JJ Mois AAAA
Upcoming SlideShare
Loading in...5
×

Accessibilite web

753

Published on

Présentation à la nAcademy (Janvier 2013) : introduction à l'accessibilité Web par Christophe Villeneuve

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
753
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Accessibilite web

  1. 1. ACCESSIBILITE WEB Christophe Villeneuve 16 Janvier 2013
  2. 2. Sommaire ✔ Pour qui ✔ Les types de handicaps ✔ Le Frein daccessibilité ✔ Solution ✔ Conception ✔ Tester NAcademy – 16 Janvier 2013
  3. 3. Pour Qui ? NAcademy – 16 Janvier 2013
  4. 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. 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. 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. 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. 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. 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. 10. Le Frein daccessibilité VS NAcademy – 16 Janvier 2013
  11. 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. 12. Solution NAcademy – 16 Janvier 2013
  13. 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 limage ✔ Description de limage ✔ ✔ 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. 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 dariane ✔ Ne pas limiter le temps lors ✔ Ne pas limiter le temps lors dune action (Sessions) ✔ Augmenter la hauteur des dune action (Sessions) lignes ✔ Attention zones cliquables ✔ Attention zones cliquables ✔ Séparer Titre et Contenu ✔ Page 404 NAcademy – 16 Janvier 2013
  15. 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. 16. Conception © http://accede-web.com NAcademy – 16 Janvier 2013
  17. 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. 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. 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. 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. 21. Tester NAcademy – 16 Janvier 2013
  22. 22. Tester Test W3C Test ✔ ✔ Test de performance ✔ Test utilisateurs ✔ Test accessibilité // couleur Test accessibilité couleur ✔ ✔ NAcademy – 16 Janvier 2013
  23. 23. Questions ? nAcademy – JJ Mois AAAA
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×