SlideShare une entreprise Scribd logo
L’accessibilité sur le web
                     Définition et bonnes pratiques




RETROUVEZ NOUS SUR    www.ametys.org   @AmetysCMS   AmetysCMS   AmetysWebCMS
Questions


   Qu’est-ce que l’ACCESSIBILITÉ ?

            Comment faire de
            l’ACCESSIBILITÉ ?

Comment les CMS peuvent-ils aider à
  FAIRE DES SITES ACCESSIBLES ?
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
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
L’accessibilité pour qui ?




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


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


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




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




L’accessibilité c’est aussi
toutes les personnes qui
 se sont cassés le
  poignet au ski !
Les idées reçues


Je vais faire un site dédié aux sourds »
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 !
Un site accessible n’est pas forcément moche !
Les idées reçues




l’Accessibilité c’est bien
         pour le
    référencement »
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
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é…
Zoom sur les images

• Quelle alternative pour cette image ?




          Mettre « Photo du professeur Jean Charles
          Pomerol »
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
Zoom sur les images




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

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

     L’Accessibilité des images avec Ametys

• Alternative
vide par défaut

• Aide complète
et précise
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
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>
Structure du contenu

Structuration du contenu avec Joomla! 1.6
     Conserve tout lors d’un copier-coller
     Apparence trompeuse par rapport à la sémantique
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
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
CONTACT                 SITE
40 RUE DU VILLAGE       MAIL
D’ENTREPRISES           TWITTER
31670 LABÈGE            FACEBOOK
+33 (0) 5 62 19 19 00   YOUTUBE

Contenu connexe

En vedette

DESTDA - Declaração de Substituição Tributária, Diferencial de Alíquota e Ant...
DESTDA - Declaração de Substituição Tributária, Diferencial de Alíquota e Ant...DESTDA - Declaração de Substituição Tributária, Diferencial de Alíquota e Ant...
DESTDA - Declaração de Substituição Tributária, Diferencial de Alíquota e Ant...
Renata Santana Santos
 
Dahua - Intelligent Traffic Systems
Dahua - Intelligent Traffic SystemsDahua - Intelligent Traffic Systems
Dahua - Intelligent Traffic Systems
Shein Myint Aung
 
Презентація ХСШ № 85
Презентація ХСШ № 85Презентація ХСШ № 85
Презентація ХСШ № 85
sch _
 
хсш №85 проект шкільний огородній бум
хсш №85 проект шкільний  огородній бумхсш №85 проект шкільний  огородній бум
хсш №85 проект шкільний огородній бум
sch _
 
7 maggio 2016 4 modulo P.N.A DyD-Endocrinologia Clinica-Omeopatia Classica
7 maggio 2016   4 modulo P.N.A DyD-Endocrinologia Clinica-Omeopatia Classica7 maggio 2016   4 modulo P.N.A DyD-Endocrinologia Clinica-Omeopatia Classica
7 maggio 2016 4 modulo P.N.A DyD-Endocrinologia Clinica-Omeopatia Classica
DYD MEDICINA INTEGRATIVA di Diana Yedid
 
2013_FactsAboutKorea_english
2013_FactsAboutKorea_english2013_FactsAboutKorea_english
2013_FactsAboutKorea_english
Kailash Chand Bishnoi
 
Intrauterine insemination forun explained infertility Infertilità inspiegata ...
Intrauterine insemination forun explained infertility Infertilità inspiegata ...Intrauterine insemination forun explained infertility Infertilità inspiegata ...
Intrauterine insemination forun explained infertility Infertilità inspiegata ...
DYD MEDICINA INTEGRATIVA di Diana Yedid
 
Part 2 - Data Warehousing Lecture at BW Cooperative State University (DHBW)
Part 2 - Data Warehousing Lecture at BW Cooperative State University (DHBW)Part 2 - Data Warehousing Lecture at BW Cooperative State University (DHBW)
Part 2 - Data Warehousing Lecture at BW Cooperative State University (DHBW)
Andreas Buckenhofer
 
