Visitez le site web de JAKALA

FFW fait maintenant partie du groupe JAKALA.

Sandwich

Royaume-Uni.

Copenhague

Odense

Danemark.

Berlin

Hambourg

Düsseldorf

Allemagne.

Paris

Strasbourg

France.

Dniepre

Mykolaïv

Ukraine.

Chisinau

Moldavie.

Sofia

Veliko Tarnovo

Gabrovo

Plovdiv

Bulgarie.

Hanoï

Vietnam.

Boise

New Jersey

USA.

Bucarest

Roumanie.

Vienne

Autriche.

Accueil

À propos

Projets

Services

Ressources

Contactez-nous

English

Dansk

Français

Deutsch

English UK

Imaginez le cadre idéal pour lire un livre. Dans mon cas, il neige, je suis allongée sur le canapé près de la cheminée avec une tasse de thé bien chaude à côté de moi. Vous ouvrez le nouveau roman tant attendu de votre auteur préféré et... les pages sont blanches. Quoi ? La frustration monte car vous vouliez vraiment vous plonger dans les aventures du protagoniste, mais vous ne pouvez pas. Vous savez maintenant ce que l'on ressent lorsqu'une personne handicapée essaie d'utiliser votre site Web non conforme aux normes WCAG.
Voici l'exemple d'une personne malvoyante qui utilise une technologie d'assistance pour naviguer en ligne. L'accessibilité du Web couvre un large éventail de handicaps qui doivent être pris en considération - cécité, daltonisme, surdicécité, surdité, basse vision, handicaps cognitifs, troubles de l'épilepsie, et autres. Et, comme vous pouvez l'imaginer, chaque type de handicap requiert une solution différente. Habituellement, pour déterminer l'impact, les gens s'appuient souvent sur des statistiques. Malheureusement, il n'existe pas d'approche fiable et unifiée de la collecte de ces données dans le monde, et je ne peux donc pas vraiment vous donner de chiffre - mais ce n'est pas l'essentiel. Ce que beaucoup de gens ignorent, c'est qu'il existe aussi des handicaps temporaires que tout le monde peut subir, comme une opération chirurgicale. Et que se passe-t-il lorsque vous poussez votre bébé dans une poussette ? Vous ne pouvez pas vraiment monter les escaliers, n'est-ce pas ? Et si vous regardez votre téléphone en plein soleil, un meilleur contraste des couleurs ne serait-il pas utile ?
Vous savez maintenant que le fait de s'assurer que les personne en situation de handicap peuvent accéder à votre site Web et l'utiliser pleinement aide les personnes en bonne santé dans différentes conditions. Mais les avantages ne s'arrêtent pas là. L'accessibilité améliore grandement votre optimisation pour les moteurs de recherche, ce qui augmente votre portée et votre clientèle. Enfin, et ce n'est pas le moins important, vous économiserez de l'argent en cas de poursuites judiciaires. Selon le pays et le secteur dans lequel vous exploitez votre plateforme, vous devez vous conformer à différentes lois et normes. Vous trouverez de plus amples informations sur le site Web du W3C, sous la rubrique Lois et politiques en matière d'accessibilité du Web.
 
Si vous avez lu jusqu'ici, cela signifie que vous êtes prêt à rendre votre site Web plus accessible, tant mieux pour vous, mais parlons maintenant de la manière de repérer les problèmes et de les résoudre. Les normes industrielles (WCAG) sont créées sur la base de quatre principes : Percevable, Exploitable, Compréhensible et Robuste (ou POUR).
 
<ul>
<li style="font-weight: 400;" aria-level="1">Percevable - il s'agit de tous les moyens biologiques dont nous disposons pour recueillir des informations : la vue, le son, l'odorat, le goût et le toucher. Dans le cadre de l'accessibilité du Web, nous nous intéresserons uniquement à la vue, à l'ouïe et au toucher. Pour faciliter la compréhension, imaginez que vous êtes privé d'un de ces sens. Notez que ce tableau n'est pas complet car nous ne pouvons pas couvrir tous les cas, mais l'objectif est de vous aider à comprendre comment aborder le développement de l'accessibilité du Web.</li>
<li style="font-weight: 400;" aria-level="1">Si vous ne pouvez pas voir le site Web, vous devez pouvoir l'entendre grâce aux technologies d'assistance. Cela signifie que le site doit être structuré de manière à ce que le lecteur puisse le parcourir dans le bon ordre et recevoir toutes les informations visuelles (images, vidéos, etc.).</li>
<li style="font-weight: 400;" aria-level="1">Si vous ne pouvez pas entendre, vous devez recevoir toutes les données uniquement par la vue. Cela signifie que nous devons utiliser des sous-titres lorsqu'il y a du contenu audio.</li>
<li style="font-weight: 400;" aria-level="1">Si, par malheur, vous ne pouvez ni voir ni entendre, votre expérience sur le web s'en ressentira. Le même texte qui aurait été raconté est maintenant converti en caractères braille ; - des figures tridimensionnelles qui peuvent être facilement distinguées au toucher.</li>
</ul>
En résumé, vous devez être en mesure de diffuser l'ensemble de votre contenu de deux manières au moins.
 
