Transcript Presentation-T3UNI11

TYPO3
Et
L’accessibilité
30.06.2011
Aude JOLY <[email protected]>
Aude JOLY
Ingénieur en développement, chef d’équipe et chef de
projets
E-magineurs
Profil : Développeur, intégrateur TYPO3
Certifiée TYPO3 Integrator
T3UNI 2011
TYPO3 et l’accessibilité
30.06.2011
Plan de la conférence
Introduction
La charte graphique
L’intégration du code HTML et des feuilles de style CSS
Les contenus du site
Le javascript, les contenus de type médias et cartes interactives
Extensions utiles
T3UNI 2011
TYPO3 et l’accessibilité
30.06.2011
Introduction
L’accessibilité : une problématique du web actuel à prendre
en compte à chaque étape d’un projet
Un site accessible, pourquoi déjà ?
« Le pouvoir du web, c’est son universalité »
Tim Berners Lee, directeur du W3C
Pour les collectivités locales :
Article 47 de la loi n° 2005-102 du 11 février 2005
Décret n°2009-546 du 14 mai 2009
T3UNI 2011
TYPO3 et l’accessibilité
30.06.2011
Pour les entreprises privées :
Projet fédérateur
Visibilité
Interopérabilité
Contenus
Ergonomie
Réduction des coûts
Image
T3UNI 2011
TYPO3 et l’accessibilité
30.06.2011
Les référentiels
WCAG : Référence de base
http://www.w3.org/TR/WCAG20/
RGAA : Référence pour les sites de collectivités locales
http://references.modernisation.gouv.fr/rgaa-accessibilite
ACCESSIWEB : Méthodologie pratique et applicable
http://www.braillenet.org/accessibilite/referentiel-aw21/
T3UNI 2011
TYPO3 et l’accessibilité
30.06.2011
Les outils indispensables
Evaluer l’accessibilité d’un site, c’est beaucoup de bon sens,
aidé par des outils adaptés !
Firebug
Wcag Contrast Checker
Web developper
T3UNI 2011
TYPO3 et l’accessibilité
30.06.2011
La charte graphique
Dès la conception de la charte graphique, la problématique
de l’accessibilité est posée
Les couleurs
Contrastes texte et fond
L’information et la couleur
T3UNI 2011
TYPO3 et l’accessibilité
30.06.2011
Réfléchir à l’intégration
La structure de votre site dépend directement de la charte graphique ; pour pouvoir avoir une
structure correcte, votre charte doit le permettre !
Les titres
Les formulaires
Les menus
Les blocs de contenu
T3UNI 2011
TYPO3 et l’accessibilité
30.06.2011
L’intégration du code HTML et des feuilles de style CSS
La base d’un site accessible : un code HTML et CSS adaptés
!
Créer un code robuste et valide selon les normes du W3C
Html : http://validator.w3.org/
Css : http://jigsaw.w3.org/css-
validator/#validate_by_uri+with_options
T3UNI 2011
TYPO3 et l’accessibilité
30.06.2011
Adapter son code Typoscript
Définir le doktype, le codage utilisé et la langue
du site web :
config {
xmlprologue = none
xhtml_cleaning = all
doctype = xhtml_trans
language = fr
locale_all = fr_FR
htmlTag_langKey = fr
}
T3UNI 2011
TYPO3 et l’accessibilité
30.06.2011
Configurer le RTE
Un RTE bien configuré permet à vos contributeurs d’écrire des contenus adaptés.
T3UNI 2011
TYPO3 et l’accessibilité
30.06.2011
Les contenus du site
Vous avez créé un site accessible,
C’est maintenant aux contributeurs d’agir !
Ecrire des contenus accessibles
Titrage adapté
Listes
Alternatives et images
Fichiers téléchargeables
T3UNI 2011
TYPO3 et l’accessibilité
30.06.2011
Sensibilisez vos contributeurs
Organisez une formation
Responsabilisez les
Fournissez des documents d’aide
Charte éditoriale
T3UNI 2011
TYPO3 et l’accessibilité
30.06.2011
Le javascript, les contenus de type médias et cartes interactives
Comment faire avec des problématiques comme la
cartographie, le javascript / AJAX ou les contraintes
difficilement implémentables ?
Les contenus de type Flash
L’alternative est la réponse ! Adaptez la à votre contenu
Une animation d’illustration
Une animation apportant
de l’information
T3UNI 2011
TYPO3 et l’accessibilité
30.06.2011
Les cartographies type Googlemap
Quelle alternative à une carte type Google ?
Coordonnées GPS téléchargeables
Listes
Information complémentaire
T3UNI 2011
TYPO3 et l’accessibilité
30.06.2011
La vidéo
Des informations complémentaires entraînant un surcoût… Que faire ?
Transcription textuelle
Audio-description, sous-titres
synchronisés, langue des signes
La déclaration partielle de conformité
T3UNI 2011
TYPO3 et l’accessibilité
30.06.2011
Le javascript et l’AJAX
Toujours le même réflexe, l’alternative implémentée de façon pertinente
Traitement côté serveur
ARIA
T3UNI 2011
TYPO3 et l’accessibilité
30.06.2011
Extensions utiles
Le TER fournit un certain nombre d’extensions, n’hésitez
pas à les adapter !
Le glossaire
Il vous permet de donner la possibilité à vos contributeurs de renseigner les abréviations, et
aide à la compréhension du contenu
Avec Templavoila :
Sans Templavoila :
Sg_glossary
Accessibility Glossary
mr_glossary
A21glossary Advanced Output
T3UNI 2011
TYPO3 et l’accessibilité
30.06.2011
Le moteur de recherche
Indexed_search, une solution standard dans TYPO3
et accessible
Penser à indiquer les règles
Revoir le template HTML pour
adapter le formulaire
T3UNI 2011
TYPO3 et l’accessibilité
30.06.2011
Les formulaires
Powermail, une solution puissante et accessible
Vérification javascript & PHP
HTML généré adapté
Page intermédiaire pour la
validation des résultats
T3UNI 2011
TYPO3 et l’accessibilité
30.06.2011
Actualités et calendrier
Tt_news, newscalendar et extension E-magineurs
Optimisez votre TS et vos templates HTML
Adaptez l’utilisation des extensions pour les rendre
accessible
T3UNI 2011
TYPO3 et l’accessibilité
30.06.2011
Ajout de vidéo
Extension E-magineurs ou intégration Youtube / Dailymotion
Une extension développée pour respecter les normes
L’alternative Youtube / Dailymotion
T3UNI 2011
TYPO3 et l’accessibilité
30.06.2011
Ajouter des raccourcis clavier avec cron_accessiblemenu
Une solution peu utilisée mais souvent demandée
Ajoute automatiquement un raccourci clavier sur vos
menus générés
T3UNI 2011
TYPO3 et l’accessibilité
30.06.2011
Questions / Réponses
T3UNI 2011
TYPO3 et l’accessibilité
30.06.2011
Merci
Aude JOLY <[email protected]>
T3UNI 2011
TYPO3 et l’accessibilité
30.06.2011