20   étapes indispensables        pour rendre son site Web         (presque) accessible             Pour les CMS TYPO3 et ...
L’accessibilité web c’est mettre le web et sesservices à la disposition de tous les individus,quel que soit leur matériel ...
CMS : Content Management System => SGC : Système de Gestion de Contenu                ✔ Ajouter, éditer, supprimer        ...
Des exemples basés sur 3 SGC opensource      Buddypress         Site officiel : http://www.buddypress.org/         Francop...
PHP / Plugin    Étape 1 : Des titres de pages bien structurés  Typoscript / Extension
Plugin         Étape 2 : Bien coder ses métadonnéesTyposcript / Extension
Interne / HTML-PHP    Étape 3 : Organiser sa page grâce aux en­têtesTyposcript / Interne / HTML
HTML-PHP        Étape 4 : Proposer des liens dévitementHTML / Typoscript
Extension / PHP        Étape 5 : Un plan du site toujours disponibleExtension / Typoscript
PHP       Étape 6 : Créer des menus explicitesTyposcript
PHP / Plugin        Étape 7 : Un fil dariane visibleTyposcript
Étape 8 : Naviguer au clavier facilement
Plugin        Étape 9 : Des images descriptivesTyposcriptTyposcript
Étape 10 : Des liens pertinentsTyposcript
http://codegrad.hub.ph/marking-external-links-icon-wordpress/                                                             ...
Plugin        Étape 12 : Informations sur vos fichiersTyposcript / Extension
??        Étape 13 : Acronyme et définitionExtension
??   Étape 14 : Prévenir de tout changement de langueTSConfig Page
??   Étape 15 : Formatage des tableaux de donnéesTSConfig Page
??   Étape 16 : Gérer les erreurs dans vos formulairesExtension / PHP
??   Étape 17 : Champs obligatoires dans les formulairesExtension        Avec CSS                            Sans CSS
Étape 18 : Augmenter la taille du texteExtension
Étape 19 : Équivalent textuel et sous­titrage pour vos vidéos Extension                  Lecteur vidéo accessible (source ...
??            Étape 20 : Raccourcis claviersTyposcript / Extension
T3 pour TYPO3 / WP pour Wordpress StandardsStandard SGQRI 008 : http://www.msg.gouv.qc.ca/normalisation/standards/accessib...
T3 pour TYPO3 / WP pour Wordpress  Description longue(WP) http://wordpress.org/extend/plugins/long-description-for-image-a...
T3 pour TYPO3 / WP pour Wordpress  Raccourcis clavier(T3) http://typo3.org/extensions/repository/view/cron_accessiblemenus...
Visitez   http://www.sys-tech.net/                   et http://www.zerozerohuit.com/Version audio :http://www.zerozerohuit...
Rendre son CMS conforme au SGQRI 008 en 20 étapes
Prochain SlideShare
Chargement dans…5
×

Rendre son CMS conforme au SGQRI 008 en 20 étapes

1 616 vues

Publié le

Publié dans : Technologie
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Rendre son CMS conforme au SGQRI 008 en 20 étapes

  1. 1. 20 étapes indispensables pour rendre son site Web (presque) accessible Pour les CMS TYPO3 et … Wordpress/BuddyPress
  2. 2. L’accessibilité web c’est mettre le web et sesservices à la disposition de tous les individus,quel que soit leur matériel ou logiciel, leurinfrastructure réseau, leur langue maternelle,leur culture, leur localisation géographique, ouleurs aptitudes physiques ou mentales. Tim Berners-Lee
  3. 3. CMS : Content Management System => SGC : Système de Gestion de Contenu ✔ Ajouter, éditer, supprimer ✔ Gestion des droits ✔ Blogue ✔ Présentation (thème) ✔ Texte (brut, html, pdf, ..) ✔ Portail ✔ Image (jpg, gif, etc ..) ... ✔ Wiki ✔ Audio, vidéo ✔ Groupware ✔ Fils rss ... ...
  4. 4. Des exemples basés sur 3 SGC opensource Buddypress Site officiel : http://www.buddypress.org/ Francophone : http://www.bp-fr.net/ Wordpress Site officiel : http://www.wordpress.org/ Francophone : http://www.wordpress-fr.net/ TYPO3 Site officiel : http://www.typo3.org/ Francophone : http://www.typo3-fr.org/
  5. 5. PHP / Plugin Étape 1 : Des titres de pages bien structurés  Typoscript / Extension
  6. 6. Plugin Étape 2 : Bien coder ses métadonnéesTyposcript / Extension
  7. 7. Interne / HTML-PHP Étape 3 : Organiser sa page grâce aux en­têtesTyposcript / Interne / HTML
  8. 8. HTML-PHP Étape 4 : Proposer des liens dévitementHTML / Typoscript
  9. 9. Extension / PHP Étape 5 : Un plan du site toujours disponibleExtension / Typoscript
  10. 10. PHP Étape 6 : Créer des menus explicitesTyposcript
  11. 11. PHP / Plugin Étape 7 : Un fil dariane visibleTyposcript
  12. 12. Étape 8 : Naviguer au clavier facilement
  13. 13. Plugin Étape 9 : Des images descriptivesTyposcriptTyposcript
  14. 14. Étape 10 : Des liens pertinentsTyposcript
  15. 15. http://codegrad.hub.ph/marking-external-links-icon-wordpress/ Plugin / PHP Étape 11 : Indiquez les sites externesTyposcript / Extension
  16. 16. Plugin Étape 12 : Informations sur vos fichiersTyposcript / Extension
  17. 17. ?? Étape 13 : Acronyme et définitionExtension
  18. 18. ?? Étape 14 : Prévenir de tout changement de langueTSConfig Page
  19. 19. ?? Étape 15 : Formatage des tableaux de donnéesTSConfig Page
  20. 20. ?? Étape 16 : Gérer les erreurs dans vos formulairesExtension / PHP
  21. 21. ?? Étape 17 : Champs obligatoires dans les formulairesExtension Avec CSS Sans CSS
  22. 22. Étape 18 : Augmenter la taille du texteExtension
  23. 23. Étape 19 : Équivalent textuel et sous­titrage pour vos vidéos Extension Lecteur vidéo accessible (source : www.cnt.gouv.qc.ca)
  24. 24. ?? Étape 20 : Raccourcis claviersTyposcript / Extension
  25. 25. T3 pour TYPO3 / WP pour Wordpress StandardsStandard SGQRI 008 : http://www.msg.gouv.qc.ca/normalisation/standards/accessibilite/WCAG 2.0 (fr) : http://www.braillenet.org/accessibilite/wcag20/ Titre des pages et métadonnées(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/ Plan du site(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/ Fil dariane(WP) http://mtekk.us/code/breadcrumb-navxt/
  26. 26. T3 pour TYPO3 / WP pour Wordpress Description longue(WP) http://wordpress.org/extend/plugins/long-description-for-image-attachments/ Liens externes et fichiers (pdf ,..)(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/ Acronyme et lexique(T3) http://typo3.org/extensions/repository/view/contagged/current/ Formulaire(T3) http://typo3.org/extensions/repository/view/powermail/current/(T3) http://typo3.org/extensions/repository/view/formhandler/current/ Taille du texte(T3) http://typo3.org/extensions/repository/view/efafontsize/current/
  27. 27. T3 pour TYPO3 / WP pour Wordpress Raccourcis clavier(T3) http://typo3.org/extensions/repository/view/cron_accessiblemenus/current/(T3) http://typo3.org/extensions/repository/view/gov_accesskey/current/ Extensions Firefoxhttp://tentatives-accessibles.eu/161-outils-evaluation-amelioration-accessibilite-site-webhttps://addons.mozilla.org/en-US/firefox/addon/fangs-screen-reader-emulator/ Lecteurs décranNVDA : http://www.nvda.fr/JAWS : http://www.freedomsci.de/serv01fra.htm CMSTYPO3 : http://www.typo3.org/Wordpress : http://www.wordpress.org/Buddypress : http://www.buddypress.org/
  28. 28. Visitez http://www.sys-tech.net/ et http://www.zerozerohuit.com/Version audio :http://www.zerozerohuit.com/medias/20_etapes_indispensables_a11y_cms_confoo.mp3

×