Extra 2ª fase UNESP
Extra 2ª fase UNESPExtra 2ª fase UNESP
Extra 2ª fase UNESP
Gerson Coppes
 
14/88
14/8814/88
14/88
BATbKO
 

En vedette (10)

DESTDA - Declaração de Substituição Tributária, Diferencial de Alíquota e Ant...
DESTDA - Declaração de Substituição Tributária, Diferencial de Alíquota e Ant...DESTDA - Declaração de Substituição Tributária, Diferencial de Alíquota e Ant...
DESTDA - Declaração de Substituição Tributária, Diferencial de Alíquota e Ant...
 
Dahua - Intelligent Traffic Systems
Dahua - Intelligent Traffic SystemsDahua - Intelligent Traffic Systems
Dahua - Intelligent Traffic Systems
 
Презентація ХСШ № 85
Презентація ХСШ № 85Презентація ХСШ № 85
Презентація ХСШ № 85
 
хсш №85 проект шкільний огородній бум
хсш №85 проект шкільний  огородній бумхсш №85 проект шкільний  огородній бум
хсш №85 проект шкільний огородній бум
 
7 maggio 2016 4 modulo P.N.A DyD-Endocrinologia Clinica-Omeopatia Classica
7 maggio 2016   4 modulo P.N.A DyD-Endocrinologia Clinica-Omeopatia Classica7 maggio 2016   4 modulo P.N.A DyD-Endocrinologia Clinica-Omeopatia Classica
7 maggio 2016 4 modulo P.N.A DyD-Endocrinologia Clinica-Omeopatia Classica
 
2013_FactsAboutKorea_english
2013_FactsAboutKorea_english2013_FactsAboutKorea_english
2013_FactsAboutKorea_english
 
Intrauterine insemination forun explained infertility Infertilità inspiegata ...
Intrauterine insemination forun explained infertility Infertilità inspiegata ...Intrauterine insemination forun explained infertility Infertilità inspiegata ...
Intrauterine insemination forun explained infertility Infertilità inspiegata ...
 
Part 2 - Data Warehousing Lecture at BW Cooperative State University (DHBW)
Part 2 - Data Warehousing Lecture at BW Cooperative State University (DHBW)Part 2 - Data Warehousing Lecture at BW Cooperative State University (DHBW)
Part 2 - Data Warehousing Lecture at BW Cooperative State University (DHBW)
 
Extra 2ª fase UNESP
Extra 2ª fase UNESPExtra 2ª fase UNESP
Extra 2ª fase UNESP
 
14/88
14/8814/88
14/88
 

Similaire à Accessibilité sur le web : astuces et bonnes pratiques pour des sites accessibles

Accessibilité web pour les édimestres
Accessibilité web pour les édimestres Accessibilité web pour les édimestres
Accessibilité web pour les édimestres
Mow Rebai
 
Mobile et accessibilité, une partie à Troie
Mobile et accessibilité, une partie à TroieMobile et accessibilité, une partie à Troie
Mobile et accessibilité, une partie à Troie
Goulven Champenois
 
Accessiblite Web, Idées reçues, enjeux, implications et bénéfices
Accessiblite Web, Idées reçues, enjeux, implications et bénéficesAccessiblite Web, Idées reçues, enjeux, implications et bénéfices
Accessiblite Web, Idées reçues, enjeux, implications et bénéfices
Etienne Samson
 
Formation bien démarrer sur internet
Formation bien démarrer sur internetFormation bien démarrer sur internet
Formation bien démarrer sur internet
Sylvie de Meeûs
 
Livre blanc : Accessibilité Web, Guide pour la conception de sites web access...
Livre blanc : Accessibilité Web, Guide pour la conception de sites web access...Livre blanc : Accessibilité Web, Guide pour la conception de sites web access...
Livre blanc : Accessibilité Web, Guide pour la conception de sites web access...
Ametys
 
