Master Design d'interface multimédia et internet Université Paris 13

1. Introduction à
l’accessibilité du Web
María Inés LAITANO
mariaines.laitano@univ-paris13.fr
1

2. Plan
1. D'autres façons d'utiliser l’ordinateur
2. Qu'est-ce que l'accessibilité numérique ?
3. Pourquoi est elle importante ?
4. L’approche du W3C
5. Règles pour l'accessibilité des contenus Web (WCAG) 2.0
6. Les critères de succès de niveau A
2

3. Ligne Braille
3
Source de l’image

4. Amélioration du contraste
4

5. Périphériques adaptés
Souris adaptée Clavier une
seule main
Reconnaissance
de la voix
Licorne
5

6. Navigateur pour enfants autistes
6
Source de l’image

7. L’accessibilité numérique
Un droit humain d’accès à l’information numérique au delà des singularités
physiques, psychiques, culturelles, géographiques ou économiques des
personnes.
« Le pouvoir du Web est dans son universalité »
Tim Berners-Lee (Directeur du W3C e inventeur des
standards HTML, HTTP, URL)
7

8. Selon la Web Accessibility Initiative (WAI)
8
Utilisable par
personnes en
situation de
handicap
Percevoir
Comprendre
Naviguer
Intéragir
Contribuer

9. Personnes en situation de handicap
15% de la population mondiale (>1.000
millons de personnes). OMS, 2011
18% des français sont touchés par un handicap
(12 millions de français). INSEE, 2014
9

10. Pas uniquement pour les personnes en situation de handicap
• Handicaps temporaires
• Limitations dûs à l’àge
• Faible alfabetisation ou faible maîtrise de la langue
• Conectivité limitée ou tecnologies anciennes
• Internautes débutants ou peu fréquents
• Et pour tous !
10

11. Positionnement dans les moteurs de recherche
« Ton usager le plus important est non-voyant. La moitié des visites de ton
site proviennent de Google et Google voit ce qu’un non-voyant peut
voir »*
12
* Steven Pemberton, Chair of HTML and Forms Working Groups, W3C. 2005

12. Design pour mobiles
13

13. Mythe du site inesthétique
14

14. Standards internationaux
15

15. Règles pour l'accessibilité des contenus Web
(WCAG) 2.0
Principes
Règles
Critères de succès
Techniques suffisantes et
techniques
recommandées
• perceptible
• utilisable
• compréhensible
• robuste
• objectifs de base
• Niveau A
• Niveau AA
• Niveau AAA
16

16. Exemple WCAG 2.0
1. Perceptible
1.4 Distinguable : faciliter la perception visuelle et
auditive du contenu par l'utilisateur, notamment en
séparant le premier plan de l'arrière-plan.
 1.4.1 Utilisation de la couleur : la couleur n'est pas utilisée
comme la seule façon de véhiculer de l'information,
d'indiquer une action, de solliciter une réponse ou de
distinguer un élément visuel. (Niveau A)
17

17. Logos de conformité
• Manière de promouvoir l’accessibilité et
de créer conscience
• Indiquent conformité avec un certain
niveau des WCAG 2.0
• Ne supposent pas une validation de la
WAI
18

18. Documents des WCAG 2.0
19

19. Quelques critères
de Niveau A
20

20. 1.1.1 Contenu non textuel
Tout contenu non-textuel présenté à l'utilisateur a un équivalent textuel qui remplit une
fonction équivalente sauf dans les situations suivantes :
• Composant d'interface ou de saisie
• Média temporel
• Test
• Contenu sensoriel
• Décoration, formatage, invisibilité
• CAPTCHA
21

21. <a href=“http://www.frro.utn.edu.ar/”>
<img src="logo.png"
alt=“Page d’accueil de l’Université Paris 13”/>
</a>
22
Quel équivalent textuel pour
une image fonctionnelle ?

22. Quel équivalent textuel pour
une image informative?
<a href=“brochure.pdf”>
<img src="pdf.jpg" alt=“Téléchargement PDF"/>
Brochure du Master Design d’interface multimedia et internet
</a>
23

23. <div>
<img src=“etudiants.png" alt=“”/>
Un coup de pouce pour vos études en Master ?
</div>
24
Quel équivalent textuel pour
une image decorative ?

24. <img src=“schema.jpg"
alt=“Schéma des formations"
longdesc=“schema-formations.html" />
25
Quel équivalent textuel pour
une image complexe ?

