Presentation Accessibilité web

1. humanitaire
Accessibilité Web
Réalisé par:
Samah Filali

2. Slide Title
Lorsque nous parlons d'accessibilité dans le contexte du Web, nous
parlons de créer des sites et des applications avec lesquels tout le monde
peut naviguer et interagir. De nombreux développeurs traitent
l'accessibilité comme une réflexion après coup, pensant que seule une
minorité de leur base d'utilisateurs bénéficierait de l'effort. Ils ne
réalisent pas que 15 % de la population mondiale vit avec une forme
de handicap. C'est un milliard de clients potentiels que vous
détournez.
Introduction

3. Slide Title
L’accessibilité du web signifie que les sites web, les outils et
les technologies sont conçus et développés de façon à ce que
les personnes handicapées puissent les utiliser. Plus
précisément, les personnes peuvent :
percevoir, comprendre, naviguer et interagir avec le web
contribuer sur le web
Accessibilité Web

4. Slide Title
L’accessibilité du web bénéficie également aux personnes sans handicap, comme
par exemple :
Accessibilité Web
• les personnes utilisant un téléphone mobile, une montre connectée,
et autres périphériques ayant des petits écrans, différents modes de saisie, etc.
• les personnes âgées dont les capacités changent avec l’âge
• les personnes ayant un « handicap temporaire » tel qu’un bras cassé ou perdu
leurs lunettes.

5. Slide Title
Accessibilité Web
• les personnes ayant « une limitation situationnelle » comme être en plein
soleil ou dans un environnement où elles ne peuvent pas écouter l’audio
• les personnes utilisant une connexion internet lente ou ayant une bande
passante limitée.

6. Slide Title

7. Slide Title
Les lecteurs d'écran
Un lecteur d'écran est un outil qui lit à haute voix le contenu affiché à
l'écran. Les utilisateurs malvoyants comptent sur les lecteurs d'écran pour
pouvoir interagir avec leurs appareils.
Les lecteurs d'écran lisent les sites Web dans un ordre linéaire - de haut en
bas, de gauche à droite.

