Accessibilit avec TYPO3

1
Accessibilité avec TYPO3

• TYPO3 Summer University 2009 - ANNECY

Date 23/06/09
2
Présentation des intervenants

• Aude Joly

3
Sommaire

• Quest-ce que laccessibilité ?
• le concept
• la cible
• AccessiWeb et WAI, les recommandations
• WAI
• AccessiWeb
• Décret pour les collectivités locales
• Accessibilité appliquée à TYPO3
• Référentiel CMS
• Cas appliqués

4
(No Transcript)
5
I Quest-ce que laccessibilité

• Le concept
• La cible

6
(No Transcript)
7
I.1 Le concept

• Les définitions de laccessibilité
•   Mettre le Web et ses services à la disposition
  de tous les individus, quels que soient leur
  matériel ou logiciel, leur infrastructure réseau,
  leur langue maternelle, leur culture, leur
  localisation géographique, ou leurs aptitudes
  physiques ou mentales.  
•   Le pouvoir du web est dans son universalité.
  Un aspect essentiel est qu'il soit accessible à
  tout le monde quel que soit le handicap.   
•  C'est un enjeu majeur pour le web actuel. 
• Tim Berners Lee, directeur du W3C

8
(No Transcript)
9
I.1 Le concept
ACCEDER PERCEVOIR COMPRENDRE UTILISER

• L'interopérabilité
• Navigateur
• Aide technique
• Ordinateur
• Matériel nomade
• Moyen d'accès
• Le handicap
• Visuel
• Auditif
• Moteur
• Cognitif

• Problématique

• Principes / enjeux

GARANTIR FAVORISER ANTICIPER PARTICIPER CAPITALISE
R
10
(No Transcript)
11
I.2 La cible
Les 6 grandes situations de handicap

• 33 de la population
• 15 des internautes
• 98 des sites webs européens innaccessibles

En France 20 800 000 personnes concernées
1 200 000
1 600 000
4 500 000
9 500 000
12
(No Transcript)
13
II. Accessiweb et WAI, les recommandations

• WAI
• Quest ce que le WAI ?
• Les principes
• AccessiWeb
• Quest ce que Accessiweb ?
• La méthodologie
• Décret pour les collectivités locales

14
(No Transcript)
15
II.1 WAI

• Quest ce que le WAI ?
• Les principes

16
(No Transcript)
17
II.1.1 Quest ce que le WAI ?
R.G.A.A
UWEM 1.0

• Organisme international World Accessibility
  Initiative
• Lancé en 1997 par le W3C
• But proposer des solutions techniques pour
  rendre le web accessible

18
(No Transcript)
19
II.1.2 Les principes

• Les Web Content Accessibility Guideline 2.0
  (W.C.A.G.)
• 2 principes majeurs
• Lutilisation de langages standards
• Lutilisation de CSS pour assurer la mise en page
• Trois niveaux de priorité
• Priorité 1 ce qui doit être fait
• Priorité 2 ce qui devrait être fait
• Priorité 3 ce qui peut être fait
• Un label WAI (Web Accessibility Initiative)
• Validation libre et auto- contrôlée
• Trois niveaux de conformité A, AA, AAA

20
(No Transcript)
21
II.2 Accessiweb

• Quest ce que Accessiweb ?
• La méthodologie

22
(No Transcript)
23
II.2.1 Quest ce que Accessiweb

• Centre de ressources et de recherche sur
  laccessibilité du web proposé par lassociation
  BrailleNet.
• Accessiweb
• Un label avec trois niveaux Bronze, Argent, Or
• Une méthode dapplication
• Réinterpréation de WCAG auxquels se rajoutent des
  items propres à Accessiweb

24
(No Transcript)
25
II.2.2 La méthodologie

• 13 chapitres avec 95 points de contrôle
• Images, cadres, couleurs, mutlimédia, tableaux,
  liens, code exécutable, éléments obligatoires,
  structuration de linformation, présentation de
  linformation, formulaires, navigation,
  consultation
• La labellisation
• Une évaluation menée par 3 experts agréés
• Une labellisation menée par Braillenet
• Un suivi sur une ou deux années avec contrôles
  réguliers et aléatoires