Votre portail web respecte-t-il le référentiel général d'accessibilité ?
Votre portail web respecte-t-il le référentiel général d'accessibilité ?Votre portail web respecte-t-il le référentiel général d'accessibilité ?
Votre portail web respecte-t-il le référentiel général d'accessibilité ?
Ligeo Archives
 
CMSday 2013 - Usines à sites : Quelles sont les approches possibles ?
CMSday 2013 - Usines à sites : Quelles sont les approches possibles ?CMSday 2013 - Usines à sites : Quelles sont les approches possibles ?
CMSday 2013 - Usines à sites : Quelles sont les approches possibles ?
Smile I.T is open
 
Ergonomie web
Ergonomie webErgonomie web
Ergonomie web
Clément Dussarps
 
2016 Création Refonte Site
2016 Création Refonte Site2016 Création Refonte Site
2016 Création Refonte Site
Office de tourisme Aunis Marais Poitevin
 
Cours ergonomie des IHM web - Chapitre 5 - Les règles de l'ergonomie web
Cours ergonomie des IHM web - Chapitre 5 - Les règles de l'ergonomie webCours ergonomie des IHM web - Chapitre 5 - Les règles de l'ergonomie web
Cours ergonomie des IHM web - Chapitre 5 - Les règles de l'ergonomie web
ElodieDescharmes
 
Référencement avec Joomla - SEO Camp
Référencement avec Joomla - SEO CampRéférencement avec Joomla - SEO Camp
Référencement avec Joomla - SEO Camp
SEO CAMP
 
Semantic Information Systems
Semantic Information SystemsSemantic Information Systems
Semantic Information Systems
Serge Garlatti
 
10 bénéfices d'une bonne architecture d'information - Webinar Yellow Dolphin...
10 bénéfices d'une bonne architecture d'information -  Webinar Yellow Dolphin...10 bénéfices d'une bonne architecture d'information -  Webinar Yellow Dolphin...
10 bénéfices d'une bonne architecture d'information - Webinar Yellow Dolphin...
Yellow Dolphins
 
L'accessibilité, au-delà des contraintes, un atout pour votre audience Avanta...
L'accessibilité, au-delà des contraintes, un atout pour votre audience Avanta...L'accessibilité, au-delà des contraintes, un atout pour votre audience Avanta...
L'accessibilité, au-delà des contraintes, un atout pour votre audience Avanta...
Access42
 
Dessin de pages web 536
Dessin de pages web 536Dessin de pages web 536
Dessin de pages web 536
quickredfox
 
Site dédié aux publics handicapés du Centre Pompidou : démarche et bilan
Site dédié aux publics handicapés du Centre Pompidou : démarche et bilanSite dédié aux publics handicapés du Centre Pompidou : démarche et bilan
Site dédié aux publics handicapés du Centre Pompidou : démarche et bilan
Julie Landry
 
Responsive logic - Kiwiparty
Responsive logic - KiwipartyResponsive logic - Kiwiparty
Responsive logic - Kiwiparty
Julien Cabanès
 
L'accessibilité : un truc réservé aux riches ?
L'accessibilité : un truc réservé aux riches ?L'accessibilité : un truc réservé aux riches ?
L'accessibilité : un truc réservé aux riches ?
Jean-Philippe Simonnet
 
CMSday 2013 - L'accessibilité, au delà des contraintes, un atout pour votre a...
CMSday 2013 - L'accessibilité, au delà des contraintes, un atout pour votre a...CMSday 2013 - L'accessibilité, au delà des contraintes, un atout pour votre a...
CMSday 2013 - L'accessibilité, au delà des contraintes, un atout pour votre a...
Smile I.T is open
 

Similaire à Accessibilité sur le web : astuces et bonnes pratiques pour des sites accessibles (20)

Accessibilité web pour les édimestres
Accessibilité web pour les édimestres Accessibilité web pour les édimestres
Accessibilité web pour les édimestres
 
