Versions accessibles aux formats ODT, DOC et PDF: http://qelios.net/presentations/CRAW_2012/ Notre présentation à la Conférence Romande de l'accessibilité du Web 2012. Description des préconisations des WCAG 2.0 pour rendre un site Web accessible. Présentation de la spécification WAI-ARIA pour l'accessibilité des interfaces riches, avec des exemples concrets d'application.

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é

9. WCAG
Web Content Accessibility Guidelines

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