<ul>
<li style="font-weight: 400;" aria-level="1">Exploitable - cela signifie que la plate-forme que vous construisez est interfaçable par toutes sortes de sources d'entrée - pointeur (souris, stick labial, pointeur de tête), clavier (à l'écran et physique), écran tactile, reconnaissance vocale, etc. Je sais qu'il est impossible de couvrir tous les médiateurs d'entrée, alors que devons-nous rechercher ?</li>
</ul>
<ul>
<li style="font-weight: 400;" aria-level="1">Focus - vous devez pouvoir parcourir l'ensemble du site Web à l'aide du bouton "TAB" et le style de focus doit être en place. Lorsqu'il y a une fenêtre contextuelle, le focus doit automatiquement basculer vers celle-ci. Et lorsque vous terminez, il doit revenir à l'endroit où vous étiez.</li>
<li style="font-weight: 400;" aria-level="1">Temps - comme vous pouvez l'imaginer, les différents périphériques d'entrée nécessitent un temps différent pour effectuer la même opération. Par conséquent, s'il y a quelque chose qui demande du temps pour être terminé (une animation, une rotation, etc.), vous devez envisager de ralentir les choses ou de permettre une pause.</li>
</ul>
 
<ul>
<li style="font-weight: 400;" aria-level="1">Compréhensible - en tant que personne dont l'anglais n'est pas la langue maternelle, je peux parfaitement comprendre la douleur d'écouter un robot de synthèse vocale anglais qui massacre des mots de ma langue. C'est simplement parce que le robot ne comprend pas que la langue qu'il essaie de lire n'est pas l'anglais. Et cela est aussi simple que &lt;html lang="bg"&gt;. Si votre site ne comporte pas cette ligne, il devient inutilisable pour tous ceux dont la langue de repli des technologies d'assistance n'est pas la même.</li>
</ul>
Pour rendre la plate-forme plus compréhensible, il existe de bonnes pratiques à suivre lorsque vous essayez d'indiquer ce que l'utilisateur est censé faire - qu'il s'agisse d'un guide ou d'un message d'erreur de validation de champ obligatoire. Imaginez que vous n'ayez jamais vu un site web auparavant, que vous n'ayez jamais rempli un formulaire, etc. Pensez-vous que l'utilisateur puisse trouver rapidement ce qu'il cherche et suivre l'ensemble du processus ?
<ul>
<li style="font-weight: 400;" aria-level="1">Robuste - chaque personne a son navigateur de prédilection. Que vous utilisiez Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge ou tout autre navigateur moderne, vous obtiendrez des résultats similaires. Le mot clé ici est "similaires". Il en va de même pour les technologies d'assistance telles que les lecteurs. Puisque nous voulons que l'expérience soit la même pour tous, nous devons nous assurer que notre plateforme est "robuste".</li>
</ul>
Pour le faire il faut:
<ul>
<li style="font-weight: 400;" aria-level="1">Utiliser des balises HTML sémantiquement correctes. Lancer un validateur HTML/CSS pour s'assurer que tout est correct est toujours une bonne idée. Ce point, aussi simple qu'il puisse paraître, est extrêmement important ! Presque chaque balise a des spécificités, et voici quelques exemples :</li>
<li style="font-weight: 400;" aria-level="1">Avoir un &lt;title&gt; significatif</li>
<li style="font-weight: 400;" aria-level="1">Créez des points de repère en utilisant &lt;header&gt;, &lt;footer&gt;, &lt;main&gt;, etc..</li>
<li style="font-weight: 400;" aria-level="1">Les titres doivent être utilisés en tant que tels - pas seulement pour le style. Et s'il vous plaît - n'utilisez qu'un seul &lt;h1&gt; par page. Si, pour une raison quelconque, vous ne devez pas utiliser &lt;h1&gt;, vous pouvez obtenir les mêmes résultats pour les lecteurs d'écran en ayant : role="heading" aria-level="1".</li>
<li style="font-weight: 400;" aria-level="1">Même la mise en forme du texte devrait se faire avec &lt;em&gt;et &lt;strong&gt;et pas seulement avec CSS.</li>
</ul>
 
Les applications Internet riches accessibles (WAI-ARIA) sont aussi à prendre en compte. Les propriétés WAI-ARIA fournissent au client des informations supplémentaires sur le rôle du champ (c'est-à-dire la navigation), les propriétés qu'il possède (c'est-à-dire requises) et son état (c'est-à-dire désactivé). Comme la page change lorsque nous interagissons avec elle, les propriétés WAI-ARIA doivent également changer. Cela peut être réalisé avec JS afin que les valeurs reflètent ce qui est réellement sur l'écran.
 
En conclusion, l'accessibilité est de plus en plus appréciée par tous, et c'est normal. Espérons qu'en sensibilisant les gens et en montrant que ce n'est ni difficile ni coûteux, nous ferons de l'internet un meilleur endroit. Surfer sur le web devrait être un plaisir pour tous, alors embarquez avec nous et commencez à naviguer vers un avenir meilleur et plus accessible.

L'accessibilité numérique

Thought

4 tendances clés qui influencent la prise de décision technique

Soutenir la prochaine génération de tech

L'accessibilité web et la reconnaissance de marque

Dynamique sans limites : 2022 Next.js

Prix Women in Drupal 2022

L'importance de la découverte pour votre refonte: 3 raisons

Approche multi-sites : Économies, expansion et fidélisation

Que signifie la personnalisation?

Décrypter le jargon technique

Rencontrez-nous à DrupalCon Lille 2023

Acquia Engage Awards 2023

FFW présente le prix Women in Drupal 2023 

FFW et ses clients célèbrent les trois victoires d'Acquia Engage

Les décisions techniques clés dans un monde de plateformes numériques complexes

JAKALA fête 24 ans d'excellence

5 conseils pour obtenir un score de 100% sur Google Lighthouse avec Drupal

L'accessibilité web et la reconnaissance de marque

8 novembre 2022