2. Accessibilité web pour les édimestres
Sommaire
• L’accessibilité web, c’est quoi ?
• Les clientèles de l’accessibilité web
• Le SGQRI 008-01
• Processus de l’accessibilité et l’implication des édimestres
• Ce que vous devez/ne devez pas faire
• Questions ?
3. Accessibilité web pour les édimestres
L’accessibilité web, c’est quoi ?
« 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. »
(Tim Berners-Lee, directeur du W3C et inventeur du World Wide Web)
4. Accessibilité web pour les édimestres
Les clientèles de l’accessibilité web
●
Personnes souffrant de limitations visuelles.
●
Personnes souffrant de limitations auditives.
●
Personnes souffrant de limitations motrices.
●
Personnes souffrant de limitations cognitives.
●
Personnes vieillissantes.
5. Accessibilité web pour les édimestres
Au Québec
• Entre 1,8% et 3,2% de la population a des
limitations visuelles.
• Entre 4,2% et 5% de la population a des
limitations auditives.
• Entre 8% et 11,5% de la population a des
limitations motrices.
• Entre 2,5% et 4,1% de la population a des
limitations cognitives.
6. Accessibilité web pour les édimestres
Fréquence de l’handicap en fonction de l’âge
Source : http://www.ekloweb.com
7. Accessibilité web pour les édimestres
Les standards de l’accessibilité web
●
Standard sur l'accessibilité d'un site
Web (SGQRI 008-01);
●
Standard sur l'accessibilité d'un document
téléchargeable (SGQRI 008-02);
●
Standard sur l'accessibilité du multimédia
dans un site Web (SGQRI 008-03).
8. Accessibilité web pour les édimestres
SGQRI 008-01
Le standard SGQRI 008-01 énonce les
règles permettant à tout site Web, public ou
intranet ou extranet, d'être accessible afin
de faciliter son utilisation par toute
personne, handicapée ou non.
9. Accessibilité web pour les édimestres
Dates importantes
Les dates d’entrée en vigueur de chacun des
standards SGQRI 008 (pour les sites
gouvernementaux) :
●
le 10 mai 2012 pour les sites Web publics
●
le 10 novembre 2012 pour les documents
téléchargeables et
●
le 10 mai 2013 pour les sites Intranet et Extranet et
pour le multimédia.
10. Accessibilité web pour les édimestres
Pages importantes
●
Page accessibilité
●
Page plan du site
11. Accessibilité web pour les édimestres
Processus de l’accessibilité web
1. Vérification de l’accessibilité dans le document des
Wireframes.
2. Vérification de l’accessibilité dans la maquette
graphique du site web.
3. Application de l’accessibilité par les
développeurs/intégrateurs web.
4. Vérification de l’accessibilité des contenus par les
édimestres.
12. Accessibilité web pour les édimestres
Implication des édimestres
Les développeurs, intégrateurs et designers
ne sont pas responsables de l’accessibilité
des contenus!
Les édimestres ont la responsabilité de
vérifier l’accessibilité de leurs contenus!
13. Accessibilité web pour les édimestres
Que devez vous vérifier ?
●
Les liens
●
Les images
●
Les entêtes
●
Les tableaux
●
Les contenus textuels
●
Les formulaires
15. Accessibilité web pour les édimestres
Les liens
Les liens doivent être
compréhensibles hors-contexte!
16. Accessibilité web pour les édimestres
Les liens
Cliquez-ici
Voir la suite
Télécharger le fichier
Les lecteurs d’écran offrent la possibilité de
lister tous les liens d’une page web!
17. Accessibilité web pour les édimestres
Les liens
Un lien doit décrire le contenu
de la page vers laquelle il
pointe!
18. Accessibilité web pour les édimestres
Les liens
Titre d’une nouvelle :
« Le canadien de Montréal remporte la
coupe Stanley, Scott Gomez élu meilleur
joueur. »
Section principale d’un site web :
« Nos services »
« Historique »
19. Accessibilité web pour les édimestres
Les liens
Les liens portant le même
libellé sur une même page,
doivent mener vers la même
destination
20. Accessibilité web pour les édimestres
Les liens
Encore une fois!
Cliquez-ici
Voir la suite
Télécharger le fichier
21. Accessibilité web pour les édimestres
Les liens
Si un lien pointe vers une page
externe, spécifiez-le!
26. Accessibilité web pour les édimestres
Les images
Pour les images décoratives, ne
remplissez pas le « alt »
27. Accessibilité web pour les édimestres
Les images
Toute image dans une page Web si elle
illustre un schéma, un graphe, un
organigramme ou un diagramme, doit
comporter une description complète de
l’illustration sur la même page Web
30. Accessibilité web pour les édimestres
Les images
L’animation des gifs animés ne
doit pas dépasser les 5
secondes!
31. Accessibilité web pour les édimestres
Les entêtes
Exemple de structure valide :
H1 – Titre 1
H2 – Titre 2
H3 – Titre 3
H3 – Titre 3
H2 – Titre 2
H3 – Titre 3
H4 – Titre 4
37. Accessibilité web pour les édimestres
Les entêtes
Souvent les édimestres ne respectent pas
les structures des entêtes à cause de la
taille de police des titres : « Je n’aime pas
les H3, ils sont trop gros! »
Dans ce cas, demandez aux intégrateurs
de modifier la taille de police du titres!
38. Accessibilité web pour les édimestres
Les entêtes
Évitez les titres dans les listes à
puces!
42. Accessibilité web pour les édimestres
Outils – Tableaux complexes
Pour les tableaux complexes, les édimestres
doivent remplir le champ « id » pour les
titres, et le champ « header » pour les
cellules.
Par défaut, le champ « header » n’existe pas
dans TYPO3.
52. Accessibilité web pour les édimestres
Les contenus textuels : Les abréviations
Dans certains cas, les abréviations sont plus
connues que la forme complète, dans ce cas,
n’utilisez pas la balise abbr!
Exemple : CÉGEP
53. Accessibilité web pour les édimestres
Les contenus textuels : Ordre logique
Rédigez vos contenus en respectant un
ordre logique.
Exemple : Une nouvelle :
Date
Titre
Texte de la nouvelle
Il est préférable de placer la date à la suite
du titre!
54. Accessibilité web pour les édimestres
Les contenus textuels : Balisage
Les listes à puces, les blocs « blockquote » et les
tableaux doivent seulement être utilisé pour leur
utilisation première (énumérations, citations et
présentation de données), ces balises ne doivent
jamais être utilisé que pour la présentation.
57. Accessibilité web pour les édimestres
Les contenus textuels : Les blockquote (citations)
58. Accessibilité web pour les édimestres
Les contenus textuels : Rédaction
● Utiliser un langage simple
● Découper le contenu
● Utiliser des phrases courtes
● Utiliser de courts paragraphes
● Utiliser des listes plutôt que des paragraphes
How users read on the web, Jakob Nielsen
59. Accessibilité web pour les édimestres
Les contenus textuels : Rédaction
Vous pouvez utiliser un outil d'analyse en
ligne pour savoir si vos textes sont assez
simple à lire :
http://labs.translated.net/lisibilite-texte
Le niveau de facilité à lire ne devrait jamais
dépassé « Moyen »
60. Accessibilité web pour les édimestres
Les contenus textuels : Rédaction
Quand vous écrivez un contenu
en une langue différente que
celle de la page, il faut spécifier
le changement de langue!
64. Accessibilité web pour les édimestres
Et les couleurs ? Et la taille du texte?
Généralement, on ne donne jamais aux
édimestres l’accès à modifier les couleurs, et
la taille de la police d’écriture : Il s’agit d’un
travail d’intégrateurs et de designers!
65. Accessibilité web pour les édimestres
Contact
Courriel : mrebai@infoglobe.ca
Twitter : @mow_r
