WST#8 : Connaître les
fondamentaux de l’accessibilité
Sébastien Huillet

   Agence Web

www.tribu-and-co.fr
Connaître les fondamentaux de l’accessibilité

    1. Achetez mon beau poisson - Présentation de l'accessibilité

    2. La théorie du complot - Définition des normes

    3. Un label Made in France – Accessiweb

    4. Attachez votre ceinture – Présentation des 13 thématiques

    5. Les bonnes recettes de l'accessibilité - Outils et ressources

    6. Alors, il est pas frais mon poisson ? - Perspectives et conclusions
Définition de l'accessibilité


   Physique

   Éducatif

   Civique

   Culturel / Social

   Numérique
Définition de l'accessibilité numérique


   Public handicapé
    file:///mnt/temp/oo/20120420090029/true.png




                                                   Ouverture sur le monde
    file:///mnt/temp/oo/20120420090029/true.png




                                                   Un matériel adapté
    file:///mnt/temp/oo/20120420090029/false.png




                                                   Compatibilité et confort de consultation
Définition de l'accessibilité numérique


   Tout public

      Les séniors

      Les novices

      Le matériel
Définition de l'accessibilité numérique


    Tim Berners-Lee, directeur du W3C

"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."
Définition des normes internationales


       W3C
       WAI
       WCAG, ARIA, ATAG, UAAG

       WCAG 2.0 : 3 niveaux A, AA, AAA
La loi, c'est le RGAA

    article 47 de la loi 2005-102

« Les services de communication publique en ligne des
services de l’État, des collectivités territoriales et des
établissements publics qui en dépendent doivent être
accessibles aux personnes handicapées. »

  Création du référentiel RGAA en 2009
  Mise en application en 2009
  Niveau requis AA
  Délai de mise en œuvre 2 à 3 ans
Accessiweb, le label made in France


  BrailleNet, l'association

  Accessiweb, le centre de ressource :

      Un référentiel : Accessiweb 2.1
      Un Label Bronze, Argent et Or
      Le GTA, Groupe de Travail Accessiweb
Le référentiel Accessiweb 2.1


   13 thématiques

   131 critères

   3 niveaux :

       Bronze (A) : 81 critères
       Argent (AA) : 20 critères
       Or (AAA) : 30 critères
Images



Donner à chaque image porteuse d’information
une alternative textuelle pertinente et une
description détaillée si nécessaire.

Remplacer les images textes par du texte stylé
lorsque c’est possible.
Images

<img src="fichier_image.jpg"
alt="contenu de l'image" />
Cadres



 Donner à chaque cadre et chaque cadre en
 ligne un titre pertinent.
Couleurs



 Ne pas donner l’information uniquement par
 la couleur et utiliser des contrastes de
 couleurs suffisamment élevés.
Couleurs
Liens



Donner des intitulés de lien explicites, grâce à
des informations de contexte notamment, et
utiliser le titre de lien le moins possible.
Liens
Éléments Obligatoires



Vérifier que chaque page Web a un code source
valide selon le type de document, un titre
pertinent et une indication de langue par défaut.
Structuration de l’information




Utiliser des titres, des listes, des abréviations et
des citations pour structurer l’information.
Structuration de l’information
Présentation de l’information


Utiliser des feuilles de styles pour contrôler la
présentation de l’information. Vérifier l’effet de
l’agrandissement des tailles de caractère sur la
lisibilité.
Formulaires



Structurer les formulaires de manière pertinente,
vérifier la présence d’aide à la saisie et de
contrôle de saisie accessible.
Tableaux



Donner à chaque tableau de données, un
résumé et un titre pertinent, identifier clairement
les cellules d’en-tête.
Navigation


Faciliter la navigation par au moins deux
systèmes de navigation différents : menu de
navigation, plan du site, moteur de recherche
fil d’ariane
Multimédia


Donner si nécessaire à chaque média temporel
une transcription textuelle, des sous-titres
synchronisés et une audio-description
pertinente.
Multimédia
Scripts




Donner si nécessaire à chaque script une
alternative pertinente.
Consultation


Proposer des versions accessibles ou rendre
accessibles les documents en téléchargement.
Sont concernés tous les fichiers PDF, Word,
Excel

Chaque contenu en mouvement ou clignotant
est-il contrôlable par l'utilisateur ?
Outils et ressources



   Firefox : Firebug et Web developer

   Internet Explorer : WAT-C

   Niveaux de contraste : Contrast analyser

   Accessibilité flash : aDesigner
Outils et ressources



   Accessiweb

   Open Web

   Alsacréations

   Transcender CSS par Andy Clarke
Conclusion


Le site        Ouverture du site
               Structuration de l'information - ergonomie
               Optimisation du référencement

L'agence Web   80 % des critères « simples ».
               Pas de nécessité de concession graphique
               Structure le projet

Le client      Meilleure renommée
               Preuve de qualité - Pérennité
               Maintenance moins couteuse
Télécharger les outils



                                                       http://www.facebook.com/TribuAndCo



                   Audit du site
file:///mnt/temp/oo/20120420090029/logo_webshool.png




                                                       http://www.webschool-tours.fr/

