Qu'est-ce que l'accessibilité sur le web? Comment faire des sites accessibles? Retrouvez dans cet avis d'expert les conseils et bonnes pratiques pour mieux comprendre l'accessibilité sur le web.

1. L’accessibilité sur le web
Définition et bonnes pratiques
RETROUVEZ NOUS SUR www.ametys.org @AmetysCMS AmetysCMS AmetysWebCMS

2. Questions
Qu’est-ce que l’ACCESSIBILITÉ ?
Comment faire de
l’ACCESSIBILITÉ ?
Comment les CMS peuvent-ils aider à
FAIRE DES SITES ACCESSIBLES ?

3. Définition
Donner accès à la même information à tous les
individus quel que soit leur matériel ou logiciel,
leur infrastructure réseau, leur langue maternelle,
leur culture, leur localisation géographique, ou
leurs aptitudes physiques ou mentales. »
Tim Berners-Lee, directeur du W3C
et inventeur du World Wide Web

4. L’accessibilité pour qui ?
En France :
10 millions de personnes ont un handicap de longue
durée ou permanent
• Moteur
• Auditif
• Cognitif
• Visuel (aveugle, mal voyant ou daltonien)
• Handicaps multiples
10 millions de seniors qui développent ces mêmes
handicaps

5. L’accessibilité pour qui ?
L’accessibilité c’est aussi
toutes les personnes qui
n’ont pas FLASH !

6. L’accessibilité pour qui ?
L’accessibilité c’est aussi
toutes les personnes qui
n’ont pas
JAVASCRIPT activé
(10% en France) !

7. L’accessibilité pour qui ?
L’accessibilité c’est aussi
toutes les personnes qui
ne sont pas sourds
mais ont le son
coupé !

8. L’accessibilité pour qui ?
L’accessibilité c’est aussi
toutes les personnes qui
naviguent sur
leur mobile !

9. L’accessibilité pour qui ?
L’accessibilité c’est aussi
toutes les personnes qui
se sont cassés le
poignet au ski !

10. Les idées reçues
Je vais faire un site dédié aux sourds »

11. Les idées reçues
Je vais faire un site dédié aux sourds
• Et si la personne n’a pas FLASH ?
• Pourquoi les sourds et pas les aveugles ?
• Avoir une partie du site accessible aux sourds ne rend pas
tout le site accessible !
• C’est cher à développer… et c’est très cher à maintenir !
• Tous les sourds ne parlent pas la langue des signes !

12. Un site accessible n’est pas forcément moche !

13. Les idées reçues
l’Accessibilité c’est bien
pour le
référencement »

14. Les idées reçues
l’Accessibilité c’est bien pour le référencement
OUI c’est bien !
• Mettre des alternatives pour l’accessibilité permet
de mieux référencer les contenus, car finalement
Google est « aveugle »
• L’accessibilité conseille de faire des contenus plutôt
court pour qu’ils soient facilement assimilable, cela
convient aussi à Google car il les considère plus
pertinent

15. Les idées reçues
l’Accessibilité c’est bien pour le référencement
ATTENTION !
Il peut y avoir des conflits !
• Le référencement va chercher à multiplier l’information
pour la même chose ce qui est n’est pas bien pour
l’accessibilité (perte de temps pour lecteur)
• Les titres de pages ne doivent pas forcément contenir
les mêmes informations pour être bien accessible ou
bien référencé…

16. Zoom sur les images
• Quelle alternative pour cette image ?
Mettre « Photo du professeur Jean Charles
Pomerol »

17. Zoom sur les images
Bonnes pratiques
• Ne pas ralentir et ne pas gêner la lecture du site
pour un aveugle
• Faire gagner du temps au contributeur
• Pour les images de décoration, mettre une
alternative vide
• Les seules images qui nécessitent une alternative
sont les graphiques de données dont les infos ne
sont pas reprises dans l’article adjacent

18. Zoom sur les images
Comment les CMS
peuvent aider les
contributeurs web à
FAIRE LES BONS CHOIX ?

19. Zoom sur les images
L’Accessibilité des images avec Drupal 7
Alternative non-vide proposée par défaut
Aide en ligne incomplète

20. Zoom sur les images
L’Accessibilité des images avec Ametys
• Alternative
vide par défaut
• Aide complète
et précise

21. Structure du contenu
• Le contenu doit être structuré sémantiquement
• Utilisation des bonnes balises html
• Un titre ce n’est pas un contenu écrit en taille 16, en
majuscule ou en gras
• Hiérarchisation correcte des titres

22. Structure du contenu
• Cas d’utilisation concret
• Récupération de contenu existant mais mal formé par
copier-coller
<p style=‘color:orange; font-size:13px’>Titre A</p>
<p style=‘color:black; font-size:16px;text-
decoration:underline’>Titre B</p>

23. Structure du contenu
Structuration du contenu avec Joomla! 1.6
Conserve tout lors d’un copier-coller
Apparence trompeuse par rapport à la sémantique

24. Structure du contenu
Structuration du contenu avec Ametys
Détruit les balises de présentation lors d’un copier-coller
Après intervention du contributeur :
choix des niveaux de titre

25. Evolution de l’accessibilité dans le temps
• L’accessibilité est difficile à vérifier
• Vérificateurs « externes » ou « internes »
• Niveau de l’accessibilité d’un site dans le temps
accessibilité
Site motorisé par Ametys
Site motorisé par
un autre CMS
temps

26. CONTACT SITE
40 RUE DU VILLAGE MAIL
D’ENTREPRISES TWITTER
31670 LABÈGE FACEBOOK
+33 (0) 5 62 19 19 00 YOUTUBE