Accessibilité web - 10 septembre 2013 - Bayonne

Temesis - 18, rue Lucien Granet - 33150 Cenon - France - +33 5 56 401 402Septembre 2013

L’accessibilité des sites Internet pour les personnes handicapées

Comprendre et agir

1

Temesis - 18, rue Lucien Granet - 33150 Cenon - France - +33 5 56 401 402

EvaluationCompositionUtilisateursPréalables

Septembre 2013

Temesis

Présentation

Expertise : Audit, A.M.O., référentiels…

Formation : Professionnels, universités, …

Services en ligne : Bonnes pratiques qualité Opquast et plateforme de gestion de la qualité des sites.

Membre du W3C : Participation à l’élaboration des normes et standards

2



Septembre 2013

Eric Gateau

Présentation

Qualité :

Formateur et consultant sur la qualité et la gestion des parcs de sites

Ergonomie :

Utilisabilité, conception des interfaces et processus, architecture de l’information, tests utilisateurs, eye-tracking.

Accessibilité :

Formateur et consultant accessibilité des services en ligne, Expert Accessiweb en évaluation.

3



Septembre 2013

Vous

Tour de table

Qui êtes vous ?

Quel est votre métier ?

Qu’attendez-vous de cette présentation ?

4



Savoir ce qu’est l’accessibilité et ce qu’elle recouvre

Comprendre les problématiques de l’accessibilité

Connaître la loi sur le sujet

Connaître les limites et les avantages

Avoir une méthodologie pour intégrer l’accessibilité dans un projet web

Septembre 2013

Aujourd’hui

Objectifs

5



Accessibilité et handicap

Aspect législatif

Le référentiel français : le RGAA

Coûts et bénéfices de la démarche

Méthodologie d’application

Accessibilité et qualité globale

Septembre 2013

Ce matin

Plan

6



Septembre 2013

Aujourd’hui

Plan


Aspect législatif





7



En France : La loi d'orientation du 30 juin 1975 n'énonce volontairement pas de définition de la notion de handicap ou de personne handicapée.

Raison : Ne pas s’enfermer dans une définition qui pourrait exclure des personnes.

Septembre 2013


Qu’est ce qu’un handicap ?

8



Déficiences sensorielles (cécité, surdité ...)

Déficiences cognitives (déficiences mentales ...)

Déficiences motrices (bras cassé, tétraplégie ...)

Septembre 2013


La déficience n’est pas le handicap

9



Définition :

Perte ou restriction des possibilités de participer à la vie de la collectivité à égalité avec les autres.

Association entre :

Les paramètres individuels (les déficiences)

Les paramètres sociaux

Septembre 2013


Définition du handicap (ONU)

Source ONU : http://www.un.org/esa/socdev/enable/faqs.hm

10

http://www.un.org/esa/socdev/enable/faqs.hm

http://www.un.org/esa/socdev/enable/faqs.hm



Un point de vue global sur le handicap, association entre :

Rapport personne handicapée / milieu

Etat temporaire ou permanent

Septembre 2013


Implication de cette définition

11



Depuis 2005 : La loi n° 2005-102 du 11 février 2005 pour l'égalité des droits et des chances, la participation et la citoyenneté des personnes handicapées a introduit une définition.

Septembre 2013


Le handicap dans la loi française

Source : Légifrance http://www.legifrance.gouv.fr/WAspad/UnTexteDeJorf?numjo=SANX0300217L

12

http://www.legifrance.gouv.fr/WAspad/UnTexteDeJorf?numjo=SANX0300217L




Art. L. 114. - Constitue un handicap, au sens de la présente loi, toute limitation d'activité ou restriction de participation à la vie en société subie dans son environnement par une personne en raison d'une altération substantielle, durable ou définitive d'une ou plusieurs fonctions physiques, sensorielles, mentales, cognitives ou psychiques, d'un polyhandicap ou d'un trouble de santé invalidant.

Septembre 2013


Le handicap dans la loi française

Source : Légifrance http://www.legifrance.gouv.fr/WAspad/UnTexteDeJorf?numjo=SANX0300217L

13





En Europe (15 pays) :

37 millions d'handicapés en 2003 (soit environ 1/10)

16,3 % de la population a plus de 65 ans en 2000 (soit > 60 millions de personnes).

En France :

1 500 000 personnes malvoyantes

77 000 aveugles (dont 20 000 enfants)

3 500 000 personnes malentendantes

1 400 000 d'un handicap moteur associé à d'autres déficiences.

Septembre 2013


Quelques chiffres sur le handicap

