L'accessibilité Web des CMS...L’accessibilité web c’est mettre le web et ses services à la...

29
L'accessibilité Web des CMS Pour les CMS TYPO3, Drupal ...Wordpress/BuddyPress

Transcript of L'accessibilité Web des CMS...L’accessibilité web c’est mettre le web et ses services à la...

Page 1: L'accessibilité Web des CMS...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

L'accessibilité Web des CMS

Pour les CMS TYPO3, Drupal ...Wordpress/BuddyPress

Page 2: L'accessibilité Web des CMS...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
Page 3: L'accessibilité Web des CMS...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

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 CMS...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

✔ 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 CMS...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

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 CMS...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

Typoscript / Extension

PHP / Plugin

Étape 1 : Des titres de pages bien structurés  

Page 7: L'accessibilité Web des CMS...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

Typoscript / Extension

Étape 2 : Bien coder ses métadonnées

Plugin

Page 8: L'accessibilité Web des CMS...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

Typoscript / Interne / HTML

Interne / HTML-PHP

Étape 3 : Organiser sa page grâce aux en­têtes

Page 9: L'accessibilité Web des CMS...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

HTML / Typoscript

HTML-PHP

Étape 4 : Proposer des liens d'évitement

Page 10: L'accessibilité Web des CMS...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

Extension / Typoscript

Extension / PHP

Étape 5 : Un plan du site toujours disponible

Page 11: L'accessibilité Web des CMS...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

Typoscript

PHP

Étape 6 : Créer des menus explicites

Page 12: L'accessibilité Web des CMS...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

Typoscript

PHP / Plugin

Étape 7 : Un fil d'ariane visible

Page 13: L'accessibilité Web des CMS...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

Étape 8 : Naviguer au clavier facilement

Page 14: L'accessibilité Web des CMS...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

TyposcriptTyposcript

Étape 9 : Des images descriptives

Plugin

Page 15: L'accessibilité Web des CMS...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

Typoscript

Étape 10 : Des liens pertinents

Page 16: L'accessibilité Web des CMS...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

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 CMS...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

Typoscript / Extension

Plugin

Étape 12 : Informations sur vos fichiers

Page 18: L'accessibilité Web des CMS...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

Extension

Module

Étape 13 : Acronyme et définition

Page 19: L'accessibilité Web des CMS...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

TSConfig Page

Étape 14 : Prévenir de tout changement de langue

Page 20: L'accessibilité Web des CMS...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

TSConfig Page

Étape 15 : Formatage des tableaux de données

Module

Page 21: L'accessibilité Web des CMS...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

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 CMS...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

Extension

Étape 18 : Augmenter la taille du texte

Module

Indépendantdu Javascript

Page 23: L'accessibilité Web des CMS...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

Extension

Étape 19 : Équivalent textuel et sous­titrage pour vos vidéos

Module

Page 24: L'accessibilité Web des CMS...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

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 CMS...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

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 CMS...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

(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 CMS...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

(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 CMS...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

(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 CMS...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

Visitez http://www.zerozerohuit.com/

Version audio :

http://www.zerozerohuit.com/medias/20_etapes_indispensables_a11y_cms_confoo.mp3