Mobile et accessibilité, une partie à Troie
Mobile et accessibilité, une partie à TroieMobile et accessibilité, une partie à Troie
Mobile et accessibilité, une partie à Troie
 
Accessiblite Web, Idées reçues, enjeux, implications et bénéfices
Accessiblite Web, Idées reçues, enjeux, implications et bénéficesAccessiblite Web, Idées reçues, enjeux, implications et bénéfices
Accessiblite Web, Idées reçues, enjeux, implications et bénéfices
 
Formation bien démarrer sur internet
Formation bien démarrer sur internetFormation bien démarrer sur internet
Formation bien démarrer sur internet
 
Livre blanc : Accessibilité Web, Guide pour la conception de sites web access...
Livre blanc : Accessibilité Web, Guide pour la conception de sites web access...Livre blanc : Accessibilité Web, Guide pour la conception de sites web access...
Livre blanc : Accessibilité Web, Guide pour la conception de sites web access...
 
Votre portail web respecte-t-il le référentiel général d'accessibilité ?
Votre portail web respecte-t-il le référentiel général d'accessibilité ?Votre portail web respecte-t-il le référentiel général d'accessibilité ?
Votre portail web respecte-t-il le référentiel général d'accessibilité ?
 
CMSday 2013 - Usines à sites : Quelles sont les approches possibles ?
CMSday 2013 - Usines à sites : Quelles sont les approches possibles ?CMSday 2013 - Usines à sites : Quelles sont les approches possibles ?
CMSday 2013 - Usines à sites : Quelles sont les approches possibles ?
 
Ergonomie web
Ergonomie webErgonomie web
Ergonomie web
 
2016 Création Refonte Site
2016 Création Refonte Site2016 Création Refonte Site
2016 Création Refonte Site
 
Cours ergonomie des IHM web - Chapitre 5 - Les règles de l'ergonomie web
Cours ergonomie des IHM web - Chapitre 5 - Les règles de l'ergonomie webCours ergonomie des IHM web - Chapitre 5 - Les règles de l'ergonomie web
Cours ergonomie des IHM web - Chapitre 5 - Les règles de l'ergonomie web
 
Référencement avec Joomla - SEO Camp
Référencement avec Joomla - SEO CampRéférencement avec Joomla - SEO Camp
Référencement avec Joomla - SEO Camp
 
Semantic Information Systems
Semantic Information SystemsSemantic Information Systems
Semantic Information Systems
 
Sem info system_2012
Sem info system_2012Sem info system_2012
Sem info system_2012
 
10 bénéfices d'une bonne architecture d'information - Webinar Yellow Dolphin...
10 bénéfices d'une bonne architecture d'information -  Webinar Yellow Dolphin...10 bénéfices d'une bonne architecture d'information -  Webinar Yellow Dolphin...
10 bénéfices d'une bonne architecture d'information - Webinar Yellow Dolphin...
 
L'accessibilité, au-delà des contraintes, un atout pour votre audience Avanta...
L'accessibilité, au-delà des contraintes, un atout pour votre audience Avanta...L'accessibilité, au-delà des contraintes, un atout pour votre audience Avanta...
L'accessibilité, au-delà des contraintes, un atout pour votre audience Avanta...
 
Dessin de pages web 536
Dessin de pages web 536Dessin de pages web 536
Dessin de pages web 536
 
Site dédié aux publics handicapés du Centre Pompidou : démarche et bilan
Site dédié aux publics handicapés du Centre Pompidou : démarche et bilanSite dédié aux publics handicapés du Centre Pompidou : démarche et bilan
Site dédié aux publics handicapés du Centre Pompidou : démarche et bilan
 
Responsive logic - Kiwiparty
Responsive logic - KiwipartyResponsive logic - Kiwiparty
Responsive logic - Kiwiparty
 
