SlideShare une entreprise Scribd logo
1  sur  42
WCAG
               et
     l’Accessibilité du Web




Conférence Romande sur l’Accessibilité du Web – Genève – Avril 2012
Avant–propos




       1989                2009                 2011
Invention du Web        Le Web 2.0       L’internet Mobile
      TB Lee       Les réseaux sociaux         Google
    JF Caillaux          Facebook              Apple
Avant–propos


                 Comme dans la

Les handicapés       vie réelle
  Les séniors
    Les PDA      L’accessibilité du
Les connexions         web
   bas débit
       ….           Bénéficie à

                       Tous
Avant–propos
  Depuis le début de l'internet, l'Accessibilité est          Accessibilité
         au cœur des spécifications web.


Définition officielle de l'Accessibilité :

" Mettre le Web et ses services à la disposition de
tous les individus, quels que soient leur
matériel ou logiciel, leur infrastructure                     Universalité
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é.                Enjeu majeur
Un aspect essentiel est qu'il soit accessible à
tout le monde quel que soit le handicap "                   pour le web actuel

                        Tim Berners Lee, directeur du W3C
Le handicap et le Web
Le Handicap et le Web


                            Selon une étude de
                            Forrester Research


                                 57%
                             de la population
                              active pourrait
                               bénéficier de
                               technologies
           Source: Google
                               d’assistance.
Le Handicap et le Web
Problèmes rencontrés


Handicapés visuels : image, vidéo, signalétique           Accéder

Handicapés auditifs : son ( paroles , musique )
                                                         Percevoir
Handicapés moteurs : difficultés d'utilisation des
souris et clavier traditionnels.
                                                          Utiliser
Handicapés cognitifs : sens et compréhension

                                                        Comprendre