Sources: Ministère de la santé de la famille, et des personnes handicapés – avril 2003 : http://www.handicap.gouv.fr/point_presse/doss_pr/aeph2/1p.htm

Communauté européenne : http://europa.eu.int[COM (2005) 604]

14

http://www.handicap.gouv.fr/point_presse/doss_pr/aeph2/1p.htm

http://www.handicap.gouv.fr/point_presse/doss_pr/aeph2/1p.htm

http://europa.eu.int

http://europa.eu.int



Les personnes handicapées utilisent Internet pour les activités suivantes :

Information

Communication

Démarches administratives

Activités professionnelles

Achats en ligne

Septembre 2013


Utilisation des TIC

Bref ... comme tout le monde

15



Utiliser Internet demande des compétences et du matériel qui peuvent être sources d’inaccessibilité

Connexion bas débit

Connaissances, compétence

Configuration différentes : Système d’exploitation, Navigateur, Résolution …

Matériels différents, desktop, Mobiles …

Logiciels et matériels spécifiques : lecteur d’écran, zoom, plage braille, dispositifs de pointage, etc.

Septembre 2013


Naviguer sur Internet

16



Qui dans la salle est une personne handicapée ? Etes vous sûr de ne pas être une personne handicapée ?

Quand commence le handicap ?

Et sur Internet ?

Alors ? Qui dans la salle est une personne handicapée ?

Vous êtes toujours sûr de vous ?

Si on oublie les déficiences, qui dans la salle est une personne handicapée ?

Ne vous êtes vous jamais trouvé en situation de handicap ? ?

Je vous repose la question

Septembre 2013

APARTE

Démonstration

17



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.

Septembre 2013


Accessibilité et Web

Tim Berners Lee

18



Clavier

Souris

Trackball

Microphone

Clavier virtuel (écran)

Écran tactile

Dispositif électronique de pointage

Manettes, baguettes …

Septembre 2013


Périphériques d’entrés

19



Écrans (portables, PDA …)

Hauts-parleurs

Plage braille

Imprimantes

Embosseuse …

Septembre 2013


Périphériques de sortie

Photos : Mathieu Faure Open-s

20



Lecteurs d’écrans

JAWS, NVDA, Windows eyes, Voice Over, … + paramétrages

Loupes

Zoomtext, iZoom, ... mais aussi les possibilité des navigateurs usuels

Autres

Dragon Naturally Speaking, clavicom, navigateurs vocaux, ...

Septembre 2013


Les logiciels d’aides

21



Lecteur d’écran : écoutez

Septembre 2013

APARTE

Qu’en avez vous retenu ?

Démonstration

22



Révélation : http://tva.dgi.minefi.gouv.fr/ (site modifié depuis)

Septembre 2013

APARTE

Démonstration

23

http://tva.dgi.minefi.gouv.fr

http://tva.dgi.minefi.gouv.fr



Diversité des utilisateurs

Septembre 2013


Contextes de navigation

Diversité des Technologies d’assistances

Diversité des interfaces

Plage braille Clavier virtuel Trackball

• handicap sensoriel

• handicap moteur

• handicap cognitif

• handicap temporaire

• séniors

• personnes débutantes

•Navigateurs

•Smartphones

•etc.

Contextes utilisateurs

24



Septembre 2013

Aujourd’hui

Plan


Aspect législatif





25



loi n°2005-102 du 11 février 2005 pour l'égalité des droits et des chances, la participation et la citoyenneté des personnes handicapées

Article 47 : Les services de communication publique en ligne des services de l'Etat, des collectivités territoriales et des établissements publics qui en dépendent doivent être accessibles aux personnes handicapées. [...]

Septembre 2013

Législation

Loi

26



14 mai 2009 : publication du décret d’application relatif à l’article 47 de la loi n°2005-102 du 11 février 2005

➡ impose aux sites de l'État de rendre leurs services de communication publique en ligne accessibles aux personnes en situation de handicap.

21 octobre 2009 : publication de l’arrêté relatif au RGAA (JORF n° 0251 page 18329 texte n° 31)

➡ stipule aux Administrations de se référer au RGAA pour attester de la conformité de leurs services en ligne.

Septembre 2013

Législation

Décret, arrêté

27



Champs d’application : services en ligne

➡ Internet, Extranet, Intranet

Délais de mise aux normes

➡ Services de l’Etat : 2 ans à compter de la date de publication du décret

➡ Collectivités territoriales : 3 ans à compter de la date de publication du décret

Degré de conformité

➡ Niveau AA (minimum) du RGAA

Sanctions

➡ Mise en demeure : 6 mois à compter de la déclaration de conformité

➡ Liste Noire