L'accessibilité : un truc réservé aux riches ?
L'accessibilité : un truc réservé aux riches ?L'accessibilité : un truc réservé aux riches ?
L'accessibilité : un truc réservé aux riches ?
 
CMSday 2013 - L'accessibilité, au delà des contraintes, un atout pour votre a...
CMSday 2013 - L'accessibilité, au delà des contraintes, un atout pour votre a...CMSday 2013 - L'accessibilité, au delà des contraintes, un atout pour votre a...
CMSday 2013 - L'accessibilité, au delà des contraintes, un atout pour votre a...
 

Plus de Ametys

Livre blanc : Les tendances du web design 2018
Livre blanc : Les tendances du web design 2018Livre blanc : Les tendances du web design 2018
Livre blanc : Les tendances du web design 2018
Ametys
 
Refonte intranet Open Source avec Ametys, retour d'expérience du Conseil Géné...
Refonte intranet Open Source avec Ametys, retour d'expérience du Conseil Géné...Refonte intranet Open Source avec Ametys, retour d'expérience du Conseil Géné...
Refonte intranet Open Source avec Ametys, retour d'expérience du Conseil Géné...
Ametys
 
Refonte intranet du Conseil Général de la Drôme avec le CMS open source Amety...
Refonte intranet du Conseil Général de la Drôme avec le CMS open source Amety...Refonte intranet du Conseil Général de la Drôme avec le CMS open source Amety...
Refonte intranet du Conseil Général de la Drôme avec le CMS open source Amety...
Ametys
 
Mettre en place un portail Internet / Intranet interfaçé avec son SI - CoTer ...
Mettre en place un portail Internet / Intranet interfaçé avec son SI - CoTer ...Mettre en place un portail Internet / Intranet interfaçé avec son SI - CoTer ...
Mettre en place un portail Internet / Intranet interfaçé avec son SI - CoTer ...
Ametys
 
Gestion multisites - Retours d'expérience et solutions avec le CMS Ametys - C...
Gestion multisites - Retours d'expérience et solutions avec le CMS Ametys - C...Gestion multisites - Retours d'expérience et solutions avec le CMS Ametys - C...
Gestion multisites - Retours d'expérience et solutions avec le CMS Ametys - C...
Ametys
 
Ametys - Integrer votre CMS à votre système d’information
Ametys - Integrer votre CMS à votre système d’informationAmetys - Integrer votre CMS à votre système d’information
Ametys - Integrer votre CMS à votre système d’information
Ametys
 
Social Media : 6 étapes pour réussir votre stratégie sur les médias sociaux
Social Media : 6 étapes pour réussir votre stratégie sur les médias sociauxSocial Media : 6 étapes pour réussir votre stratégie sur les médias sociaux
Social Media : 6 étapes pour réussir votre stratégie sur les médias sociaux
Ametys
 
10 astuces pour bien utiliser Twitter
10 astuces pour bien utiliser Twitter10 astuces pour bien utiliser Twitter
10 astuces pour bien utiliser Twitter
Ametys
 
Ametys CMS Java Open Source : Ergonomie & simplicité d'utilisation
Ametys CMS Java Open Source : Ergonomie & simplicité d'utilisationAmetys CMS Java Open Source : Ergonomie & simplicité d'utilisation
Ametys CMS Java Open Source : Ergonomie & simplicité d'utilisation
Ametys
 
IHM et ergonomie du CMS open source Ametys LTE
IHM et ergonomie du CMS open source Ametys LTEIHM et ergonomie du CMS open source Ametys LTE
IHM et ergonomie du CMS open source Ametys LTE
Ametys
 
Web accessibility with Ametys CMS
Web accessibility with Ametys CMSWeb accessibility with Ametys CMS
Web accessibility with Ametys CMS
Ametys
 
Intégrer votre catalogue de formation en ligne avec Ametys
Intégrer votre catalogue de formation en ligne avec AmetysIntégrer votre catalogue de formation en ligne avec Ametys
Intégrer votre catalogue de formation en ligne avec Ametys
Ametys
 
