20 étapes indispensables pour rendre son site Web accessible (presque)  Pour les CMS TYPO3 et … Wordpress/BuddyPress
 
L’ accessibilité web  c’est mettre le web et ses services à la disposition de  tous les individus , quel que soit leur  ma...
<ul><li>Ajouter, éditer, supprimer
Gestion des droits
Présentation (thème)   ... </li></ul><ul><li>Blogue
Portail
Wiki
Groupware   ... </li></ul><ul><li>Texte (brut, html, pdf, ..)
Image (jpg, gif, etc ..)
Audio, vidéo
Fils rss   ... </li></ul>CMS  : Content Management System    =>  SGC  :  Système  de  Gestion  de  Contenu
Buddypress Site officiel :  http://www.buddypress.org/   Francophone :  http://www.bp-fr.net/ Wordpress Site officiel :  h...
Typoscript / Extension PHP / Plugin Étape 1 : Des titres de pages bien structurés
Typoscript / Extension Étape 2 : Bien coder ses métadonnées Plugin
Typoscript / Interne / HTML Interne / HTML-PHP Étape 3 : Organiser sa page grâce aux en-têtes
HTML / Typoscript HTML-PHP Étape 4 : Proposer des liens d'évitement
Extension / Typoscript Extension / PHP Étape 5 : Un plan du site toujours disponible
Typoscript PHP Étape 6 : Créer des menus explicites
Typoscript PHP / Plugin Étape 7 : Un fil d'ariane visible
Étape 8 : Naviguer au clavier facilement
Typoscript Typoscript Étape 9 : Des images descriptives Plugin
Typoscript Étape 10 : Des liens pertinents
Typoscript / Extension http://codegrad.hub.ph/marking-external-links-icon-wordpress/ Étape 11 : Indiquez les sites externe...
Typoscript / Extension Plugin Étape 12 : Informations sur vos fichiers
Extension ?? Étape 13 : Acronyme et définition
TSConfig Page Étape 14 : Prévenir de tout changement de langue ??
TSConfig Page Étape 15 : Formatage des tableaux de données ??
Extension / PHP Étape 16 : Gérer les erreurs dans vos formulaires ??
Prochain SlideShare
Chargement dans…5
×

L'accessibilité en 20 étapes pour TYPO3 et Wordpress

7 647 vues

Publié le

À l'occasion de la conférence CONFOO, voici une présentation sur l'accessibilité Web et les CMS (TYPO3, Wordpress/BuddyPress).

Publié dans : Technologie, Business
0 commentaire
4 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
7 647
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2 359
Actions
Partages
0
Téléchargements
42
Commentaires
0
J’aime
4
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

L'accessibilité en 20 étapes pour TYPO3 et Wordpress

  1. 1. 20 étapes indispensables pour rendre son site Web accessible (presque) Pour les CMS TYPO3 et … Wordpress/BuddyPress
  2. 3. 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
  3. 4. <ul><li>Ajouter, éditer, supprimer
  4. 5. Gestion des droits
  5. 6. Présentation (thème) ... </li></ul><ul><li>Blogue
  6. 7. Portail
  7. 8. Wiki
  8. 9. Groupware ... </li></ul><ul><li>Texte (brut, html, pdf, ..)
  9. 10. Image (jpg, gif, etc ..)
  10. 11. Audio, vidéo
  11. 12. Fils rss ... </li></ul>CMS : Content Management System => SGC : Système de Gestion de Contenu
  12. 13. 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/ Des exemples basés sur 3 SGC opensource
  13. 14. Typoscript / Extension PHP / Plugin Étape 1 : Des titres de pages bien structurés
  14. 15. Typoscript / Extension Étape 2 : Bien coder ses métadonnées Plugin
  15. 16. Typoscript / Interne / HTML Interne / HTML-PHP Étape 3 : Organiser sa page grâce aux en-têtes
  16. 17. HTML / Typoscript HTML-PHP Étape 4 : Proposer des liens d'évitement
  17. 18. Extension / Typoscript Extension / PHP Étape 5 : Un plan du site toujours disponible
  18. 19. Typoscript PHP Étape 6 : Créer des menus explicites
  19. 20. Typoscript PHP / Plugin Étape 7 : Un fil d'ariane visible
  20. 21. Étape 8 : Naviguer au clavier facilement
  21. 22. Typoscript Typoscript Étape 9 : Des images descriptives Plugin
  22. 23. Typoscript Étape 10 : Des liens pertinents
  23. 24. Typoscript / Extension http://codegrad.hub.ph/marking-external-links-icon-wordpress/ Étape 11 : Indiquez les sites externes Plugin / PHP
  24. 25. Typoscript / Extension Plugin Étape 12 : Informations sur vos fichiers
  25. 26. Extension ?? Étape 13 : Acronyme et définition
  26. 27. TSConfig Page Étape 14 : Prévenir de tout changement de langue ??
  27. 28. TSConfig Page Étape 15 : Formatage des tableaux de données ??
  28. 29. Extension / PHP Étape 16 : Gérer les erreurs dans vos formulaires ??
  29. 30. Extension Étape 17 : Champs obligatoires dans les formulaires Avec CSS Sans CSS ??
  30. 31. Extension Étape 18 : Augmenter la taille du texte
  31. 32. Extension Étape 19 : Équivalent textuel et sous-titrage pour vos vidéos Lecteur vidéo accessible (source : www.cnt.gouv.qc.ca)
  32. 33. Typoscript / Extension Étape 20 : Raccourcis claviers ??
  33. 34. 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 pour TYPO3 / WP pour Wordpress (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
  34. 35. (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 (T3) http://typo3.org/extensions/repository/view/contagged/current/ Acronyme et lexique (T3) http://typo3.org/extensions/repository/view/powermail/current/ (T3) http://typo3.org/extensions/repository/view/formhandler/current/ Formulaire (T3) http://typo3.org/extensions/repository/view/efafontsize/current/ Taille du texte
  35. 36. (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 T3 pour TYPO3 / WP pour Wordpress 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/ CMS
  36. 37. 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

×