Présentation de l'accessibilité numérique par Sébastien Huillet (Tribu And Co)

  • 1.
    WST#8 : Connaîtreles fondamentaux de l’accessibilité
  • 2.
    Sébastien Huillet Agence Web www.tribu-and-co.fr
  • 3.
    Connaître les fondamentauxde l’accessibilité 1. Achetez mon beau poisson - Présentation de l'accessibilité 2. La théorie du complot - Définition des normes 3. Un label Made in France – Accessiweb 4. Attachez votre ceinture – Présentation des 13 thématiques 5. Les bonnes recettes de l'accessibilité - Outils et ressources 6. Alors, il est pas frais mon poisson ? - Perspectives et conclusions
  • 4.
    Définition de l'accessibilité Physique Éducatif Civique Culturel / Social Numérique
  • 5.
    Définition de l'accessibiliténumérique Public handicapé file:///mnt/temp/oo/20120420090029/true.png Ouverture sur le monde file:///mnt/temp/oo/20120420090029/true.png Un matériel adapté file:///mnt/temp/oo/20120420090029/false.png Compatibilité et confort de consultation
  • 6.
    Définition de l'accessibiliténumérique Tout public Les séniors Les novices Le matériel
  • 7.
    Définition de l'accessibiliténumérique Tim Berners-Lee, directeur du W3C "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."
  • 8.
    Définition des normesinternationales W3C WAI WCAG, ARIA, ATAG, UAAG WCAG 2.0 : 3 niveaux A, AA, AAA
  • 9.
    La loi, c'estle RGAA article 47 de la loi 2005-102 « Les services de communication publique en ligne des services de l’État, des collectivités territoriales et des établissements publics qui en dépendent doivent être accessibles aux personnes handicapées. » Création du référentiel RGAA en 2009 Mise en application en 2009 Niveau requis AA Délai de mise en œuvre 2 à 3 ans
  • 10.
    Accessiweb, le labelmade in France BrailleNet, l'association Accessiweb, le centre de ressource : Un référentiel : Accessiweb 2.1 Un Label Bronze, Argent et Or Le GTA, Groupe de Travail Accessiweb
  • 11.
    Le référentiel Accessiweb2.1 13 thématiques 131 critères 3 niveaux : Bronze (A) : 81 critères Argent (AA) : 20 critères Or (AAA) : 30 critères
  • 12.
    Images Donner à chaqueimage porteuse d’information une alternative textuelle pertinente et une description détaillée si nécessaire. Remplacer les images textes par du texte stylé lorsque c’est possible.
  • 13.
  • 14.
    Cadres Donner àchaque cadre et chaque cadre en ligne un titre pertinent.
  • 15.
    Couleurs Ne pasdonner l’information uniquement par la couleur et utiliser des contrastes de couleurs suffisamment élevés.
  • 16.
  • 17.
    Liens Donner des intitulésde lien explicites, grâce à des informations de contexte notamment, et utiliser le titre de lien le moins possible.
  • 18.
  • 19.
    Éléments Obligatoires Vérifier quechaque page Web a un code source valide selon le type de document, un titre pertinent et une indication de langue par défaut.
  • 20.
    Structuration de l’information Utiliserdes titres, des listes, des abréviations et des citations pour structurer l’information.
  • 21.
  • 22.
    Présentation de l’information Utiliserdes feuilles de styles pour contrôler la présentation de l’information. Vérifier l’effet de l’agrandissement des tailles de caractère sur la lisibilité.
  • 23.
    Formulaires Structurer les formulairesde manière pertinente, vérifier la présence d’aide à la saisie et de contrôle de saisie accessible.
  • 24.
    Tableaux Donner à chaquetableau de données, un résumé et un titre pertinent, identifier clairement les cellules d’en-tête.
  • 25.
    Navigation Faciliter la navigationpar au moins deux systèmes de navigation différents : menu de navigation, plan du site, moteur de recherche fil d’ariane
  • 26.
    Multimédia Donner si nécessaireà chaque média temporel une transcription textuelle, des sous-titres synchronisés et une audio-description pertinente.
  • 27.
  • 28.
    Scripts Donner si nécessaireà chaque script une alternative pertinente.
  • 29.
    Consultation Proposer des versionsaccessibles ou rendre accessibles les documents en téléchargement. Sont concernés tous les fichiers PDF, Word, Excel Chaque contenu en mouvement ou clignotant est-il contrôlable par l'utilisateur ?
  • 30.
    Outils et ressources Firefox : Firebug et Web developer Internet Explorer : WAT-C Niveaux de contraste : Contrast analyser Accessibilité flash : aDesigner
  • 31.
    Outils et ressources Accessiweb Open Web Alsacréations Transcender CSS par Andy Clarke
  • 32.
    Conclusion Le site Ouverture du site Structuration de l'information - ergonomie Optimisation du référencement L'agence Web 80 % des critères « simples ». Pas de nécessité de concession graphique Structure le projet Le client Meilleure renommée Preuve de qualité - Pérennité Maintenance moins couteuse
  • 33.
    Télécharger les outils http://www.facebook.com/TribuAndCo Audit du site file:///mnt/temp/oo/20120420090029/logo_webshool.png http://www.webschool-tours.fr/