Septembre 2013

Législation

Modalités juridiques

28



En France : pas d’obligation légale

Septembre 2013

Législation

Organismes privés

Ailleurs, en particulier dans les pays anglo-saxons :

➡ loi anti discrimination étendue aux sites Internets privés (UK)

➡ les procès se multiplient (notamment aux USA)

➡ Notion d’«ajustement raisonnable»

29



Septembre 2013

Aujourd’hui

Plan


Aspect législatif





30



WCAG 2.0 (Web Content Accessibility Guidelines)

Version 2.0 depuis décembre 2008

Norme Internationale

Recommandations pour faire un site accessible

Septembre 2013

WCAG

Référence internationale

La cellule WAI (Web Accessibility Initiative) du W3C (World Wide Web Consortium) édite les :

31



Septembre 2013

WCAG

WCAG 2.0 : Constitution


4 principes : Perceptible, Utilisable, Compréhensible et Robuste

12 règles (“Guidelines“)

61 critères de succès (61, répartis par niveau de priorité A, AA ou AAA)

32




Pour être pérennes, les directives ne font pas référence à un langage ou à une technologie.

➡ nécessité d’une méthode d’application

Septembre 2013

WCAG

WCAG 2.0 : difficile à appliquer directement

33



Septembre 2013

RGAA

Référentiel Général d’Accessibilité pour les Administrations

http://references.modernisation.gouv.fr/rgaa-accessibilite

34





RGAA : traduction WCAG 2.0

Le guide d’accompagnement : Il fournit des informations sur les enjeux, le cadre juridique de l’accessibilité, le périmètre d’application.

L’annexe 1 : les critères de succès, organisés selon les 4 principes des WCAG 2.0,

L’annexe 2 : les tests de conformité, ils permettent de contrôler l’application des critères.

L’annexe 3 : les tables de correspondance avec les WCAG 2.0

Septembre 2013

RGAA

Structure du RGAA

35



Septembre 2013

RGAA

Méthode d’application des WCAG 2.0

RGAA

WCAG 2.0

R1 R2 R3 R12 …

C1 C2 C3 C61 …

TU1 TU2 TU3 TU... … TU4

12 règles

187 tests unitaires

61 critères de succès

P1 P2 P3 P4 4 principes

36



Exemple 1 : former des contributeurs

Utilisation de l’annexe 1 : critères de succès

➡ Comprendre la mise en oeuvre

Utilisation de l’annexe 2 : tests de succès

➡ Savoir contrôler sa production

Septembre 2013

RGAA

Exemple : formation

37



Exemple 2 : rédiger un cahier des charges

Utilisation du guide d’accompagnement

➡ Comprendre les enjeux

Utilisation de l’annexe 1 : critères de succès

➡ Lister les points exigés

Septembre 2013

RGAA

Exemple : cahier des charges

38



Exemple 3 : Vérifier la conformité d’un site

Utilisation de l’annexe 2 : tests de succès

➡ Contrôler chaque test

Septembre 2013

RGAA

Exemple : conformité

39



Qui dans la salle est une personne handicapée ?

Qui s’est déjà trouvé en situation de handicap ?

Sur Internet de multiples situations sont possibles

Les situations dépendent des personnes ...

... mais aussi des contextes ...

... et des matériels ...

Qui dans la salle est une personne handicapée ?

Septembre 2013

APARTE

Démonstration

40



Septembre 2013

Aujourd’hui

Plan


Aspect législatif





41



Aspects juridiques :

Respecter la loi

Prévenir les risques juridiques

Septembre 2013

Coûts et bénéfices

Les choix stratégiques

Ethique :

Agir de manière pratique et rapide pour l’intégration

Ne pas faire de discrimination, même involontaire

42



Communication :

Utiliser l’accessibilité pour mobiliser et communiquer

Utiliser l’accessibilité pour éviter les conflits

Septembre 2013


Les choix stratégiques

Financier :

Economie de moyens à long terme

Favoriser l’évolutivité des sites

43



Formation

Conseil et assistance

Temps de développement

Tests utilisateurs, recette, audit

Déclaration de conformité et/ou labellisation

Septembre 2013


Les coûts associés à la démarche

44



Amélioration du référencement

Optimisation de la taille des pages

Mobilité et augmentation de la cible

Communication sur l'accessibilité

Réutilisabilité du code, optimisation, industrialisation

Indépendance vis-à-vis des prestataires

Normalisation du travail avec les partenaires

Septembre 2013


Les bénéfices associés à la démarche

45



Augmentation de la cible

Communication sur l'accessibilité

Devoir vis-à-vis de l’ensemble des usagers

