Accessibilité et efficience

Définition officielle ✔

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

Plutôt éloigné de la « prise en compte du handicap », pas vrai ?

Démystifions tout ça.

Les ❹ principes des wcag

Perceptible

L’information et les composants de l’interface utilisateur doivent être présentés à l’utilisateur de façon à ce qu’il puisse les percevoir.

Utilisable

Les composants de l’interface utilisateur et de navigation doivent être utilisables.

Compréhensible

Les informations et l’utilisation de l’interface utilisateur doivent être compréhensibles.

Robuste

Le contenu doit être suffisamment robuste pour être interprété de manière fiable par une large variété d’agents utilisateurs, y compris les technologies d’assistance.

Ça a l’air bien, non ? ☺

Situation de handicap ♿

Être handicapé est relatif à un contexte

De nombreux contextes peuvent mettre n’importe qui dans une situation de handicap :

• Utiliser un ordinateur portable en extérieur alors qu’il fait grand soleil ;
• Naviguer sur son smartphone tactile par -10° ;
• Regarder une vidéo dans un lieu public avec le son coupé ;
• Naviguer sur un site web avec une connexion bas débit ;
• On sera tous vieux un jour ☺.

100% accessible n’existe pas

Autant attaquer un moulin à vent sur une licorne

Le w3c lui-même — au travers de la wai et des wcag — recommande de ne pas chercher à atteindre la conformité maximale.

Il faut privilégier une démarche de mise en accessibilité.

Vous en faites déjà !

Tout le monde aime bien faire son travail ❤

Chacun a son savoir-faire et ses règles de travail. Et nous apprécions tous de découvrir et implémenter de bonnes pratiques, c’est grisant.

Parlons-en ! Quels sont vos critères de qualité, vos domaines d’expertise ?

Si je vous dis…

• Ergonomie ;
• Performance ;
• rwd ;
• seo ;
• Lisibilité, hiérarchie de l’information ;
• Internationalisation…

Tout le monde a déjà touché à un de ces machins, n’est-ce pas ?

Chaque métier contribue

L’accessibilité n’est ni une compétence ni une prestation, puisqu’elle impacte chaque maillon 🔗 de la chaîne de production.

C’est une perspective différente sur la vie de vos projets.

Détaillons les implications par métiers, à travers des critères sélectionnés avec amour ❤.

Décideur

Client, prospect ou moa

Petite piqûre de rappel : la demande doit venir du décideur (être mentionnée dans l’appel d’offres, par ex.) voire est la responsabilité légale du décideur — dans le cas des organismes publics notamment. Un petit conseil, quand même :

Ne pas vouloir copier ce que font les autres.

Monique Brunel (@webatou) 10 juin 2015

Ainsi pour un prestataire, une démarche cohérente au sujet de l’accessibilité est un atout lorsque vous êtes mis en concurrence.

Dirigeants

De grandes responsabilités impliquent de grands pouvoirs

Sans participer à la mise en conformité technique, les dirigeants sont responsables du super-critère ⚛ : impulser dans les équipes la culture de l’accessibilité, et l’afficher fièrement.

Une manière simple et efficace d’y parvenir est de poser à vos interlocuteurs la question suivante, dans chaque discussion :

— Et l’accessibilité ?

Avant-vente

Là, on commence à rigoler : ici, vous interrogez probablement vos équipes pour bâtir une proposition convaincante.

C’est l’occasion rêvée de déterminer :

• le niveau d’accessibilité à viser ;
• les thématiques et critères non applicables ;
• et parfois alerter le prospect sur des écueils potentiels.

Vous gagnerez en crédibilité et mettrez peut-être à l’amende certains concurrents ✌.

Chef de projet

Selon le portail des métiers de l’internet, « il coordonne le travail de tous les acteurs du projet et veille au respect de la qualité, des délais et du budget ». Ainsi il peut :

• accompagner les équipes vers le seuil de qualité visé (point trop n’en faut) ;
• proposer un échantillon représentatif à tester ;
• se faire le relais de la direction en demandant sans cesse « Et l’accessibilité ? ».

Par exemple, vérifier l’orthographe et la compréhensibilité de l’interface et connaître les notions de base vous permettront de maintenir un niveau confortable pour tous.

Ergonome

Plusieurs thématiques vont intéresser un concepteur/ergonome : formulaires, navigation, structuration et présentation de l’information notamment. Voyons un exemple :

Critère 12.2 [AA]