Principales fonctionnalités du CMS Ametys
Principales fonctionnalités du CMS AmetysPrincipales fonctionnalités du CMS Ametys
Principales fonctionnalités du CMS Ametys
Ametys
 

Plus de Ametys (13)

Livre blanc : Les tendances du web design 2018
Livre blanc : Les tendances du web design 2018Livre blanc : Les tendances du web design 2018
Livre blanc : Les tendances du web design 2018
 
Refonte intranet Open Source avec Ametys, retour d'expérience du Conseil Géné...
Refonte intranet Open Source avec Ametys, retour d'expérience du Conseil Géné...Refonte intranet Open Source avec Ametys, retour d'expérience du Conseil Géné...
Refonte intranet Open Source avec Ametys, retour d'expérience du Conseil Géné...
 
Refonte intranet du Conseil Général de la Drôme avec le CMS open source Amety...
Refonte intranet du Conseil Général de la Drôme avec le CMS open source Amety...Refonte intranet du Conseil Général de la Drôme avec le CMS open source Amety...
Refonte intranet du Conseil Général de la Drôme avec le CMS open source Amety...
 
Mettre en place un portail Internet / Intranet interfaçé avec son SI - CoTer ...
Mettre en place un portail Internet / Intranet interfaçé avec son SI - CoTer ...Mettre en place un portail Internet / Intranet interfaçé avec son SI - CoTer ...
Mettre en place un portail Internet / Intranet interfaçé avec son SI - CoTer ...
 
Gestion multisites - Retours d'expérience et solutions avec le CMS Ametys - C...
Gestion multisites - Retours d'expérience et solutions avec le CMS Ametys - C...Gestion multisites - Retours d'expérience et solutions avec le CMS Ametys - C...
Gestion multisites - Retours d'expérience et solutions avec le CMS Ametys - C...
 
Ametys - Integrer votre CMS à votre système d’information
Ametys - Integrer votre CMS à votre système d’informationAmetys - Integrer votre CMS à votre système d’information
Ametys - Integrer votre CMS à votre système d’information
 
Social Media : 6 étapes pour réussir votre stratégie sur les médias sociaux
Social Media : 6 étapes pour réussir votre stratégie sur les médias sociauxSocial Media : 6 étapes pour réussir votre stratégie sur les médias sociaux
Social Media : 6 étapes pour réussir votre stratégie sur les médias sociaux
 
10 astuces pour bien utiliser Twitter
10 astuces pour bien utiliser Twitter10 astuces pour bien utiliser Twitter
10 astuces pour bien utiliser Twitter
 
Ametys CMS Java Open Source : Ergonomie & simplicité d'utilisation
Ametys CMS Java Open Source : Ergonomie & simplicité d'utilisationAmetys CMS Java Open Source : Ergonomie & simplicité d'utilisation
Ametys CMS Java Open Source : Ergonomie & simplicité d'utilisation
 
IHM et ergonomie du CMS open source Ametys LTE
IHM et ergonomie du CMS open source Ametys LTEIHM et ergonomie du CMS open source Ametys LTE
IHM et ergonomie du CMS open source Ametys LTE
 
Web accessibility with Ametys CMS
Web accessibility with Ametys CMSWeb accessibility with Ametys CMS
Web accessibility with Ametys CMS
 
Intégrer votre catalogue de formation en ligne avec Ametys
Intégrer votre catalogue de formation en ligne avec AmetysIntégrer votre catalogue de formation en ligne avec Ametys
Intégrer votre catalogue de formation en ligne avec Ametys
 
Principales fonctionnalités du CMS Ametys
Principales fonctionnalités du CMS AmetysPrincipales fonctionnalités du CMS Ametys
Principales fonctionnalités du CMS Ametys
 

Accessibilité sur le web : astuces et bonnes pratiques pour des sites accessibles

  • 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