Septembre 2013


Retour sur investissement : stratégie

46



Optimisation de la taille des pages

Quantité de données à héberger

Amélioration de l'aptitude au référencement

Meilleure compatibilité navigateurs et plate-formes

Meilleure évolutivité du site

Septembre 2013


Retour sur investissement : technique

47



Amélioration de l'utilisabilité et de la réutilisabilité du code par les dévéloppeurs

Diminution induite de la dépendance par rapport aux prestataires et développeurs

Standardisation

Amélioration du travail avec les partenaires

Septembre 2013


Retour sur investissement : maintenance

48



Navigation graphique paramétrée

Ouvrir Firefox

Aller dans Affichage > Zoom

Cocher “Zoom texte seulement”

Puis faire 6 fois zoom avant (CTRL +)

Essayer avec http://www.lemonde.fr/ et avec l’espace client BNP

Septembre 2013

APARTE

Démonstration

49

http://www.lemonde.fr

http://www.lemonde.fr



L’accessibilité bénéficie à tous :

Utilisateurs (handicapés ou non)

Responsables du site

Concepteurs

Septembre 2013


Des bénéfices pour tous

50



Améliorer l’accessibilité d’un site consiste notamment à :

Accepter la dégradation (multiples contextes de navigation), lâcher prise sur la forme

Lever le maximum d’obstacles potentiels pour l’accès aux contenus

Préparer les contenus pour les rendre le plus possible utilisables pour les hommes et les machines

Septembre 2013


Une vision à long terme

➡ Prévenir les risques

51



Septembre 2013

Aujourd’hui

Plan


Aspect législatif





52



Septembre 2013

Méthodologie

Avant (et parfois encore ...)

Bonjour monsieur l’expert, mon

site est fini, je voudrais un audit pour le rendre accessible. Bonjour monsieur,

pas de problème, pour xxxx € nous vous fournissons un rapport de

250 pages avec toutes les recommandations.

Dis monsieur tu me dessines un site accessible ?

Pas de problème petit ! Super Accessibilitator va te sauver !

53



Septembre 2013

Méthodologie

Variantes

Bonjour monsieur l’expert, mon

site est fini, je voudrais qu’il soit accessible aux

aveugles.Bonjour monsieur,

pas de problème, pour xxxx € nous faisons un audit et un rapport

de 250 pages vous dit ce qu’il faut modifier.

Dis monsieur tu me dessines un site pour les aveugles ?

Pfff, il n’y connait rien, c’est pas que pour les aveugles l’accessibilité !

54



Plus une erreur est détectée tard, plus le coût de sa correction sera élevé.

Septembre 2013

Méthodologie

Coût des corrections

55



Chaque phase du projet doit intégrer l’accessibilité

Septembre 2013

Méthodologie

Déploiement

Par conséquent chaque phase nécessite une compétence relative à l’accessibilité

Définition des objectifs

Cahier des charges

Intégration Contenus Vie du site

Analyse des besoins

Ergonomie - Design

Développement Mise en production

56



Toutes les personnes de l’organisme doivent être impliquées

Septembre 2013

Méthodologie

Chaîne de responsabilité

Des décideurs aux rédacteurs, en passant par les chefs de projets, les développeurs, les intégrateurs, les graphistes, etc.


Cahier des charges


Analyse des besoins

Ergonomie - Design


57



Privilégier des petites et nombreuses interventions à chaque étape. Pendant la conception ou la refonte et a minima :

Septembre 2013

Méthodologie

Méthode 1/4

Sous forme de minis audits rapide et d’itérations pour les corrections.


Cahier des charges


Analyse des besoins

Ergonomie - Design


Analyse des maquettes

Audit des gabarits

58



Lorsque c’est nécessaire, prévoir des interventions du spécialiste en accessibilité lors :

Septembre 2013

Méthodologie

Méthode 2/4

Si des fonctionnalités spécifiques ou complexes


Cahier des charges


Analyse des besoins

Ergonomie - Design


Rédaction du CdC

Audit de fonctionnalités

Si objectifs spécifiques

Etude de faisabilité

59



L’audit complet en fin de processus

Septembre 2013

Méthodologie

Méthode 3/4

Audit global : pour établir la conformité (et les éventuelles dérogations)


Cahier des charges


Analyse des besoins

Ergonomie - Design


Audit final

60



Le site est conforme, les objectifs sont atteints, ce n’est pas fini !

Septembre 2013

Méthodologie

Méthode 4/4

Planifier les améliorations, surveiller le niveau d’accessibilité (nouveaux contenus, nouvelles fonctionnalités, nouveaux rédacteurs)