26
(No Transcript)
27
II. 3 Décret pour les collectivités locales

• Le décret (n 2009-546 du 14 mai 2009) qui permet
  lapplication de larticle 47 de la loi n
  2005-102 du 11 février 2005 sur légalité des
  droits et des chances, la participation et la
  citoyenneté des personnes handicapées et créant
  un référentiel daccessibilité des services de
  communication publique en ligne est paru
• Le texte en ligne http//www.legifrance.gouv.fr/
  affichTexte.dojsessionid?cidTexteJORFTEXT000020
  616980dateTexteoldActionrechJOcategorieLieni
  d
• Le référentiel à suivre sera indiqué par décret.
• Si non respect, mise en demeure, puis  liste
  noire . Pas de sanction financière ou pénale.

28
(No Transcript)
29
III. Accessibilité appliquée à Typo3

• Référentiel CMS
• Quest ce que le référentiel CMS ?
• Critères et thématiques
• Cas appliqués
• Contexte
• Accès au backend
• Les liens
• Les images
• Les tableaux
• Les formulaires
• Les vidéos et animations flash

30
(No Transcript)
31
III.1 Référentiel CMS

• Quest ce que le référentiel CMS ?
• Critères et thématiques

32
(No Transcript)
33
III.1.1 Quest ce que le référentiel CMS ?

• http//www.braillenet.org/accessibilite/AccessiWeb
  _CMS_10_public/index.php
• Méthode d'application des normes internationales
  ATAG 1.0 de W3C/WAI pour les CMS utilisables via
  le Web
• Concerne laccessibilité du site sur plusieurs
  niveaux
• Accessibilité du backend
• Possibilité de fournir du contenu accessible
• Laccessibilité du frontend est toujours
  référente aux critères Accessiweb  standards .

34
(No Transcript)
35
III.1.2 Critères et thématiques

• On retrouve les critères généraux du référentiel
   classique 
• Il sajoute des critères daccessibilité sur les
  procédés
• Exemple Chaque procédé d'insertion d'une image
  est-il accessible ?
• Le contributeur doit être en mesure de modifier
  le rendu
• Exemple il peut choisir la balise générée pour
  le titre de la page h1, h2 ?
• Le contenu généré XHTML doit être accessible
  selon les normes du référentiel Accessiweb
• Les gabarits XHTML doivent être accessibles selon
  les normes du référentiel Accessiweb
• Une aide à laccessibilité pour les contributeurs
  doit être disponible

36
(No Transcript)
37
III.2 Cas appliqués

• Contexte
• Accès au backend
• Les liens
• Les images

38
(No Transcript)
39
III.2.1 Contexte

• Objectif donner la méthodologie de test à
  partir du référentiel Accessiweb et du
  référentiel CMS
• Exemple dun critère
• Critère 9.1 Dans le site Web, chaque page Web
  d'un ensemble de pages a-t-elle une présentation
  similaire et une structure similaire ?
• Test 9.1.a Or Dans le site Web, chaque page
  Web d'un ensemble de pages a-t-elle une
  présentation similaire ?
• Test 9.1.b Or Dans le site Web, chaque page
  Web d'un ensemble de pages a-t-elle une structure
  similaire ?
• Extrait du glossaire
• Présentation similaire restitution cohérente et
  uniforme des informations contenues dans un même
  ensemble de pages Web. Une présentation similaire
  de l'information permet d'harmoniser l'expérience
  utilisateur en ce qui concerne notamment
  l'identification des éléments particulièrement
  structurants (menus de navigation, titres,
  organisation du contenu...).

40
(No Transcript)
41
III.2.2 Accès au backend

• L accès au backend nest pas accessible
• Obligation davoir du javascript ET des cookies
• Lorsque lon utilise une synthèse vocale, aucun
  des deux nest implémenté
• Il ny a pas dalternative
• Non respect du critère 7.1
• Tous les autres critères sont respectés

42
(No Transcript)
43
III.2.3 Les liens

• Critères FRONTEND
• 6.1 Bronze Chaque lien sans titre de lien
  est-il explicite hors contexte ?
• 6.2 Bronze Pour chaque lien ayant un titre de
  lien, ce titre est-il nécessaire ?