8. Slide Title
Appareil braille
permet aux utilisateurs aveugles de lire
des sites Web. Tout comme les moteurs
de recherche, les lecteurs d'écran et les
appareils braille, ils n'interprètent que le
texte écrit (fournissent du texte alternatif
pour tous les éléments non textuels

9. Slide Title
Historique
Louis Braille né le 4 janvier 1809 à Coupvray et
mort le 6 janvier 1852 à Paris est un enseignant,
inventeur et musicien français .
Il est l’inventeur éponyme d’un système d’écriture
tactile à points saillants, à l’usage des personnes
aveugles ou fortement malvoyantes .
Wikipédia
Louis Braille

10. Slide Title

11. Slide Title
Les éléments focalisables
Les éléments focalisables : Tous les éléments interactifs doivent être
focalisables (bouton, lien,...) et les éléments non interactifs (exemple :
<div>, <span>, <p>, et <a> without href) ne doivent pas être focalisables.

12. Slide Title
Les éléments focalisables
 Assurez-vous que l'élément qui a actuellement le focus est clair. Les
utilisateurs voyants s'appuient sur une sorte d'indicateur visuel pour savoir
où ils se concentrent.
 Évitez de supprimer le contour par défaut des éléments pouvant être
focalisés avec des éléments tels que outline : 0 ou outline : none.

13. Slide Title
aria-hidden
Masquer le contenu de lecteurs d'écran ou n'importe quelle technologie
d'assistance .les éléments aria-hidden="true" ne contiennent pas d'éléments
focalisables(exemple: contenu purement décoratif, comme des icônes ou des
images contenu dupliqué, tel que du texte répété contenu hors écran ou
réduit, tel que les menus)

14. Slide Title
aria-hidden
Selon la quatrième règle d'ARIA, aria-hidden="true" ne doit pas être utilisé
sur un élément focalisable. De plus, étant donné que cet attribut est transmis
par les enfants d'un élément, il ne doit pas être ajouté au parent ou à l'ancêtre
d'un élément pouvant être focalisé.
L'utilisation d'aria-hidden="false" ne ré-exposera pas l'élément à la
technologie d'assistance si l'un de ses parents spécifique aria-
hidden="true".

15. Slide Title
aria-hidden (Exemple)
 Il faut ajouter l'attribut aria-hidden= "true" pour empêcher lecteurs d'écran de
lire le code "e909"
Il faut ajouter la classe sr-only: screen read only pour comprendre qu'elle est
Retour à l'accueil
<a href="/" aria-label="Retour à l'accueil">
<span class="sr-only">Retour à l'accueil</span>
<i class="icon-home" aria-hidden=true></i>
</a>
.icon-home:before {
content : "e909" ;
}

16. Slide Title
Label for
 Il faut utiliser l'étiquette à la saisie du formulaire et indiquer clairement
comment le remplir si vous ne pouvez pas le voir. Si vous y accédez avec
certains lecteurs d'écran, vous ne recevrez peut-être qu'une description du type
« modifier le texte ».
<label for="firstname">
Prénom :<input type="text" name=" firstname" id=" firstname ">
</label>

17. Slide Title
Liens
 Il faut éviter les liens vides qui n'avaient pas de sens.
 Évitez "cliquez ici", "aller", "en savoir plus" ou les images en tant que
liens car elles n'ont pas de sens hors contexte
 Utiliser suffisamment d'espace entre les liens
 Ne placez pas plus de 20 liens sur une page

18. Slide Title
Lien (Contenu principal)
Vous savez que l'utilisateur peut passer directement au contenu principal,
surtout si vous avez une longue section de navigation. Les utilisateurs de
clavier doivent accepter sur la touche Tab pour parcourir tous les éléments
interactifs avant d'accéder au contenu qu'ils désirent. Si toutes vos
applications ont une navigation longue, cette expérience peut être
extrêmement frustrante.
 Fournissez un lien au début de votre application pour passer au contenu
principal.(“skip navigation links”).

19. Slide Title
Images
 Il faut ajouter des alt significatifs dans les images sauf les images
décoratives alt doit être vide .

20. Slide Title
Ordre Navigation clavier
 Eviter de modifier l'ordre naturelle de tabulation puisque le site est organisé de
manière logique. L'attribut tabindex permet de modifier ce parcours "naturel".
 La "tabulation" commence par l'élément portant le tabindex le plus petit, puis
elle suit l'ordre croissant des tabindex.
 tabindex =-1 l’élément ne peut être atteint via la navigation au clavier .
 Soyez prudent lorsque vous implémentez des fonctionnalités telles que le
défilement infini.

21. Slide Title
Attribut « role »
 Fournissez des repères ARIA en utilisant des balises telles que <header>,
<nav> et <main>, ou en utilisant l'attribut role.
 Eviter l’utilisation des balises des style comme <i><b>(classifié comme
une erreur de niveau de conformité WCAG car les lecteurs d'écran
n'annoncent pas ces changements à l'utilisateur du lecteur)
 Utilisez balisage sémantique <strong> <em>

22. Slide Title
Titres et sous titres
 H1 H2 H3: l'utilisation des en-têtes H1, H2, H3... aide au référencement
du site et permet aux utilisateurs de parcourir le contenu, car les lecteurs
d'écran peuvent être configurés pour lire uniquement les en-têtes .
 Les titres principaux et les sous-titres dans les en-têtes H1, H2… sont
significatifs et contiennent des mots-clés .
 Des langages simples améliorent la convivialité et le référencement.

23. Slide Title
Texte
Eviter d'utiliser un langage et des caractères qui ne sont pas lus clairement par
le lecteur d'écran. Par exemple:
 N'utilisez pas de tirets si vous pouvez l'éviter. Au lieu d'écrire 5-7, écrivez 5
à 7.
 Développez les abréviations — au lieu d'écrire Jan, écrivez Janvier.

24. Slide Title
Texte
 Développez les acronymes, au moins une ou deux fois. Au lieu d'écrire du
HTML dans un premier temps, écrivez Hypertext Markup Language.
<abbr title= "HyperText Markup Language">HTML</abbr>

25. Slide Title
Couleur et contraste de couleur
 Ne vous fiez pas exclusivement à la couleur pour mettre en évidence les
champs obligatoires dans les formulaires (le daltonisme touche près de 10
% de la population.) Alors qu'un code couleur peut être un raccourci vers
une communication plus rapide et plus efficace sur les fonctionnalités,
n'oubliez pas les étiquettes pour expliquer les fonctions cruciales.
Exemple d'outils de vérification du contraste en ligne :
https://webaim.org/resources/contrastchecker/

26. Slide Title
Couleur et contraste de couleur
 Éviter l'utilisation de la couleur seule pour donner ou faire ressortir une
information Par exemple: disons qu'il y a une erreur avec un champ de
saisie. Le contour de la case en rouge est un bon moyen de
communiquer un problème, mais également d'inclure une icône de
point d'exclamation pour une accessibilité plus complète.

27. Slide Title
Les fenêtres Pop-up
 Éviter les fenêtres pop-up car le contenu ne change pas sans saisie
directe.
 Évitez les pages de démarrage et la musique d'introduction (interférer
avec les lecteurs d'écran)

28. Slide Title
Transcription(Audio/vidéo)
Les utilisateurs peuvent lire du texte mais nécessitent des sous-titres et une
transcription pour interpréter le contenu audio et vidéo.
 Fournissez toujours une transcription pour le contenu vidéo et audio. la
transcription ajoute du contenu riche en mots clés à votre site, ce qui
améliore votre référencement.

29. Slide Title
Gestion d’événements
mouseover, mouseout, dblclick, etc. Les fonctionnalités qui s'exécutent en
réponse à ces événements ne seront pas accessibles à l'aide d'autres mécanismes,
tels que les contrôles du clavier.
 Pour résoudre de tels problèmes, utilisez les gestionnaires d’ événements
indépendants du périphérique (focus, blur,...) fourniraient une accessibilité
aux utilisateurs de clavier.

30. Slide Title
Avantage accessibilité web
+ Meilleure ergonomie du site
+ Améliorer vos positions dans les résultats de recherche (SEO)
+ Image positive de l'entreprise
+ Augmentation de la popularité du site web
+ C'est ce qu'il faut faire (Humanitaire)

31. Slide Title
Rendre vos sites web accessibles
 Il est plus efficace d’incorporer l’accessibilité au début d’un projet pour
ne pas avoir à revenir en arrière et recommencer le travail.
 Évaluer l’accessibilité: https://www.webaccessibility.com

32. Merci