Cahier des charges


Analyse des besoins

Ergonomie - Design


MonitoringAmélioration continue

61



Septembre 2013

Aujourd’hui

Plan


Aspect législatif





62



Navigation au clavier : un volontaire ?

La touche « Tabulation » permet de naviguer de lien en lien.

« Shift » + « Tabulation » permet de revenir aux liens précédents

La touche « Entrée » permet de suivre le lien sélectionné.

Septembre 2013

APARTE

Démonstration

63



Exercice 1

Visite du site http://www.lequipe.fr/

Cherchez visuellement le titre à la une

Objectif : atteindre ce lien et l’activer

Septembre 2013

APARTE

Démonstration

64

http://www.lequipe.fr

http://www.lequipe.fr



Un autre volontaire ?

Exercice 2

Visite du site http://fr.yahoo.com/

Objectif : accéder à l’onglet “finance”dans les onglets de la colonne centrale

Septembre 2013

APARTE

Démonstration

65

http://fr.yahoo.com

http://fr.yahoo.com



La Qualité Web consiste à améliorer le service rendu aux utilisateurs de façon globale et transversale.

La qualité intègre donc l’accessibilité, mais aussi tous les aspects qui vont contribuer à améliorer l’ensemble du service. Par exemple :

➡ Performance des serveurs

➡ Code source

➡ Sécurité

➡ Navigation

➡ etc.

Septembre 2013

Accessibilité et qualité

Une vision plus large

66



L’accessibilité s’inscrit dans une stratégie plus globale :

Septembre 2013


Accessibilité et Qualité et Compagnie

67



Il est possible, et même nous recommandons, d’intégrer l’accessibilité dans un référentiel qui englobe l’ensemble des exigences implicites ou explicites des utilisateurs.

Septembre 2013


Gestion de l’accessibilité dans un référentiel plus large

68



Renow est le référentiel définissant un cadre efficace de conception, de réalisation et de maintenance pour tous les sites Internet du Gouvernement luxembourgeois. Renow se fonde sur une démarche centrée utilisateur pour créer des sites web de qualité :

• utiles : conformes aux besoins de vos utilisateurs ;

• utilisables : adaptés à leur façon de penser ;

• accessibles : utilisables en dépit de contraintes matérielles, physiques et/ou mentales.

Septembre 2013


Exemple au Luxembourg : Renow

http://www.renow.public.lu/fr/renow-en-bref/index.html

69

http://www.renow.public.lu/fr/renow-en-bref/approche-centree-utilisateur/index.html








Des critères d’accessibilité, mais pas seulement :

• SCR.003 - Le site est consultable indépendamment du support javascript

• COD.003 - Les frames ne sont pas utilisées

• RCH.016 - Un lien vers la recherche avancée est proposée dans la page "Aucun résultat"

Septembre 2013


Renow : exemples de critère

http://www.renow.public.lu/fr/checklists-renow/checklist-renow-1-1-04/index.html

70





Septembre 2013


Conclusions

Définissez vos objectifs

Répartissez vos ressources

Entourez vous des compétences nécessaires

Continuez les améliorations

71



Septembre 2013


Définissez vos objectifs

A quoi va servir le site Internet ?

Quelle est la complémentarité avec mon activité “hors ligne“ ?

Quels sont les publics cibles ?

Que vont faire les utilisateurs sur le site ?

Quel niveau de qualité je veux atteindre ?

Quelles sont les priorités ?

72



Septembre 2013


Répartissez vos ressources

Quels sont les moyens dont je dispose ?

Qu’est ce qui est le plus important pour mon activité ?

Répartir en fonction des priorités et en fonction des délais

Anticiper les besoins

73



Septembre 2013


Entourez vous des compétences nécessaires

Compétence des prestataires

Formation du personnel

Outils utilisés

74



Septembre 2013


Continuez les améliorations

Améliorations continues planifiées

Ajout de contenu

Ecoute des utilisateurs

Monitoring automatique

75



Septembre 2013


Le chemin de l’industrialisation

Phase 1 Objectifs

nuls

Découverte

Phase 2

Conformité

produits

Efficacité

Phase 3

Conformité

produits

outils

méthodes

Efficience

76



Echanges

Questions / Réponses

Septembre 2013

Questions - Réponses

77



Temesis18, Rue Lucien Granet33150 Cenon – FranceTél : +33 5 56 401 402Fax : +33 5 56 401 403

[email protected]://www.temesis.com

Septembre 2013

Contact

78

http://www.temesis.com

http://www.temesis.com

Travel

Accessibilité web - 10 septembre 2013 - Bayonne