Site web

Et aussi les vidéos, les podcasts et tout autre contenu numérique

Lisible, compréhensible, utilisable par tous

Pas seulement quelqu'un qui se trouve dans des conditions idéales

Photo: Bajstock

Mais aussi des personnes qui ont des difficultés (parfois temporaires)

• de perception
• de compréhension
• de motricité

About 15% of the world's population lives with some form of disability.

Pensez aussi à

• Votre grand-père
• Vous-même en vacances
• Votre voisin qui s'est cassé le "bon" bras
• Votre nièce dyslexique
• Vos cousins daltoniens
• ...

Aides techniques

Claviers adaptés

Claviers adaptés

Joystick, trackball, puff & sip

Switch

Plage braille

Lecteur d'écran

Reconnaissance vocale

Fonctionnalités des navigateurs

• Zoom
• Agrandissement de texte
• Feuille de style haut contraste
• Accentuer le focus (Safari)
• Extensions

9 profils différents

• 9 manières différentes de surfer
• Les obstacles rencontrés
• Comment les éviter

Nina

Nina

• Institutrice
• Adore le scrapbooking
• S'entraîne pour un marathon
• TDA (Trouble du déficit de l'attention)
  et dyslexie

Nina lit difficilement quand il y a du mouvement sur la page.

Mouvement

• Pas OK : Mouvement, son, mise en page surchargée
• Pas OK : Diaporamas sans bouton 'STOP'
• Pas OK : Textes qui défilent
• Pas OK : Vidéo d'arrière-plan

Mouvement contrôlé

• OK : Animations qui ne durent que quelques secondes
• OK : Diaporama avec bouton 'Pause'
• OK : Défilement de texte avec bouton 'Pause'
• OK : Vidéo d'arrière-plan avec bouton 'Pause'
• OK : Gifs animés qui ne démarrent pas tout seuls

Texte difficilement lisible

Conseils

Donnez le contrôle au visiteur : Prévoyez un bouton 'pause'.

Préférez arrière-plans unis, les bons contrastes

Ressources

• Openweb - Interview de Monique Brunel
• AnySurfer - Les animations peuvent être arrêtées
• Contrastes
• Color contrast analyser
• Tanaguru Contrast-Finder

Jerry

Jerry

• Étudiant en psychologie
• Fan de snowboard
• Daltonien

Daltonisme

• Différents types de daltonisme (8 à 10% des hommes):
• deutéranopie (ne distingue pas le rouge du vert)
• protanopie (rouge)
• tritanopie (bleu)
• Très rares cas d'absence totale de perception de couleurs (achromatopsie)
• Test de couleurs Ishihara

Jerry ne distingue pas bien le rouge du vert.

Où sont les pistes vertes? - le tableau vu par Jerry

Où sont les pistes vertes? - le tableau vu avec vision normale

Informations sur les arrivées et départs

Le même tableau avec couleurs et textes:

Diagramme pas lisible pour Jerry

Diagramme lisible

Conseil

Ne pas utiliser uniquement la couleur pour véhiculer l'information

Outils et ressources

• Openweb : interview de Thomas Zilliox
• Color contrast analyser
• We are colorblind

Philippe

Philippe

• 73 ans
• Passionné de trains
• Connaissances de base en informatique
• Malvoyant et malentendant

Philippe utilise un logiciel d'agrandissement avec un facteur d'agrandissement de 6.

Un formulaire

Le même formulaire après zoom

Un autre formulaire après zoom

Pas possible de d'inscrire sur un forum

Parfois aussi un captcha audio

Un meilleur CAPTCHA

Conseil

Pensez aux petits écrans et au zoom lors du design

Conseil

Évitez le SPAM sans CAPTCHA

Tommy

Tommy

• Amateur de jeux vidéo
• Travaille comme jardinier dans une entreprise de travail adapté
• Léger handicap mental
• Niveau de lecture B1

Tommy peut lire des textes simples avec un vocabulaire de la vie de tous les jours.

Niveaux de lecture

• A Niveau de base
  • A1 noms familiers, des mots et phrases très simples
  • A2 prospectus, menus, horaires
• B Autonomie
  • B1 texte dans langage de tous les jours
  • B2 article de journal
• C Maitrise
  • C1 article spécialisé long, texte littéraire
  • C2 thèse de doctorat

Aux Pays-Bas 75% des textes de sites web publics sont de niveau C1, mais 40% de la population a un niveau de lecture B1.

Trop compliqué

"Une indemnité de remplacement de revenu est accordée à la personne handicapée s'il est établi que en raison de son état physique ou mental, sa capacité de gain est réduite à un tiers ou moins de ce qu'une personne en bonne santé peut gagner sur le marché général du travail par l'exercice d'une profession."

Plus facile à comprendre

"Si une personne handicapée ne peut gagner qu'un tiers de ce que gagne une personne en bonne santé, elle reçoit une indemnité de remplacement."

Conseils

• Écrivez pour le niveau de votre public
• Pas de jargon
• Textes courts
• Texte assez grand

Ressources

• Synthèse sur le langage clair
• Unapei : Accessibilité et handicap mental

Jim

Jim

• Père de deux enfants
• Aime les voyages et la technologie
• Handicap moteur et difficultés pour parler

Jim ne peut pas utiliser de souris. Il utilise une licorne et un clavier.

Menu déroulant

• Pas OK : Menus déroulants qui ne s'affichent qu'avec la souris francofolies et British Airways
• OK : Menu déroulant utilisable au clavier

Focus

• Pas OK : Difficile de Signaler un problème à la poste car focus pas visible sur les liens du contenu.
• OK : Pas de problème sur belgium.be (focus par défaut).

Ordre de tabulation

• Pas OK : Ordre de tabulation pas logique sur l'ancien site des TEC et sur Brussels Airlines
• Pas OK : Problème de déplacement du focus avec les lightbox sur Gîtes de France
• OK : Exemple de lightbox avec ordre de tabulation logique et, encore mieux, fenêtre modale avec focus piégé

Infobulles

• Pas OK : Infobulle qui apparaît seulement au survol de la souris
  
• OK : Infobulle accessible au clavier

Autres problèmes dans les formulaires

• Pas OK : Faux Bouton d'envoi sur l'espace personnel Wallon
• Pas OK : Pas possible de remplir la date au clavier sur le formulaire de Brussels Airlines

Conseil

Tout ce qui peut se faire avec la souris doit aussi pouvoir se faire au clavier (TAB)

Conseil

Prenez quelques minutes pour tester votre site au clavier uniquement

Ressources

• La totalité du site est utilisable au moyen du clavier
• L'ordre de tabulation
• Accessible modal dialog
• Accessible mega menu
• Openweb : rétablissons l'outline

Hilde

Hilde

• Graphiste
• Bloggueuse
• Sourde

Hilde n'entend rien mais elle parle bien le français.

Vidéos

• Pas OK : Pas possible de suivre une vidéo sans sous-titres ou avec de mauvais sous-titres (automatiques).
• OK : OK quand il y a des sous-titres pour sourds et malentendants (texte et autre info sonore)

Podcasts

• Pas OK : Un podcast sans retranscription est comme un livre avec des pages blanches.
• OK : Un podcast avec retranscription textuelle rend le contenu accessible.
  

Conseils

• Sous-titrez les vidéos dans la langue de la vidéo (CC)
• Fournissez une retranscription pour les podcasts

Ressources

• Blog : Vis ma vie de Sourde
• Sous-titrer facilement à l'aide de Youtube
• Infos sur l'accessibilité des vidéos

David

David

• Expert-comptable
• Amateur de musique et de littérature
• Aveugle de naissance

Utilise un PC avec lecteur d'écran

Son

• Pas OK : Son qui démarre automatiquement
• OK : Prévoir un bouton pour démarrer le son et donner le contrôle au visiteur

Langue mal indiquée

• Pas OK : Page incompréhensible car la langue est mal indiquée (Audio: page en français lue par JAWS en anglais)
• OK : Quand la langue est bien indiquée le site est lu avec la bonne prononciation (Audio: la même page lue correctement)

Structure

• Pas OK : Aucun titre dans la page : pas de structure
• OK : La structure de titres correspond à la structure visuelle

Formulaires

• Pas OK : Formulaire mal construit : inutilisable
• OK : Le même formulaire, bien construit : utilisable

Images sans alternative

• Pas OK : Beaucoup trop de contenu dans des images sur le site de l'Atomium
• OK : Le texte des images est dans l'attribut alt sur le site des Musées royaux des beaux arts de Belgique

Conseils

• Ne faites pas démarrer le son automatiquement
• Configurez la langue correctement
• Utilisez les éléments de structure (titres, listes,...)
• Donner des alternatives textuelles aux images
• Relier chaque champ de formulaire à son étiquette avec l'élément label

Ressources

• Interviews de Tanguy Lohéac, Soufiane El Jamil et Sylvie Duchateau par Openweb
• Infographie: quelle alternative textuelle pour mon image?
• La langue des pages est indiquée
• Les pages sont structurées par la sémantique
• Les champs sont reliés à leur label

Karolijn

Karolijn

• Expat hollandaise à Bruxelles
• Travaille à la commission Européenne
• Souffre de TMS

Karolijn utilise un logiciel de reconnaissance vocale pour soulager ses articulations.

Exemple

Dragon Naturally Speaking

Exemples de problèmes

• Pas OK : Boutons image sans alternative textuelle
• Pas OK : Faux champs de formulaire
• Pas OK : Beaucoup de liens 'cliquez ici' sur une page

Les mêmes problèmes que David et Jim

Conseil

Appliquez les standards du web et les bonnes pratiques d'accessibilité

Steve

Steve

• Apple fan boy (iPhone & Macbook Air)
• Travaille dans la pub
• Navetteur
• Ne déconnecte pas souvent

Steve est parfois en situation de handicap lorsqu'il est en mobilité

Vue

• Petit écran, mauvaise luminosité
• Éléments qui disparaissent dans la version mobile (responsive)
• Mauvaise connexion internet : pas d'images, difficulté à télécharger vidéos
• Pas de support pour Flash

Motricité

• Trop petite zone cliquable
• Clavier plus difficile à utiliser
• Impossibilité d'effectuer certaines actions prévues pour la souris

Ouïe

• Bruit environnant ou silence
• Pas d'écouteurs

Conseil

Les directives d'accessibilité aident aussi les utilisateurs mobiles.