Accessibilite web

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


Pour Qui ?


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



➢Handicaps Visuels

➢Handicaps Auditifs

✔ Surdités

✔ Totale ou partielle

✔ Problèmes de lectures

✔ Bruit ambiant VS mp3




➢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




➢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





➢La Barrière de la langue

✔ Langue étrangère (FR)

✔ Les abréviations

✔ Le langage SMS





➢La Barrière de la langue

✔ Les anciens navigateurs

✔ Le matériel

✔ modem✔ Le débit internet

➢Autres


Le Frein d'accessibilité

VS


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


Solution


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


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


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


Conception

© http://accede-web.com


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)


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

✔ ...


Les Types de conception (Intégrateurs / Développeurs)



Interfaces riches & Javascript

✔ Différencier les boutons de liens

✔ Alternatives

✔ Flash, Javascript✔ Clavier, souris

✔ Navigation

✔ Formulaire


Les Types de conception (contributeurs éditoriaux)



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


Tester


Tester

✔Test W3C✔Test W3C ✔Test de performance

✔Test accessibilité / couleur✔Test accessibilité / couleur✔Test utilisateurs

nAcademy – JJ Mois AAAA

Questions ?