Seniors : difficultés cumulées ( vision, difficultés
d'apprentissage, atteintes neuro-motrices )



 Pour tous, la visite d'un site web est
                                                       Accessibilité
    difficile     voire impossible.
L' A c c e s s i b i l i t é du w e b
 Comment surfe les handicapés

                           Loupe d’écrans
Lecteur d’écran

                                                          Les logiciels et
                                                             les outils
                                       Tablette Braille
                                                            sont prêts

                                                          Les sites et les
                                                           applications

                                                               Non


  Stick



          Clavier adapté           Périphérique adapté
WCAG
Web Content Accessibility Guidelines
WCAG avant-propos
  Pour WCAG un utilisateur c’est un
       ensemble compliqué :


 Personne                                  WCAG
     +                                    L’objectif
 Navigateur                             principal est
     +
 Technologie
                                      essentiellement
                                      de s’assurer que
                                      lorsque l’on met
 d’assistance                         à disposition des
     +                                 contenus dans
                                        cet ensemble
   Système                                complexe
d’exploitation
                                      « tout marche »
     +
    API(s)
d’Accessibilité
WCAG
WCAG


                                           Les actions de WAI
                                           se situent dans cinq
                                                domaines :

                                            Les technologies
                                                 du Web

                                                  Les
                                            recommandations
Web Accessibility Initiative
                                                Les Outils
Diffuse des recommandations largement
répandues et reconnues par la communauté      L’information
internationale
                                                 La R&D
WCAG

                                                          Les
                                                    recommandations:

                                                          UAAG
                                                    Agents Utilisateurs

                                                          ATAG
                                                     Outils d’édition

                                                         WCAG
                                                     Accessibilité du
                                                        contenu

                                                         ARIA
                                                     Accessibilité de
WAI édite et maintient 4 corps de recommandations
                                                       Javascript
WCAG
Web Content Accessibility Guidelines
Ensemble de recommandations destinées à
                                                      Les techniques
rendre les contenus Web accessibles aux
personnes en situation de handicap, notamment.              sont
                                                      généralement
                                                        liées à des
     4 principes                                       technologies

                                                          Général
     12 règles                                              Html
                                                             Css
     61 critères de succès                                Serveur
                                                            Text
                                                             PDF
     570 techniques                                         Flash
                                                         Silverligth
                                                         Javascript
                                                              …
Un critère de succès est passé lorsqu’une technique
référente au moins est utilisée
WCAG
           Exemple de
           complexité

          La règle 1.1
       couvre notamment:

           Les images
           Les vidéos
            Le Flash
            Les PDF
          Les contenus
           cryptiques
           Les scripts

       (20 références dans
         AccessiWeb 2.1)
WCAG
WCAG est complet, complexe et demande
                                                En europe
un bon niveau préalable pour être utilisé.
                                               Dés 2003, des
                                                 méthodes
                                              d’application et
                                             des référentiels
                                             ont été imaginés
                                                   pour :

                                                Simplifier

                                                  Guider

                                                 Vérifier

                                                 Former


                                               Utilisez les !
Un site accessible…
 (Bases fondamentales)
1. les alternatives
- S’assurer de la présence d’une alternative (ALT)
- S’assurer que les images porteuses d’information ont une
  alternative pertinente
- S’assurer que les images de décoration ont une alternative
  nulle
                                                                 Les images

                                                               Les vidéos et les
                                                               animations flash

                                                                Le javascript


                           ALT=‘’ ’’
1. les alternatives
- S’assurer de la présence d’une transcription textuelle aux
  vidéos et aux animations flash
- S’assurer de la présence d’un sous-titrage synchronisé et d’une
  audio-description dans les vidéos

                                                                      Les images

                                                                    Les vidéos et les
                                                                    animations flash

                                                                     Le javascript




Si je ne peux pas avoir accès à la vidéo comment avoir accès à
l’information ?
Si je suis sourd comment entendre ?
Si je suis aveugle comment voir ?
1. les alternatives
- S’assurer qu’une information ne dépend pas de l’activation de
  javascript



                                                                    Les images

                                                                  Les vidéos et les
                                                                  animations flash

                                                                   Le javascript




                 Sans Javascript pas de brèves
1. les alternatives
- Indiquer la nature de l’image, par exemple « code captcha à
  recopier pour envoyer le formulaire »
- Fournir une solution alternative :
    - Captcha sonore
    - Jeton par SMS
    - Accès sécurisé personnalisé                                     Un cas
    - Accès par opérateur téléphonique                              particulier


                                                                   Les Captchas




 Ici une alternative reprenant le code du captcha est impossible
2. navigation et aides à la navigation
- S’assurer que les liens sont explicite via
    - L’intitulé seul
    - Un title (attentions aux titles inutiles)
    - Un contexte explicite (titre précédent, contenu du
       paragraphe…)
                                                              Les liens
- S’assurer que les liens images ont une alternative !!
                                                            Les titres de
                                                               pages

                                                            Les aides à la
                                                             navigation
                                          ALT=‘’ ’’




  Le lien « en savoir plus »        Ce lien image avec
  est explicite via le titre        une alternative nulle
  précédent                         est un lien vide !
2. navigation et aides à la navigation
- S’assurer que toutes les pages ont un titre
- S’assurer que dans les collections de pages on indique au
  moins le numéro de page dans le titre.


                                                                Les liens

                                                              Les titres de
                                                                 pages

                                                              Les aides à la
                                                               navigation
2. navigation et aides à la navigation
- Proposer un plan du site ou un moteur de recherche
- Proposer des liens d’accès rapide à la zone de contenu



                                                                 Les liens

                                                               Les titres de
                                                                  pages

                                                               Les aides à la
                                                                navigation




 Sans liens d’accès rapide       Avec un lien d’accès rapide

 800 tabulations pour            160 tabulations pour
 effectuer une commande          effectuer une commande
3. les formulaires et les tableaux
- Associer un label aux champs de formulaire
- Utiliser des libellés de bouton pertinents
- Placer les instructions de saisie obligatoire et les messages
  d’erreur avant les formulaires
- Structurer les différentes parties du formulaire avec des
  fieldset et des légendes                                            Les formulaires
- Indiquer « erreur sur le formulaire » dans le titre de la page de
  retour                                                               Les tableaux




   Si vous devez conserver des boutons OK ou envoyer, utiliser
   un title pour rendre le bouton compréhensible
3. les formulaires et les tableaux
-   Donner un titre et un résumé aux tableaux de données
-   Utiliser de vraies en-tête (TH)
-   Utiliser scope pour lier les en-têtes aux cellules de données
-   S’assurer de la bonne linéarisation des tableaux de mise en
    forme
                                                                    Les formulaires

                                                                     Les tableaux




      Ce tableau de mise en forme ne
      se linéarise pas correctement
        Ce tableau de données est correctement structuré
4. structure, présentation, compréhension
- Utiliser des titres de contenus (H1-H6) pour structurer
  l’information
- Utiliser des listes lorsque c’est nécessaire                         Titres de
- Indiquer la langue de la page et la langue des passages de      contenus, listes, in
  texte en langue étrangère                                       dication de langue

                                                                   Utilisation de CSS
                                                                  et agrandissement
                                                                  des tailles de police

                                                                  Indication donnée
                                                                        par la
                                                                  couleur, contraste
                                                                       et focus

                                                                      Contenu en
                                                                      mouvement


  Un titre absent chez Yahoo             Une liste correctement
                                                structurée
4. structure, présentation, compréhension
- Utiliser exclusivement CSS pour la présentation
- S’assurer que le contenu reste lisible lorsque les tailles de
  police sont agrandies à 200%                                    Titres de contenus
                                                                        et listes

                                                                  Utilisation de CSS
                                                                           et
                                                                   agrandissement
                                                                    des tailles de
                                                                         police

                                                                  Indication donnée
                                                                        par la
                                                                  couleur, contraste
                                                                       et focus

                                                                     Contenu en
                                                                     mouvement
        Commander un billet d’avion avec un zoom à 200%
4. structure, présentation, compréhension
- Ne pas faire dépendre une information de la seule perception
  de la couleur, position ou forme.                                 Titres de contenus
- S’assurer d’un contraste suffisant pour les contenus ou fournir         et listes
  un contenu alternatif suffisamment contrasté
- Ne pas supprimer l’indication visuelle du focus (outline) !       Utilisation de CSS
                                                                             et
                                                                     agrandissement
                                                                      des tailles de
                                                                           police

   Nom                                                              Indication donnée
                                                                          par la
 Prénom                                                             couleur, contraste
                                                                         et focus

                                                                       Contenu en
  Indication donnée par la             Tout savoir sur quoi ?
                                                                       mouvement
  couleur dans un menu et un
  formulaire
4. structure, présentation, compréhension
- S’assurer que l’utilisateur peut arrêter ou masquer les
  contenus en mouvements ou clignotants.                    Titres de contenus
                                                                  et listes

                                                            Utilisation de CSS
                                                                     et
                                                             agrandissement
                                                              des tailles de
                                                                   police

                                                            Indication donnée
                                                                  par la
                                                            couleur, contraste
                                                                 et focus

                                                               Contenu en
                                                               mouvement

  Un diaporama automatiques doit pouvoir être arrêté
5. compatibilité avec l’accessibilité
- Utiliser un doctype et s’assurer que le code ne contient pas
  d’erreur
- Respecter la sémantique du balisage                               HTML

                                                                 Flash, PDF…

                                                                 Javascript et
                                                                    ARIA




 Utilisation inapproprié d’un élément caption pour faire un
 texte d’aide dans unLe graal de l’intégrateur
                      formulaire
5. compatibilité avec l’accessibilité
- S’assurer que les interfaces en Flash sont utilisables au clavier
  et correctement décrites aux technologies d’assistance
- S’assurer que les documents PDF, Word, Open Office…                    HTML
  contiennent des contenus accessibles ou fournir une version
  alternative.                                                        Flash, PDF…

                                                                      Javascript et
                                                                         ARIA
5. compatibilité avec l’accessibilité

                               HTML

                            Flash, PDF…

                            Javascript et
  Javascript et ARIA           ARIA


  Brève introduction
5. compatibilité avec l’accessibilité

                               HTML

                            Flash, PDF…

                            Javascript et
                               ARIA
5. compatibilité avec l’accessibilité
Pour HTML tout est défini dans les spécifications
                                                                            HTML
Le lecteur d’écran dispose de toutes les informations renvoyées par
le navigateur et les adapte comme il le souhaite :                       Flash, PDF…

                                                                         Javascript et
                                                                            ARIA
<a href=‘’> C’est super </a>           Lien, c’est super


<h1> C’est super </h1>                  Titre de niveau 1, c’est super


<img src=‘’ alt=‘C’est super’ />        Graphique, c’est super


<input type=‘submit’                     Bouton, c’est super
value=‘C’est super’ />
                                         Case à cocher, cochée,
                                         c’est super
5. compatibilité avec l’accessibilité

                               HTML
     Avec Javascript
                            Flash, PDF…

                            Javascript et
                               ARIA
5. compatibilité avec l’accessibilité
       Problème pour l’utilisateur
                                                        HTML
    Identifier – Utiliser - Comprendre
                                                     Flash, PDF…

                                                     Javascript et
                           <div><span>0%</span>
Volume               0%                                 ARIA
                           <div><a></a>
                           </div></div>
 C’est quoi ce truc ?
                           <div><span>0%</span>
Volume               0%    <div> <a></a>
                           </div></div>
           Heu …
                           <div><span> 48% </span>
Volume               48%   <div> <a></a>
                           </div></div>
         Ha! bon …
5. compatibilité avec l’accessibilité

                                                                   HTML

                                                                Flash, PDF…

                                                                Javascript et
                                                                   ARIA




ARIA utilise :

1. Des attributs comme l’attribut role qui annonce le type du
   composant
2. Des attributs comme valuenow qui permettent de
   communiquer l’état du composant
3. Des modèles de conception (« Design pattern ») pour
   uniformiser le comportement et l’utilisation au clavier
5. compatibilité avec l’accessibilité

                               HTML

                            Flash, PDF…

                            Javascript et
                               ARIA
5. compatibilité avec l’accessibilité

                               HTML

                            Flash, PDF…

                            Javascript et
                               ARIA
5. compatibilité avec l’accessibilité

                                                                           HTML
Si l’utilisation combiné de HTML, Javascript et ARIA donne la
possibilité de concevoir des interfaces très accessibles à l’image de   Flash, PDF…
ce qui peut se faire pour les logiciels cela nécessite néanmoins :
                                                                        Javascript et
1. Que tout le monde fasse la même chose (design pattern)                  ARIA
2. De stabiliser l’écosystème Web (la guerre des navigateurs
   actuelle n’est pas profitable au développement d’ARIA)

3. De trouver les moyens d’informer l’utilisateur du
   fonctionnement des composants complexes

4. De développer des méthodes de tests utilisateurs qui sont le
   seul moyen de s’assurer qu’une implémentation ARIA est
   réellement fonctionnelle.



                    Source des démonstrations
              http://qelios.net/demo_aria/index.php
Merci de votre attention

Qelios – Accessibilité Numérique
         http://qelios.net
         04 68 85 25 42

Contenu connexe

Similaire à WCAG et l&rsquo;accessibilité du Web

Accessibilité du Web et RGAA
Accessibilité du Web et RGAAAccessibilité du Web et RGAA
Accessibilité du Web et RGAAFabrice CROIZE
 
Accessibilite du web Collectif filière 13112012
Accessibilite du web Collectif filière 13112012Accessibilite du web Collectif filière 13112012
Accessibilite du web Collectif filière 13112012Le Moulin Digital
 
Accessibilite des sites Internet - Accessiweb - Pôle Numérique
Accessibilite des sites Internet - Accessiweb - Pôle NumériqueAccessibilite des sites Internet - Accessiweb - Pôle Numérique
Accessibilite des sites Internet - Accessiweb - Pôle NumériqueLe Moulin Digital
 
L’accessibilité web pour les organismes publics
L’accessibilité web pour les organismes publicsL’accessibilité web pour les organismes publics
L’accessibilité web pour les organismes publicsWilly Leloutre
 
Journée technique MOPA : L’accessibilité et le numérique, introduction à la n...
Journée technique MOPA : L’accessibilité et le numérique, introduction à la n...Journée technique MOPA : L’accessibilité et le numérique, introduction à la n...
Journée technique MOPA : L’accessibilité et le numérique, introduction à la n...MONA
 
Accessibilité et HTML5
Accessibilité et HTML5Accessibilité et HTML5
Accessibilité et HTML5Hafid Denguir
 
Livre blanc : Accessibilité Web, Guide pour la conception de sites web access...
Livre blanc : Accessibilité Web, Guide pour la conception de sites web access...Livre blanc : Accessibilité Web, Guide pour la conception de sites web access...
Livre blanc : Accessibilité Web, Guide pour la conception de sites web access...Ametys
 
Concevoir un site accessible avec le RGAA (2010)
Concevoir un site accessible avec le RGAA (2010)Concevoir un site accessible avec le RGAA (2010)
Concevoir un site accessible avec le RGAA (2010)Ardesi Midi-Pyrénées
 
Jean-Philippe Simonnet (Centre Inffo) : le RGAA, un outil précieux pour prog...
Jean-Philippe Simonnet (Centre Inffo) :  le RGAA, un outil précieux pour prog...Jean-Philippe Simonnet (Centre Inffo) :  le RGAA, un outil précieux pour prog...
Jean-Philippe Simonnet (Centre Inffo) : le RGAA, un outil précieux pour prog...FFFOD
 
Questions Reponses Accessibilite
Questions Reponses AccessibiliteQuestions Reponses Accessibilite
Questions Reponses Accessibilitelevy aurélien
 
20120124 03 - Human Centric Solutions - Accessibilité et mobilité
20120124 03 - Human Centric Solutions - Accessibilité et mobilité20120124 03 - Human Centric Solutions - Accessibilité et mobilité
20120124 03 - Human Centric Solutions - Accessibilité et mobilitéLeClubQualiteLogicielle
 
Garantir l'accessibilité numérique de la bibliothèque
Garantir l'accessibilité numérique de la bibliothèqueGarantir l'accessibilité numérique de la bibliothèque
Garantir l'accessibilité numérique de la bibliothèqueMarc Maisonneuve
 
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference EuratechnologieHTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologiewyggio
 
Retour d'expérience CANAL+ Afrique
Retour d'expérience CANAL+ AfriqueRetour d'expérience CANAL+ Afrique
Retour d'expérience CANAL+ AfriqueXWiki
 
Accessibilité des CMS: présentation Qelios au CMSDay 2012
Accessibilité des CMS: présentation Qelios au CMSDay 2012Accessibilité des CMS: présentation Qelios au CMSDay 2012
Accessibilité des CMS: présentation Qelios au CMSDay 2012Qelios
 
Accessibilité & Utilisabilité Web par Eric Lamidieu
Accessibilité & Utilisabilité Web par Eric LamidieuAccessibilité & Utilisabilité Web par Eric Lamidieu
Accessibilité & Utilisabilité Web par Eric LamidieuEric LAMIDIEU
 

Similaire à WCAG et l&rsquo;accessibilité du Web (20)

Accessibilité du Web et RGAA
Accessibilité du Web et RGAAAccessibilité du Web et RGAA
Accessibilité du Web et RGAA
 
Accessibilite du web Collectif filière 13112012
Accessibilite du web Collectif filière 13112012Accessibilite du web Collectif filière 13112012
Accessibilite du web Collectif filière 13112012
 
Accessibilite des sites Internet - Accessiweb - Pôle Numérique
Accessibilite des sites Internet - Accessiweb - Pôle NumériqueAccessibilite des sites Internet - Accessiweb - Pôle Numérique
Accessibilite des sites Internet - Accessiweb - Pôle Numérique
 
L’accessibilité web pour les organismes publics
L’accessibilité web pour les organismes publicsL’accessibilité web pour les organismes publics
L’accessibilité web pour les organismes publics
 
Journée technique MOPA : L’accessibilité et le numérique, introduction à la n...
Journée technique MOPA : L’accessibilité et le numérique, introduction à la n...Journée technique MOPA : L’accessibilité et le numérique, introduction à la n...
Journée technique MOPA : L’accessibilité et le numérique, introduction à la n...
 
Accessibilité et HTML5
Accessibilité et HTML5Accessibilité et HTML5
Accessibilité et HTML5
 
La Norme Wai
La Norme WaiLa Norme Wai
La Norme Wai
 
Livre blanc : Accessibilité Web, Guide pour la conception de sites web access...
Livre blanc : Accessibilité Web, Guide pour la conception de sites web access...Livre blanc : Accessibilité Web, Guide pour la conception de sites web access...
Livre blanc : Accessibilité Web, Guide pour la conception de sites web access...
 
#Et6-At12-Accessibilité
#Et6-At12-Accessibilité#Et6-At12-Accessibilité
#Et6-At12-Accessibilité
 
Concevoir un site accessible avec le RGAA (2010)
Concevoir un site accessible avec le RGAA (2010)Concevoir un site accessible avec le RGAA (2010)
Concevoir un site accessible avec le RGAA (2010)
 
Formation Accessibilite Web
Formation Accessibilite WebFormation Accessibilite Web
Formation Accessibilite Web
 
Jean-Philippe Simonnet (Centre Inffo) : le RGAA, un outil précieux pour prog...
Jean-Philippe Simonnet (Centre Inffo) :  le RGAA, un outil précieux pour prog...Jean-Philippe Simonnet (Centre Inffo) :  le RGAA, un outil précieux pour prog...
Jean-Philippe Simonnet (Centre Inffo) : le RGAA, un outil précieux pour prog...
 
Questions Reponses Accessibilite
Questions Reponses AccessibiliteQuestions Reponses Accessibilite
Questions Reponses Accessibilite
 
20120124 03 - Human Centric Solutions - Accessibilité et mobilité
20120124 03 - Human Centric Solutions - Accessibilité et mobilité20120124 03 - Human Centric Solutions - Accessibilité et mobilité
20120124 03 - Human Centric Solutions - Accessibilité et mobilité
 
Garantir l'accessibilité numérique de la bibliothèque
Garantir l'accessibilité numérique de la bibliothèqueGarantir l'accessibilité numérique de la bibliothèque
Garantir l'accessibilité numérique de la bibliothèque
 
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference EuratechnologieHTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
 
Retour d'expérience CANAL+ Afrique
Retour d'expérience CANAL+ AfriqueRetour d'expérience CANAL+ Afrique
Retour d'expérience CANAL+ Afrique
 
Accessibilité des CMS: présentation Qelios au CMSDay 2012
Accessibilité des CMS: présentation Qelios au CMSDay 2012Accessibilité des CMS: présentation Qelios au CMSDay 2012
Accessibilité des CMS: présentation Qelios au CMSDay 2012
 
Atelier accessibilite
Atelier accessibiliteAtelier accessibilite
Atelier accessibilite
 
Accessibilité & Utilisabilité Web par Eric Lamidieu
Accessibilité & Utilisabilité Web par Eric LamidieuAccessibilité & Utilisabilité Web par Eric Lamidieu
Accessibilité & Utilisabilité Web par Eric Lamidieu
 

Plus de Qelios

Paris Web 2013 - Atelier, rendre une application accessible en quatre étapes
Paris Web 2013 - Atelier, rendre une application accessible en quatre étapesParis Web 2013 - Atelier, rendre une application accessible en quatre étapes
Paris Web 2013 - Atelier, rendre une application accessible en quatre étapesQelios
 
Accessibilité du Web: méthodes d'évaluation rapide
Accessibilité du Web: méthodes d'évaluation rapideAccessibilité du Web: méthodes d'évaluation rapide
Accessibilité du Web: méthodes d'évaluation rapideQelios
 
HTML5, ARIA et accessibilité du Web: où en est-on?
HTML5, ARIA et accessibilité du Web: où en est-on?HTML5, ARIA et accessibilité du Web: où en est-on?
HTML5, ARIA et accessibilité du Web: où en est-on?Qelios
 
Mesure de la conformité WCAG 2.0 via le référentiel AccessiWeb 2.2 avec HTML5...
Mesure de la conformité WCAG 2.0 via le référentiel AccessiWeb 2.2 avec HTML5...Mesure de la conformité WCAG 2.0 via le référentiel AccessiWeb 2.2 avec HTML5...
Mesure de la conformité WCAG 2.0 via le référentiel AccessiWeb 2.2 avec HTML5...Qelios
 
Rendre un portail accessible - journée Accessibilité de l&rsquo;ADULOA
Rendre un portail accessible - journée Accessibilité de l&rsquo;ADULOARendre un portail accessible - journée Accessibilité de l&rsquo;ADULOA
Rendre un portail accessible - journée Accessibilité de l&rsquo;ADULOAQelios
 
Prioriser les chantiers d'accessibilité numérique quand tout est à faire
Prioriser les chantiers d'accessibilité numérique quand tout est à fairePrioriser les chantiers d'accessibilité numérique quand tout est à faire
Prioriser les chantiers d'accessibilité numérique quand tout est à faireQelios
 
Aria au pays du web
Aria au pays du webAria au pays du web
Aria au pays du webQelios
 
Get the most out of your accessibility expert
Get the most out of your accessibility expertGet the most out of your accessibility expert
Get the most out of your accessibility expertQelios
 
Mipaw: Model for a Progressive Implementation of Web Accessibility - Web4All
Mipaw: Model for a Progressive Implementation of Web Accessibility - Web4AllMipaw: Model for a Progressive Implementation of Web Accessibility - Web4All
Mipaw: Model for a Progressive Implementation of Web Accessibility - Web4AllQelios
 
MIPAW: Modèle d’Implémentation Progressive de l’Accessibilité du Web (FEAN 2012)
MIPAW: Modèle d’Implémentation Progressive de l’Accessibilité du Web (FEAN 2012)MIPAW: Modèle d’Implémentation Progressive de l’Accessibilité du Web (FEAN 2012)
MIPAW: Modèle d’Implémentation Progressive de l’Accessibilité du Web (FEAN 2012)Qelios
 
MIPAW: Modèle d’Implémentation Progressive de l’Accessibilité du Web
MIPAW: Modèle d’Implémentation Progressive de l’Accessibilité du WebMIPAW: Modèle d’Implémentation Progressive de l’Accessibilité du Web
MIPAW: Modèle d’Implémentation Progressive de l’Accessibilité du WebQelios
 

Plus de Qelios (11)

Paris Web 2013 - Atelier, rendre une application accessible en quatre étapes
Paris Web 2013 - Atelier, rendre une application accessible en quatre étapesParis Web 2013 - Atelier, rendre une application accessible en quatre étapes
Paris Web 2013 - Atelier, rendre une application accessible en quatre étapes
 
Accessibilité du Web: méthodes d'évaluation rapide
Accessibilité du Web: méthodes d'évaluation rapideAccessibilité du Web: méthodes d'évaluation rapide
Accessibilité du Web: méthodes d'évaluation rapide
 
HTML5, ARIA et accessibilité du Web: où en est-on?
HTML5, ARIA et accessibilité du Web: où en est-on?HTML5, ARIA et accessibilité du Web: où en est-on?
HTML5, ARIA et accessibilité du Web: où en est-on?
 
Mesure de la conformité WCAG 2.0 via le référentiel AccessiWeb 2.2 avec HTML5...
Mesure de la conformité WCAG 2.0 via le référentiel AccessiWeb 2.2 avec HTML5...Mesure de la conformité WCAG 2.0 via le référentiel AccessiWeb 2.2 avec HTML5...
Mesure de la conformité WCAG 2.0 via le référentiel AccessiWeb 2.2 avec HTML5...
 
Rendre un portail accessible - journée Accessibilité de l&rsquo;ADULOA
Rendre un portail accessible - journée Accessibilité de l&rsquo;ADULOARendre un portail accessible - journée Accessibilité de l&rsquo;ADULOA
Rendre un portail accessible - journée Accessibilité de l&rsquo;ADULOA
 
Prioriser les chantiers d'accessibilité numérique quand tout est à faire
Prioriser les chantiers d'accessibilité numérique quand tout est à fairePrioriser les chantiers d'accessibilité numérique quand tout est à faire
Prioriser les chantiers d'accessibilité numérique quand tout est à faire
 
Aria au pays du web
Aria au pays du webAria au pays du web
Aria au pays du web
 
Get the most out of your accessibility expert
Get the most out of your accessibility expertGet the most out of your accessibility expert
Get the most out of your accessibility expert
 
Mipaw: Model for a Progressive Implementation of Web Accessibility - Web4All
Mipaw: Model for a Progressive Implementation of Web Accessibility - Web4AllMipaw: Model for a Progressive Implementation of Web Accessibility - Web4All
Mipaw: Model for a Progressive Implementation of Web Accessibility - Web4All
 
MIPAW: Modèle d’Implémentation Progressive de l’Accessibilité du Web (FEAN 2012)
MIPAW: Modèle d’Implémentation Progressive de l’Accessibilité du Web (FEAN 2012)MIPAW: Modèle d’Implémentation Progressive de l’Accessibilité du Web (FEAN 2012)
MIPAW: Modèle d’Implémentation Progressive de l’Accessibilité du Web (FEAN 2012)
 
MIPAW: Modèle d’Implémentation Progressive de l’Accessibilité du Web
MIPAW: Modèle d’Implémentation Progressive de l’Accessibilité du WebMIPAW: Modèle d’Implémentation Progressive de l’Accessibilité du Web
MIPAW: Modèle d’Implémentation Progressive de l’Accessibilité du Web
 

WCAG et l&rsquo;accessibilité du Web

  • 1. WCAG et l’Accessibilité du Web Conférence Romande sur l’Accessibilité du Web – Genève – Avril 2012
  • 2. Avant–propos 1989 2009 2011 Invention du Web Le Web 2.0 L’internet Mobile TB Lee Les réseaux sociaux Google JF Caillaux Facebook Apple
  • 3. Avant–propos Comme dans la Les handicapés vie réelle Les séniors Les PDA L’accessibilité du Les connexions web bas débit …. Bénéficie à Tous
  • 4. Avant–propos Depuis le début de l'internet, l'Accessibilité est Accessibilité au cœur des spécifications web. Définition officielle de l'Accessibilité : " Mettre le Web et ses services à la disposition de tous les individus, quels que soient leur matériel ou logiciel, leur infrastructure Universalité 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é. Enjeu majeur Un aspect essentiel est qu'il soit accessible à tout le monde quel que soit le handicap " pour le web actuel Tim Berners Lee, directeur du W3C
  • 5. Le handicap et le Web
  • 6. Le Handicap et le Web Selon une étude de Forrester Research 57% de la population active pourrait bénéficier de technologies Source: Google d’assistance.
  • 7. Le Handicap et le Web Problèmes rencontrés Handicapés visuels : image, vidéo, signalétique Accéder Handicapés auditifs : son ( paroles , musique ) Percevoir Handicapés moteurs : difficultés d'utilisation des souris et clavier traditionnels. Utiliser Handicapés cognitifs : sens et compréhension Comprendre Seniors : difficultés cumulées ( vision, difficultés d'apprentissage, atteintes neuro-motrices ) Pour tous, la visite d'un site web est Accessibilité difficile voire impossible.
  • 8. L' A c c e s s i b i l i t é du w e b Comment surfe les handicapés Loupe d’écrans Lecteur d’écran Les logiciels et les outils Tablette Braille sont prêts Les sites et les applications Non Stick Clavier adapté Périphérique adapté
  • 10. WCAG avant-propos Pour WCAG un utilisateur c’est un ensemble compliqué : Personne WCAG + L’objectif Navigateur principal est + Technologie essentiellement de s’assurer que lorsque l’on met d’assistance à disposition des + contenus dans cet ensemble Système complexe d’exploitation « tout marche » + API(s) d’Accessibilité
  • 11. WCAG
  • 12. WCAG Les actions de WAI se situent dans cinq domaines : Les technologies du Web Les recommandations Web Accessibility Initiative Les Outils Diffuse des recommandations largement répandues et reconnues par la communauté L’information internationale La R&D
  • 13. WCAG Les recommandations: UAAG Agents Utilisateurs ATAG Outils d’édition WCAG Accessibilité du contenu ARIA Accessibilité de WAI édite et maintient 4 corps de recommandations Javascript
  • 14. WCAG Web Content Accessibility Guidelines Ensemble de recommandations destinées à Les techniques rendre les contenus Web accessibles aux personnes en situation de handicap, notamment. sont généralement liées à des 4 principes technologies Général 12 règles Html Css 61 critères de succès Serveur Text PDF 570 techniques Flash Silverligth Javascript … Un critère de succès est passé lorsqu’une technique référente au moins est utilisée
  • 15. WCAG Exemple de complexité La règle 1.1 couvre notamment: Les images Les vidéos Le Flash Les PDF Les contenus cryptiques Les scripts (20 références dans AccessiWeb 2.1)
  • 16. WCAG WCAG est complet, complexe et demande En europe un bon niveau préalable pour être utilisé. Dés 2003, des méthodes d’application et des référentiels ont été imaginés pour : Simplifier Guider Vérifier Former Utilisez les !
  • 17. Un site accessible… (Bases fondamentales)
  • 18. 1. les alternatives - S’assurer de la présence d’une alternative (ALT) - S’assurer que les images porteuses d’information ont une alternative pertinente - S’assurer que les images de décoration ont une alternative nulle Les images Les vidéos et les animations flash Le javascript ALT=‘’ ’’
  • 19. 1. les alternatives - S’assurer de la présence d’une transcription textuelle aux vidéos et aux animations flash - S’assurer de la présence d’un sous-titrage synchronisé et d’une audio-description dans les vidéos Les images Les vidéos et les animations flash Le javascript Si je ne peux pas avoir accès à la vidéo comment avoir accès à l’information ? Si je suis sourd comment entendre ? Si je suis aveugle comment voir ?
  • 20. 1. les alternatives - S’assurer qu’une information ne dépend pas de l’activation de javascript Les images Les vidéos et les animations flash Le javascript Sans Javascript pas de brèves
  • 21. 1. les alternatives - Indiquer la nature de l’image, par exemple « code captcha à recopier pour envoyer le formulaire » - Fournir une solution alternative : - Captcha sonore - Jeton par SMS - Accès sécurisé personnalisé Un cas - Accès par opérateur téléphonique particulier Les Captchas Ici une alternative reprenant le code du captcha est impossible
  • 22. 2. navigation et aides à la navigation - S’assurer que les liens sont explicite via - L’intitulé seul - Un title (attentions aux titles inutiles) - Un contexte explicite (titre précédent, contenu du paragraphe…) Les liens - S’assurer que les liens images ont une alternative !! Les titres de pages Les aides à la navigation ALT=‘’ ’’ Le lien « en savoir plus » Ce lien image avec est explicite via le titre une alternative nulle précédent est un lien vide !
  • 23. 2. navigation et aides à la navigation - S’assurer que toutes les pages ont un titre - S’assurer que dans les collections de pages on indique au moins le numéro de page dans le titre. Les liens Les titres de pages Les aides à la navigation
  • 24. 2. navigation et aides à la navigation - Proposer un plan du site ou un moteur de recherche - Proposer des liens d’accès rapide à la zone de contenu Les liens Les titres de pages Les aides à la navigation Sans liens d’accès rapide Avec un lien d’accès rapide 800 tabulations pour 160 tabulations pour effectuer une commande effectuer une commande
  • 25. 3. les formulaires et les tableaux - Associer un label aux champs de formulaire - Utiliser des libellés de bouton pertinents - Placer les instructions de saisie obligatoire et les messages d’erreur avant les formulaires - Structurer les différentes parties du formulaire avec des fieldset et des légendes Les formulaires - Indiquer « erreur sur le formulaire » dans le titre de la page de retour Les tableaux Si vous devez conserver des boutons OK ou envoyer, utiliser un title pour rendre le bouton compréhensible
  • 26. 3. les formulaires et les tableaux - Donner un titre et un résumé aux tableaux de données - Utiliser de vraies en-tête (TH) - Utiliser scope pour lier les en-têtes aux cellules de données - S’assurer de la bonne linéarisation des tableaux de mise en forme Les formulaires Les tableaux Ce tableau de mise en forme ne se linéarise pas correctement Ce tableau de données est correctement structuré
  • 27. 4. structure, présentation, compréhension - Utiliser des titres de contenus (H1-H6) pour structurer l’information - Utiliser des listes lorsque c’est nécessaire Titres de - Indiquer la langue de la page et la langue des passages de contenus, listes, in texte en langue étrangère dication de langue Utilisation de CSS et agrandissement des tailles de police Indication donnée par la couleur, contraste et focus Contenu en mouvement Un titre absent chez Yahoo Une liste correctement structurée
  • 28. 4. structure, présentation, compréhension - Utiliser exclusivement CSS pour la présentation - S’assurer que le contenu reste lisible lorsque les tailles de police sont agrandies à 200% Titres de contenus et listes Utilisation de CSS et agrandissement des tailles de police Indication donnée par la couleur, contraste et focus Contenu en mouvement Commander un billet d’avion avec un zoom à 200%
  • 29. 4. structure, présentation, compréhension - Ne pas faire dépendre une information de la seule perception de la couleur, position ou forme. Titres de contenus - S’assurer d’un contraste suffisant pour les contenus ou fournir et listes un contenu alternatif suffisamment contrasté - Ne pas supprimer l’indication visuelle du focus (outline) ! Utilisation de CSS et agrandissement des tailles de police Nom Indication donnée par la Prénom couleur, contraste et focus Contenu en Indication donnée par la Tout savoir sur quoi ? mouvement couleur dans un menu et un formulaire
  • 30. 4. structure, présentation, compréhension - S’assurer que l’utilisateur peut arrêter ou masquer les contenus en mouvements ou clignotants. Titres de contenus et listes Utilisation de CSS et agrandissement des tailles de police Indication donnée par la couleur, contraste et focus Contenu en mouvement Un diaporama automatiques doit pouvoir être arrêté
  • 31. 5. compatibilité avec l’accessibilité - Utiliser un doctype et s’assurer que le code ne contient pas d’erreur - Respecter la sémantique du balisage HTML Flash, PDF… Javascript et ARIA Utilisation inapproprié d’un élément caption pour faire un texte d’aide dans unLe graal de l’intégrateur formulaire
  • 32. 5. compatibilité avec l’accessibilité - S’assurer que les interfaces en Flash sont utilisables au clavier et correctement décrites aux technologies d’assistance - S’assurer que les documents PDF, Word, Open Office… HTML contiennent des contenus accessibles ou fournir une version alternative. Flash, PDF… Javascript et ARIA
  • 33. 5. compatibilité avec l’accessibilité HTML Flash, PDF… Javascript et Javascript et ARIA ARIA Brève introduction
  • 34. 5. compatibilité avec l’accessibilité HTML Flash, PDF… Javascript et ARIA
  • 35. 5. compatibilité avec l’accessibilité Pour HTML tout est défini dans les spécifications HTML Le lecteur d’écran dispose de toutes les informations renvoyées par le navigateur et les adapte comme il le souhaite : Flash, PDF… Javascript et ARIA <a href=‘’> C’est super </a> Lien, c’est super <h1> C’est super </h1> Titre de niveau 1, c’est super <img src=‘’ alt=‘C’est super’ /> Graphique, c’est super <input type=‘submit’ Bouton, c’est super value=‘C’est super’ /> Case à cocher, cochée, c’est super
  • 36. 5. compatibilité avec l’accessibilité HTML Avec Javascript Flash, PDF… Javascript et ARIA
  • 37. 5. compatibilité avec l’accessibilité Problème pour l’utilisateur HTML Identifier – Utiliser - Comprendre Flash, PDF… Javascript et <div><span>0%</span> Volume 0% ARIA <div><a></a> </div></div> C’est quoi ce truc ? <div><span>0%</span> Volume 0% <div> <a></a> </div></div> Heu … <div><span> 48% </span> Volume 48% <div> <a></a> </div></div> Ha! bon …
  • 38. 5. compatibilité avec l’accessibilité HTML Flash, PDF… Javascript et ARIA ARIA utilise : 1. Des attributs comme l’attribut role qui annonce le type du composant 2. Des attributs comme valuenow qui permettent de communiquer l’état du composant 3. Des modèles de conception (« Design pattern ») pour uniformiser le comportement et l’utilisation au clavier
  • 39. 5. compatibilité avec l’accessibilité HTML Flash, PDF… Javascript et ARIA
  • 40. 5. compatibilité avec l’accessibilité HTML Flash, PDF… Javascript et ARIA
  • 41. 5. compatibilité avec l’accessibilité HTML Si l’utilisation combiné de HTML, Javascript et ARIA donne la possibilité de concevoir des interfaces très accessibles à l’image de Flash, PDF… ce qui peut se faire pour les logiciels cela nécessite néanmoins : Javascript et 1. Que tout le monde fasse la même chose (design pattern) ARIA 2. De stabiliser l’écosystème Web (la guerre des navigateurs actuelle n’est pas profitable au développement d’ARIA) 3. De trouver les moyens d’informer l’utilisateur du fonctionnement des composants complexes 4. De développer des méthodes de tests utilisateurs qui sont le seul moyen de s’assurer qu’une implémentation ARIA est réellement fonctionnelle. Source des démonstrations http://qelios.net/demo_aria/index.php
  • 42. Merci de votre attention Qelios – Accessibilité Numérique http://qelios.net 04 68 85 25 42