• 6.3 Bronze Pour chaque lien ayant un titre de
  lien, ce titre est-il pertinent ?
• 6.4 Bronze Chaque lien a-t-il une longueur
  maximum de 80 caractères (hors cas particuliers)
  ?
• 6.5 Bronze Chaque lien identique a-t-il la
  même url ?
• 6.6 Or Dans chaque page Web, les liens
  sont-ils visuellement séparés de manière
  distincte ?

44
III.2.3 Les liens

• Critères BACKEND
• 6.1 Bronze Interface Chaque procédé
  d'insertion d'un lien est-il accessible ?
• 6.2 Bronze Site, Interface Pour chaque
  lien inséré par lauteur, celui-ci peut-il
  modifier le titre de lien lorsquil est proposé
  automatiquement par le CMS ?
• 6.3 Bronze Interface Pour chaque procédé
  d'insertion d'un lien, un procédé d'insertion
  d'un titre de lien est-il présent ?
• 6.4 Bronze Interface Chaque procédé
  d'insertion d'un titre de lien est-il accessible ?

45
(No Transcript)
46
III.2.4 Les images

• Critères FRONTEND
• 1.1 Bronze Chaque image a-t-elle une
  alternative textuelle ?
• 1.2 Bronze Pour chaque image de décoration
  ayant une alternative textuelle, cette
  alternative est-elle vide ?
• 1.3 Bronze Pour chaque image porteuse
  d'information ayant une alternative textuelle,
  cette alternative est-elle pertinente ?
• 1.4 Bronze Pour chaque image porteuse
  d'information ayant une alternative textuelle,
  cette alternative a-t-elle une longueur maximum
  de 80 caractères (hors cas particuliers) ?
• 1.5 Bronze Chaque image porteuse
  d'information a-t-elle si nécessaire une
  description détaillée ?
• 1.6 Bronze Pour chaque image porteuse
  d'information ayant une description détaillée,
  cette description est-elle pertinente ?
• 1.7 Bronze Pour chaque image réactive, les
  zones cliquables sont-elles définies juste après
  la déclaration de l'image dans le code source ?
• 1.8 Or Pour chaque image réactive, les zones
  cliquables sont-elles ordonnées de manière
  pertinente dans le code source ?
• 1.9 Argent Chaque image texte doit si
  possible être remplacée par du texte stylé. Cette
  règle est-elle respectée ?

47
III.2.4 Les images
48
(No Transcript)
49
III.2.4 Les images

• Critères BACKEND
• 1.1 Bronze Interface Chaque procédé
  d'insertion d'une image est-il accessible ?
• 1.2 Bronze Site, Interface Pour chaque image
  insérée par lauteur, celui-ci peut-il modifier
  lalternative textuelle lorsquelle est proposée
  automatiquement par le CMS ?
• 1.3 Bronze Interface Pour chaque procédé
  d'insérer d'un champ de formulaire, un procédé
  d'insertion d'un intitulé est-il présent ?
• 1.4 Bronze Interface Chaque procédé
  d'inserton d'une alternative textuelle à une
  image est-il accessible ?
• 1.5 Bronze Interface Pour chaque procédé
  d'insertion d'une image, un procédé d'insertion
  d'une alternative textuelle vide pour une image
  de décoration est-il présent ?
• 1.6 Bronze Interface Pour chaque procédé
  d'insertion d'une image, un procédé d'insertion
  d'une description détaillée pour une image
  porteuse d'information est-il présent ?
• 1.7 Bronze Interface Chaque procédé
  d'insertion d'une description détaillée à une
  image est-il accessible ?

50
III.2.4 Les images
51
(No Transcript)
52
Conclusion

• Laccessibilité est peu présente sur le Web
  actuellement
• La parution du décret en juin va bouleverser la
  donne Si larrêté décidant du référentiel à
  appliquer arrive un jour
• Laccessibilité est un travail en amont, mais
  aussi pendant et après la création dun site
• Typo3 est plutôt bien placé parmi les CMS à ce
  niveau là, mais encore beaucoup daméliorations à
  faire, que ce soit au niveau du CMS en lui-même,
  mais aussi au niveau de lintégration, du
  développement et de la contribution !