l'accessibilité web des...
TRANSCRIPT
![Page 1: L'accessibilité Web des CMS2011.rmll.info/IMG/pdf/L_accessibilite_Web_des_CMS_-_RMLL2011.pdf · L’accessibilité web c’est mettre le web et ses services à la disposition de](https://reader034.vdocuments.net/reader034/viewer/2022050102/5f41681e76bb627ca32fe20d/html5/thumbnails/1.jpg)
L'accessibilité Web des CMS
Pour les CMS TYPO3, Drupal ...Wordpress/BuddyPress
![Page 2: L'accessibilité Web des CMS2011.rmll.info/IMG/pdf/L_accessibilite_Web_des_CMS_-_RMLL2011.pdf · L’accessibilité web c’est mettre le web et ses services à la disposition de](https://reader034.vdocuments.net/reader034/viewer/2022050102/5f41681e76bb627ca32fe20d/html5/thumbnails/2.jpg)
![Page 3: L'accessibilité Web des CMS2011.rmll.info/IMG/pdf/L_accessibilite_Web_des_CMS_-_RMLL2011.pdf · L’accessibilité web c’est mettre le web et ses services à la disposition de](https://reader034.vdocuments.net/reader034/viewer/2022050102/5f41681e76bb627ca32fe20d/html5/thumbnails/3.jpg)
L’accessibilité web c’est mettre le web et ses services à la disposition de 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
![Page 4: L'accessibilité Web des CMS2011.rmll.info/IMG/pdf/L_accessibilite_Web_des_CMS_-_RMLL2011.pdf · L’accessibilité web c’est mettre le web et ses services à la disposition de](https://reader034.vdocuments.net/reader034/viewer/2022050102/5f41681e76bb627ca32fe20d/html5/thumbnails/4.jpg)
✔ Ajouter, éditer, supprimer✔ Gestion des droits✔ Présentation (thème) ...
✔ Blogue✔ Portail✔ Wiki✔ Groupware ...
✔ Texte (brut, html, pdf, ..)✔ Image (jpg, gif, etc ..)✔ Audio, vidéo✔ Fils rss ...
CMS : Content Management System => SGC : Système de Gestion de Contenu
![Page 5: L'accessibilité Web des CMS2011.rmll.info/IMG/pdf/L_accessibilite_Web_des_CMS_-_RMLL2011.pdf · L’accessibilité web c’est mettre le web et ses services à la disposition de](https://reader034.vdocuments.net/reader034/viewer/2022050102/5f41681e76bb627ca32fe20d/html5/thumbnails/5.jpg)
BuddypressSite officiel : http://www.buddypress.org/
Francophone : http://www.bp-fr.net/
WordpressSite officiel : http://www.wordpress.org/
Francophone : http://www.wordpress-fr.net/
TYPO3Site officiel : http://www.typo3.org/
Francophone : http://www.typo3-fr.org/
Des exemples basés sur 4 SGC opensource
DrupalSite officiel : http://drupal.org/
Francophone : http://drupalfr.org/
![Page 6: L'accessibilité Web des CMS2011.rmll.info/IMG/pdf/L_accessibilite_Web_des_CMS_-_RMLL2011.pdf · L’accessibilité web c’est mettre le web et ses services à la disposition de](https://reader034.vdocuments.net/reader034/viewer/2022050102/5f41681e76bb627ca32fe20d/html5/thumbnails/6.jpg)
Typoscript / Extension
PHP / Plugin
Étape 1 : Des titres de pages bien structurés
![Page 7: L'accessibilité Web des CMS2011.rmll.info/IMG/pdf/L_accessibilite_Web_des_CMS_-_RMLL2011.pdf · L’accessibilité web c’est mettre le web et ses services à la disposition de](https://reader034.vdocuments.net/reader034/viewer/2022050102/5f41681e76bb627ca32fe20d/html5/thumbnails/7.jpg)
Typoscript / Extension
Étape 2 : Bien coder ses métadonnées
Plugin
![Page 8: L'accessibilité Web des CMS2011.rmll.info/IMG/pdf/L_accessibilite_Web_des_CMS_-_RMLL2011.pdf · L’accessibilité web c’est mettre le web et ses services à la disposition de](https://reader034.vdocuments.net/reader034/viewer/2022050102/5f41681e76bb627ca32fe20d/html5/thumbnails/8.jpg)
Typoscript / Interne / HTML
Interne / HTML-PHP
Étape 3 : Organiser sa page grâce aux entêtes
![Page 9: L'accessibilité Web des CMS2011.rmll.info/IMG/pdf/L_accessibilite_Web_des_CMS_-_RMLL2011.pdf · L’accessibilité web c’est mettre le web et ses services à la disposition de](https://reader034.vdocuments.net/reader034/viewer/2022050102/5f41681e76bb627ca32fe20d/html5/thumbnails/9.jpg)
HTML / Typoscript
HTML-PHP
Étape 4 : Proposer des liens d'évitement
![Page 10: L'accessibilité Web des CMS2011.rmll.info/IMG/pdf/L_accessibilite_Web_des_CMS_-_RMLL2011.pdf · L’accessibilité web c’est mettre le web et ses services à la disposition de](https://reader034.vdocuments.net/reader034/viewer/2022050102/5f41681e76bb627ca32fe20d/html5/thumbnails/10.jpg)
Extension / Typoscript
Extension / PHP
Étape 5 : Un plan du site toujours disponible
![Page 11: L'accessibilité Web des CMS2011.rmll.info/IMG/pdf/L_accessibilite_Web_des_CMS_-_RMLL2011.pdf · L’accessibilité web c’est mettre le web et ses services à la disposition de](https://reader034.vdocuments.net/reader034/viewer/2022050102/5f41681e76bb627ca32fe20d/html5/thumbnails/11.jpg)
Typoscript
PHP
Étape 6 : Créer des menus explicites
![Page 12: L'accessibilité Web des CMS2011.rmll.info/IMG/pdf/L_accessibilite_Web_des_CMS_-_RMLL2011.pdf · L’accessibilité web c’est mettre le web et ses services à la disposition de](https://reader034.vdocuments.net/reader034/viewer/2022050102/5f41681e76bb627ca32fe20d/html5/thumbnails/12.jpg)
Typoscript
PHP / Plugin
Étape 7 : Un fil d'ariane visible
![Page 13: L'accessibilité Web des CMS2011.rmll.info/IMG/pdf/L_accessibilite_Web_des_CMS_-_RMLL2011.pdf · L’accessibilité web c’est mettre le web et ses services à la disposition de](https://reader034.vdocuments.net/reader034/viewer/2022050102/5f41681e76bb627ca32fe20d/html5/thumbnails/13.jpg)
Étape 8 : Naviguer au clavier facilement
![Page 14: L'accessibilité Web des CMS2011.rmll.info/IMG/pdf/L_accessibilite_Web_des_CMS_-_RMLL2011.pdf · L’accessibilité web c’est mettre le web et ses services à la disposition de](https://reader034.vdocuments.net/reader034/viewer/2022050102/5f41681e76bb627ca32fe20d/html5/thumbnails/14.jpg)
TyposcriptTyposcript
Étape 9 : Des images descriptives
Plugin
![Page 15: L'accessibilité Web des CMS2011.rmll.info/IMG/pdf/L_accessibilite_Web_des_CMS_-_RMLL2011.pdf · L’accessibilité web c’est mettre le web et ses services à la disposition de](https://reader034.vdocuments.net/reader034/viewer/2022050102/5f41681e76bb627ca32fe20d/html5/thumbnails/15.jpg)
Typoscript
Étape 10 : Des liens pertinents
![Page 16: L'accessibilité Web des CMS2011.rmll.info/IMG/pdf/L_accessibilite_Web_des_CMS_-_RMLL2011.pdf · L’accessibilité web c’est mettre le web et ses services à la disposition de](https://reader034.vdocuments.net/reader034/viewer/2022050102/5f41681e76bb627ca32fe20d/html5/thumbnails/16.jpg)
Typoscript / Extension
http://codegrad.hub.ph/marking-external-links-icon-wordpress/
Étape 11 : Indiquez les sites externes
Plugin / PHP
![Page 17: L'accessibilité Web des CMS2011.rmll.info/IMG/pdf/L_accessibilite_Web_des_CMS_-_RMLL2011.pdf · L’accessibilité web c’est mettre le web et ses services à la disposition de](https://reader034.vdocuments.net/reader034/viewer/2022050102/5f41681e76bb627ca32fe20d/html5/thumbnails/17.jpg)
Typoscript / Extension
Plugin
Étape 12 : Informations sur vos fichiers
![Page 18: L'accessibilité Web des CMS2011.rmll.info/IMG/pdf/L_accessibilite_Web_des_CMS_-_RMLL2011.pdf · L’accessibilité web c’est mettre le web et ses services à la disposition de](https://reader034.vdocuments.net/reader034/viewer/2022050102/5f41681e76bb627ca32fe20d/html5/thumbnails/18.jpg)
Extension
Module
Étape 13 : Acronyme et définition
![Page 19: L'accessibilité Web des CMS2011.rmll.info/IMG/pdf/L_accessibilite_Web_des_CMS_-_RMLL2011.pdf · L’accessibilité web c’est mettre le web et ses services à la disposition de](https://reader034.vdocuments.net/reader034/viewer/2022050102/5f41681e76bb627ca32fe20d/html5/thumbnails/19.jpg)
TSConfig Page
Étape 14 : Prévenir de tout changement de langue
![Page 20: L'accessibilité Web des CMS2011.rmll.info/IMG/pdf/L_accessibilite_Web_des_CMS_-_RMLL2011.pdf · L’accessibilité web c’est mettre le web et ses services à la disposition de](https://reader034.vdocuments.net/reader034/viewer/2022050102/5f41681e76bb627ca32fe20d/html5/thumbnails/20.jpg)
TSConfig Page
Étape 15 : Formatage des tableaux de données
Module
![Page 21: L'accessibilité Web des CMS2011.rmll.info/IMG/pdf/L_accessibilite_Web_des_CMS_-_RMLL2011.pdf · L’accessibilité web c’est mettre le web et ses services à la disposition de](https://reader034.vdocuments.net/reader034/viewer/2022050102/5f41681e76bb627ca32fe20d/html5/thumbnails/21.jpg)
Extension / PHP
Étape 17 : Gérer les erreurs dans vos formulaires
Étape 16 : Champs obligatoires dans les formulaires
Avec CSS Sans CSS
![Page 22: L'accessibilité Web des CMS2011.rmll.info/IMG/pdf/L_accessibilite_Web_des_CMS_-_RMLL2011.pdf · L’accessibilité web c’est mettre le web et ses services à la disposition de](https://reader034.vdocuments.net/reader034/viewer/2022050102/5f41681e76bb627ca32fe20d/html5/thumbnails/22.jpg)
Extension
Étape 18 : Augmenter la taille du texte
Module
Indépendantdu Javascript
![Page 23: L'accessibilité Web des CMS2011.rmll.info/IMG/pdf/L_accessibilite_Web_des_CMS_-_RMLL2011.pdf · L’accessibilité web c’est mettre le web et ses services à la disposition de](https://reader034.vdocuments.net/reader034/viewer/2022050102/5f41681e76bb627ca32fe20d/html5/thumbnails/23.jpg)
Extension
Étape 19 : Équivalent textuel et soustitrage pour vos vidéos
Module
![Page 24: L'accessibilité Web des CMS2011.rmll.info/IMG/pdf/L_accessibilite_Web_des_CMS_-_RMLL2011.pdf · L’accessibilité web c’est mettre le web et ses services à la disposition de](https://reader034.vdocuments.net/reader034/viewer/2022050102/5f41681e76bb627ca32fe20d/html5/thumbnails/24.jpg)
Typoscript / Extension
Étape 21 : Raccourcis claviers
Étape 20 : Contraste des couleurs
Extension
Démo : http://www.zwahlendesign.ch/en/pagestyle
![Page 25: L'accessibilité Web des CMS2011.rmll.info/IMG/pdf/L_accessibilite_Web_des_CMS_-_RMLL2011.pdf · L’accessibilité web c’est mettre le web et ses services à la disposition de](https://reader034.vdocuments.net/reader034/viewer/2022050102/5f41681e76bb627ca32fe20d/html5/thumbnails/25.jpg)
Standard SGQRI 008 : http://www.msg.gouv.qc.ca/normalisation/standards/accessibilite/
WCAG 2.0 (fr) : http://www.braillenet.org/accessibilite/wcag20/
(T3) Extension « browser_page_title »
(T3) http://www.dawsoninteractive.com/articles/article/typo3-seo-part-1-title-tags/
(WP) http://themekraft.com/plugin/seopress/
(T3) http://www.typo3journal.info/articles/typo3-metatags.html
(T3) http://typo3.org/documentation/document-library/extension-manuals/seo_basics/current/
(WP) http://themekraft.com/plugin/seopress/
Titre des pages et métadonnées
Standards
(T3) http://typo3.org/extensions/repository/view/dropdown_sitemap/current/
(WP) http://wpchannel.com/creer-sitemap-plugin-wordpress/
(WP) http://www.dagondesign.com/articles/sitemap-generator-plugin-for-wordpress/
Plan du site
(WP) http://mtekk.us/code/breadcrumb-navxt/
Fil d'ariane
T3 pour TYPO3 / WP pour Wordpress / DP pour Drupal
![Page 26: L'accessibilité Web des CMS2011.rmll.info/IMG/pdf/L_accessibilite_Web_des_CMS_-_RMLL2011.pdf · L’accessibilité web c’est mettre le web et ses services à la disposition de](https://reader034.vdocuments.net/reader034/viewer/2022050102/5f41681e76bb627ca32fe20d/html5/thumbnails/26.jpg)
(WP) http://wordpress.org/extend/plugins/long-description-for-image-attachments/
(WP) http://codegrad.hub.ph/marking-external-links-icon-wordpress/
(WP) http://www.semiologic.com/software/external-links/
(T3) http://typo3.org/extensions/repository/view/ml_links/current/
(WP) http://blog.eagerterrier.co.uk/2010/10/holy-cow-ive-gone-and-made-a-mime-type-wordpress-plugin/
Liens externes et fichiers (pdf ,..)
Description longue
T3 pour TYPO3 / WP pour Wordpress / DP pour Drupal
(T3) http://typo3.org/extensions/repository/view/contagged/current/
(DP) http://drupal.org/project/glossary
Acronyme et lexique
(T3) http://typo3.org/extensions/repository/view/powermail/current/
(T3) http://typo3.org/extensions/repository/view/formhandler/current/
Formulaire
![Page 27: L'accessibilité Web des CMS2011.rmll.info/IMG/pdf/L_accessibilite_Web_des_CMS_-_RMLL2011.pdf · L’accessibilité web c’est mettre le web et ses services à la disposition de](https://reader034.vdocuments.net/reader034/viewer/2022050102/5f41681e76bb627ca32fe20d/html5/thumbnails/27.jpg)
(DP) http://drupal.org/project/media_universalsubtitles (sous-titres)
(DP) http://www.zwahlendesign.ch/en/pagestyle
Contraste des couleurs
Vidéo
T3 pour TYPO3 / WP pour Wordpress / DP pour Drupal
(T3) http://typo3.org/extensions/repository/view/efafontsize/current/
(DP) http://groups.drupal.org/node/85199 (pied de page)
Taille du texte
![Page 28: L'accessibilité Web des CMS2011.rmll.info/IMG/pdf/L_accessibilite_Web_des_CMS_-_RMLL2011.pdf · L’accessibilité web c’est mettre le web et ses services à la disposition de](https://reader034.vdocuments.net/reader034/viewer/2022050102/5f41681e76bb627ca32fe20d/html5/thumbnails/28.jpg)
(T3) http://typo3.org/extensions/repository/view/cron_accessiblemenus/current/
(T3) http://typo3.org/extensions/repository/view/gov_accesskey/current/
http://tentatives-accessibles.eu/161-outils-evaluation-amelioration-accessibilite-site-web
https://addons.mozilla.org/en-US/firefox/addon/fangs-screen-reader-emulator/
Extensions Firefox
Raccourcis clavier
NVDA : http://www.nvda.fr/
JAWS : http://www.freedomsci.de/serv01fra.htm
Lecteurs d'écran
TYPO3 : http://www.typo3.org/
Wordpress : http://www.wordpress.org/
Buddypress : http://www.buddypress.org/
Drupal : http://groups.drupal.org/node/85199 (modules pour l'accessibilité)
CMS
T3 pour TYPO3 / WP pour Wordpress / DP pour Drupal
![Page 29: L'accessibilité Web des CMS2011.rmll.info/IMG/pdf/L_accessibilite_Web_des_CMS_-_RMLL2011.pdf · L’accessibilité web c’est mettre le web et ses services à la disposition de](https://reader034.vdocuments.net/reader034/viewer/2022050102/5f41681e76bb627ca32fe20d/html5/thumbnails/29.jpg)
Visitez http://www.zerozerohuit.com/
Version audio :
http://www.zerozerohuit.com/medias/20_etapes_indispensables_a11y_cms_confoo.mp3