Dans chaque ensemble de pages, le menu ou les barres de navigation sont-ils toujours à la même place (hors cas particuliers) ?

Ergonome, 2^e acte

On peut également citer :

• la présence du fil d’Ariane ;
• l’indication de la page en cours de consultation ;
• ou encore le moteur de recherche atteignable de la même façon sur l’ensemble des pages.

Rien d’extraordinaire, n’est-ce pas ? Et le mieux c’est que WordPress permet de gérer ça très facilement, au niveau du thème !

da et graphiste

Les déficiences visuelles sont un trouble banal et pourtant rarement pris en compte dans les créations graphiques : dans l’assistance, combien de personnes portent des lunettes ☺ ?

Critère 3.3 [AA]

Dans chaque page Web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé (hors cas particuliers) ?

Astuce : utilisez l’excellent Contrast-Finder de Tanaguru.

da et graphiste, 2^e acte

Il n’y a pas que les contrastes dans la vie

Je vous recommande chaudement ces critères :

• l’information ne doit pas être donnée que par la couleur ;
• conserver les accents sur les lettres capitales ;
• les blocs de texte n’excèdent pas 80 caractères de largeur (AAA) ;
• les champs obligatoires doivent être indiqués visuellement ;
• le texte ne doit pas être justifié.

Mais surtout, dialoguez avec votre équipe car un graphiste peut apporter des solutions astucieuses, y compris à des problèmes purement techniques. N’hésitez pas !

Développeur

Le rôle du développeur concerne (au minimum) la préparation des mécanismes back-end particuliers, tels que des contraintes sur les formulaires avancés :

Critère 11.10 [A]

Dans chaque formulaire, le contrôle de saisie est-il utilisé de manière pertinente ?

Une contrainte serveur ne prévient pas l’utilisateur, alors qu’un soupçon de front-end le fera pour vous !

En parlant de front-end, entrons dans le vif du sujet ⚔ !

Intégrateur

Le héraut de l’accessibilité ⚑

Difficile de choisir un critère, tant l’intégrateur est la personne indiquée pour la majorité des cas. En voici un dont vous me direz des nouvelles ♻ :

Critère 8.2 [A]

Pour chaque page Web, le code source est-il valide selon le type de document spécifié (hors cas particuliers) ?

Référenceur

Ici, pas de mystère : nous allons parler sémantique.

Critère 9-1 [A]

Dans chaque page Web, l’information est-elle structurée par l’utilisation appropriée de titres ?

Astuce : vous pouvez utiliser l’extension Web Developper — disponible sur Firefox et sur Chrome — pour afficher le plan du document.

Contributeur ✍

La pertinence des contenus

Ça ressemble à du bon sens, n’est-ce pas ? C’est pourtant crucial pour la vie d’un site et pour ses utilisateurs. Pas étonnant que 31 critères dans le rgaa3 y soient dédiés !

Sur WordPress, de nombreuses extensions permettent de contribuer des formulaires ou des iframes, par ex.

Esprit d’équipe

Culture et adn

Pour être efficiente, une équipe doit intégrer sa démarche accessibilité à son quotidien — en commençant par l’évoquer régulièrement dans les discussions. Il s’agit donc de la rendre naturelle et transparente pour tous.

L’important est d’instaurer une atmosphère bienveillante et motivante pour évoluer dans une mécanique de progression perpétuelle.

Comment feriez-vous ça ⚙ ?

Esprit d’équipe

Quelques pistes :

• utiliser des composants réutilisables ♻ et documentés : WordPress s’y prête bien grâce aux thèmes, thèmes enfants, extensions et extensions obligatoires ;
• déterminer ensemble ☮ quels référentiels suivre et sur quelles ressources vous appuyer ;
• rendre ces tâches ludiques ♘ et didactiques afin de les intégrer efficacement ;
• prendre du temps ⌚ pour dialoguer, échanger vos connaissances et faire découvrir aux autres des points méconnus.

Ressources ❤

• Les notices AcceDe Web par la société Atalan ;
• Les checklists qualité Opquast également disponibles sous forme d’extension pour Firefox ;
• des ressources passionantes proposées par Digital Pulse (en anglais) :
  • un jeu de cartes (pdf en anglais, 740kB) pour « ajuster les attitudes » et devenir un champion de l’accessibilité ;
  • cartographie des wcag (pdf en anglais, 320,2kB).
• quelques réflexions partagées sur Openweb au sujet des pièges à éviter ;
• une note de la wai sur le partage des responsabilités de l’accessibilité (en anglais).