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