25. 1.2.2 Sous-titres (pré-enregistrés)
Fournir des sous-titres** pour tout contenu audio pré-enregistré dans un
média synchronisé […]
** visuel synchronisé ou équivalent textuel pour l'information audio avec
ou sans parole nécessaire à la compréhension du contenu d'un média. Ils
ne communiquent pas seulement le contenu des dialogues parlés mais
aussi des équivalents pour les informations audio autres que le dialogue et
nécessaires à la compréhension du contenu du programme, y compris les
effets sonores, la musique, les rires, l'identification des interlocuteurs.
28

26. 1.2.3 Audio-description ou version de remplacement
pour un média temporel (pré-enregistré)
Fournir une version de remplacement pour un média temporel ou une
audio-description du contenu vidéo pré-enregistré pour un média
synchronisé […]
29

27. 30

28. 1.3.1 Information et relations
L'information, la structure et les relations
véhiculées par la présentation peuvent être
déterminées par un programme
informatique ou sont disponibles sous
forme de texte.
31

29. Structure des titres
32

30. Tableaux accessibles
• <table> UNIQUEMENT pour l’information à plusieurs dimensions
• <caption> titre du tableau
• summary=“” vision générale du tableau
• scope=“” associe en-têtes et cellules de données
• id=“” headers=“” associe en-têtes et cellules de données dans des tableaux
complexes
33

31. 1.3.3 Caractéristiques sensorielles
Les instructions données pour la compréhension et l'utilisation du contenu
ne doivent pas reposer uniquement sur les caractéristiques sensorielles des
éléments comme la forme, la taille, l'emplacement visuel, l'orientation ou le
son.
35

32. 1.3.3 Caractéristiques sensorielles (suite)
36

33. 1.4.1 Utilisation de la couleur
La couleur n'est pas utilisée comme la seule façon de véhiculer de l'information, d'indiquer
une action, de solliciter une réponse ou de distinguer un élément visuel.
37
Sans daltonisme Protanopie Deutéranopie Tritanopie

34. 1.4.1 Utilisation de la couleur : graphiques
39

35. 1.4.2 Contrôle du son
Si du son sur une page Web est audible automatiquement pendant plus
de 3 secondes, un mécanisme est disponible pour le mettre en pause,
l'arrêter ou pour en contrôler le volume de façon indépendante du niveau
de volume du système général.
40

36. 2.1.1 Clavier
Toutes les fonctionnalités du
contenu sont utilisables à l'aide
d'une interface clavier sans exiger
un rythme de frappe propre à
l'utilisateur […]
41
Source de l’image

37. 2.4.1 Contourner des blocs
Un mécanisme permet de contourner les
blocs de contenu qui sont répétés sur
plusieurs pages web.
44
Source de l’image

38. 2.4.2 Titre de page
Les pages Web présentent un titre
qui décrit leur sujet ou leur but.
Exemples :
• Page d’accueil – Mon site
• Produits – Mon site
• Contact – Mon site
45

39. 2.4.4 Fonction du lien (selon le contexte)
La fonction de chaque lien est déterminée par le texte du lien seul ou par
le texte du lien associé à un contexte du lien déterminé par un programme
informatique, sauf si la fonction du lien est ambiguë pour tout utilisateur.
46

40. 2.4.4 Fonction du lien (exemples)
Pour toutes les réponses à vos questions, rendez-vous :
• dans la Maison des Associations (MDA) de votre arrondissement
• sur le blog SIMPA : http://blogs.paris.fr/simpa/
• dans la FAQ ci-dessous répondant aux questions les plus fréquentes
47

41. 2.4.4 Fonction du lien (contexte du lien)
48

42. 3.1.1 Langue de la page
La langue par défaut de chaque page Web peut être déterminée par un
programme informatique.
<html lang=”fr”>
49

43. 4.1.1 Analyse syntaxique
Dans un contenu implémenté via un langage de balisage, les éléments ont
des balises de début et de fin complètes, ils sont imbriqués conformément
à leurs spécifications, ils ne contiennent pas d'attributs dupliqués et chaque
ID est unique.
50

44. Références et liens utiles
• Convention relative aux droits des personnes handicapées (NU)
• Accessibilité et mobiles
• Règles WCAG 2.0 (en français)
• Référentiel général d'accessibilité pour les administrations (RGAA) version 3 2017
• Télécharger NVDA
• Outil pour évaluer le contraste
• Outil pour choisir des couleurs accessibles
• Outil pour évaluer les flash
• Comment ajouter des sous-titres sur Youtube
• BrailleNet
51