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