Post on 05-Dec-2014
description
WCAG
etl’Accessibilité du Web
Conférence Romande sur l’Accessibilité du Web – Genève – Avril 2012
A v a n t – p r o p o s
1989Invention du Web
TB LeeJF Caillaux
2011L’internet Mobile
GoogleApple
2009Le Web 2.0
Les réseaux sociauxFacebook
A v a n t – p r o p o s
Comme dans la
vie réelle
L’accessibilité du web
Bénéficie à
Tous
Les handicapésLes séniors
Les PDALes connexions
bas débit….
A v a n t – p r o p o s
Depuis le début de l'internet, l'Accessibilité est au cœur des spécifications web.
Tim Berners Lee, directeur du W3C
" 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. "
Définition officielle de l'Accessibilité :
" Le pouvoir du web est dans son universalité.Un aspect essentiel est qu'il soit accessible àtout le monde quel que soit le handicap "
Accessibilité
Universalité
Enjeu majeurpour le web
actuel
Le handicap et le Web
L e H a n d i c a p e t l e W e b
Source: Google
Selon une étude de Forrester Research
57% de la population active pourrait bénéficier de technologies d’assistance.
L e H a n d i c a p e t l e W e b
Accéder
Percevoir
Utiliser
Comprendre
Problèmes rencontrés
Handicapés visuels : image, vidéo, signalétique
Handicapés moteurs : difficultés d'utilisation des souris et clavier traditionnels.
Handicapés cognitifs : sens et compréhension
Pour tous, la visite d'un site web est
Seniors : difficultés cumulées ( vision, difficultés d'apprentissage, atteintes neuro-motrices )
difficile voire impossible.
Handicapés auditifs : son ( paroles , musique )
Accessibilité
L' A c c e s s i b i l i t é du w e b Comment surfe les handicapés
Les logiciels et les outils
sont prêts
Les sites et les applications
Non
Lecteur d’écranLoupe d’écrans
Tablette Braille
Périphérique adaptéClavier adapté
Stick
WCAG
Web Content Accessibility Guidelines
WCAG avant-propos
WCAG
L’objectif principal est
essentiellement de s’assurer que lorsque l’on met à disposition des contenus dans cet ensemble
complexe
« tout marche »
Pour WCAG un utilisateur c’est un ensemble compliqué :
Personne
Technologie d’assistance
Navigateur
Systèmed’exploitation
API(s) d’Accessibilité
++
+
+
WCAG
WCAG
Web Accessibility Initiative
Diffuse des recommandations largement répandues et reconnues par la communautéinternationale
Les actions de WAI se situent dans cinq
domaines :
Les technologiesdu Web
Les recommandations
Les Outils
L’information
La R&D
WCAG
WAI édite et maintient 4 corps de recommandations
Les recommandations:
UAAGAgents Utilisateurs
ATAGOutils d’édition
WCAGAccessibilité du
contenu
ARIAAccessibilité de
Javascript
WCAG
Web Content Accessibility Guidelines
4 principes
12 règles
61 critères de succès
570 techniques
Ensemble de recommandations destinées à rendre les contenus Web accessibles aux personnes en situation de handicap, notamment.
Les techniques sont
généralement liées à des
technologies
GénéralHtmlCss
ServeurTextPDF
FlashSilverligthJavascript
…
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 imagesLes vidéosLe FlashLes PDF
Les contenus cryptiquesLes scripts
(20 références dans AccessiWeb 2.1)
WCAG
En europe
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 !
WCAG est complet, complexe et demande un bon niveau préalable pour être utilisé.
Un site accessible…
(Bases fondamentales)
1. les alternatives
Les images
Les vidéos et les animations flash
Le javascript
- 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
ALT=‘’ ’’
1. les alternatives
Les images
Les vidéos et les animations flash
Le javascript
- 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
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
Les images
Les vidéos et les animations flash
Le javascript
- S’assurer qu’une information ne dépend pas de l’activation de javascript
Sans Javascript pas de brèves
1. les alternatives
Un cas particulier
Les Captchas
- 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é- Accès par opérateur téléphonique
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
Les titres de pages
Les aides à la navigation
- S’assurer que les liens images ont une alternative !!
Le lien « en savoir plus »est explicite via le titreprécédent
Ce lien image avec une alternative nulle est un lien vide !
ALT=‘’ ’’
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
800 tabulations pour effectuer une commande
Avec un lien d’accès rapide
160 tabulations pour 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- Indiquer « erreur sur le formulaire » dans le titre de la page de
retour
Les formulaires
Les tableaux
Si vous devez conserver des boutons OK ou envoyer, utiliser un title pour rendre le bouton compréhensible
Ce tableau de données est correctement structuré
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
formeLes formulaires
Les tableaux
Ce tableau de mise en forme ne se linéarise pas correctement
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- Indiquer la langue de la page et la langue des passages de
texte en langue étrangère
Titres de contenus, listes, indication 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.
- S’assurer d’un contraste suffisant pour les contenus ou fournir un contenu alternatif suffisamment contrasté
- Ne pas supprimer l’indication visuelle du focus (outline) !
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
Indication donnée par la couleur dans un menu et un formulaire
Nom
Prénom
Tout savoir sur quoi ?
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
Le graal de l’intégrateur
Utilisation inapproprié d’un élément caption pour faire un texte d’aide dans un 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…
contiennent des contenus accessibles ou fournir une version alternative.
HTML
Flash, PDF…
Javascript et ARIA
5. compatibilité avec l’accessibilité
HTML
Flash, PDF…
Javascript et ARIAJavascript et ARIA
Brève introduction
5. compatibilité avec l’accessibilité
HTML
Flash, PDF…
Javascript et ARIA
5. compatibilité avec l’accessibilité
HTML
Flash, PDF…
Javascript et ARIA
Pour HTML tout est défini dans les spécifications
Lien, c’est super
Titre de niveau 1, c’est super
Graphique, c’est super
Bouton, c’est super
<a href=‘’> C’est super </a>
<h1> C’est super </h1>
<img src=‘’ alt=‘C’est super’ />
<input type=‘submit’ value=‘C’est super’ />
Case à cocher, cochée,c’est super
Le lecteur d’écran dispose de toutes les informations renvoyées par le navigateur et les adapte comme il le souhaite :
5. compatibilité avec l’accessibilité
HTML
Flash, PDF…
Javascript et ARIA
Avec Javascript
5. compatibilité avec l’accessibilité
HTML
Flash, PDF…
Javascript et ARIA
Problème pour l’utilisateur
C’est quoi ce truc ?
Volume 0%<div><span>0%</span><div><a></a></div></div>
Heu …
Volume 0%<div><span>0%</span><div> <a></a></div></div>
Volume 48%
Ha! bon …
<div><span> 48% </span><div> <a></a></div></div>
Identifier – Utiliser - Comprendre
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
Flash, PDF…
Javascript et ARIA
Si l’utilisation combiné de HTML, Javascript et ARIA donne la possibilité de concevoir des interfaces très accessibles à l’image de ce qui peut se faire pour les logiciels cela nécessite néanmoins :
1. Que tout le monde fasse la même chose (design pattern)
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émonstrationshttp://qelios.net/demo_aria/index.php
Merci de votre attention
Qelios – Accessibilité Numérique
04 68 85 25 42http://qelios.net