search

demarches-simplifiees / demarches-simplifiees.fr

Dématérialiser et simplifier les démarches administratives
https://www.demarches-simplifiees.fr
GNU Affero General Public License v3.0
192 stars 88 forks source link

[Accessibilité] Les balises <img> doivent avoir un attribut "alt" #1565

Closed juliemoynat closed 6 years ago

juliemoynat commented 6 years ago

Bonjour,

J'ai décelé quelques problèmes d'accessibilité sur le site actuellement en production. Si 2 d'entre eux ont été corrigés par ailleurs, j'aimerais revenir sur le problème des images.

Les balises <img> doivent avoir un attribut alt. Si pour les images de décoration, on le laissera vide : <img src="image.jpg" alt="" />, pour les images qui sont dans des liens sans texte complémentaire, il faudra le remplir pour indiquer la fonction ou la destination du lien.

A noter que, pour les utilisateurs de lecteurs d'écran (logiciel qui restitue ce qui se passe à l'écran notamment utilisé par des personnes aveugles), les liens-images seront inutilisables car ils ne sauront pas à quoi servent les liens. Si l'attribut alt n'est pas présent, le lecteur d'écran lira l'attribut src. Avec des images qui ont des noms comme "logo-ds-9d843da1164309ef0bd2c541c1854795c8735ad286916e1ec2643d227d8279a6.svg", cela risque fort de faire fuir ces utilisateurs. Si l'attribut alt est présent mais vide, l'image sera tout simplement ignorée par le lecteur d'écran ; ce qui est souhaité pour toutes les images de décoration.

Petite liste pour les images concernées sur votre page d'accueil, dans l'ordre d'affichage :

  1. Le logo qui renvoie à la page d'accueil (image-lien donc, attribut alt à renseigner avec le nom du site) : 
    <a class="header-logo" href="/"><img src="https://www.demarches-simplifiees.fr/assets/header/logo-ds-9d843da1164309ef0bd2c541c1854795c8735ad286916e1ec2643d227d8279a6.svg" alt="Démarches simplifiées">
</a>
  2. L'image de l'ordinateur avec une feuille de papier qui en sort (image d'illustration donc alt présent mais vide) : 
    <div class="hero-illustration">
<img src="https://www.demarches-simplifiees.fr/assets/landing/hero/dematerialiser-ea523edae5f60897a3e711589bbe6b9d0be27070a82479a19a60fd1dc832d9ab.svg" alt="">
</div>
  3. Les images de la liste à puces Dialogue / collaboration / intégration (images d'illustration donc alt présent mais vide) : 
    <img class="feature-image" src="https://www.demarches-simplifiees.fr/assets/landing/features/messagerie-6960836b386209e78c65b99945b509227c44645a9cb8dc85952d664bd5753884.svg" alt="">
  4. Images qui illustrent les bandeaux "Administrations" et "Usagers" (images d'illustration donc alt présent mais vide) : 
    <div class="role-panel-30 role-administrations-image">
<img class="role-image" src="https://www.demarches-simplifiees.fr/assets/landing/roles/administrations-e9e7ac1676067b9915b0b6ed7ea63c7d1fe96412c2c6958a18c3e5f632b07b09.svg" alt="">
</div>
  5. Bandeau des citations : les guillemets sont des images décoratives donc attribut alt présent mais vide : 
    <img class="quote-quotation-mark" src="https://www.demarches-simplifiees.fr/assets/landing/testimonials/quotation-mark-0a88c3567c670427473796f2fbf1301ff2abef9bf6ecb60151d2c63aea45241d.svg" alt="">
  6. Bandeau avec tous les logos : ce sont des images-liens donc il faut renseigner l'attribut alt avec le nom des sites en destination (Note complémentaire : pour être valide, il ne doit pas y avoir d'espace dans la valeur de l'attribut target. On écrira target="_blank" et non pas "target="_blank ") 
    <ul class="users">
<li class="user">
    <a href="https://www.ecologique-solidaire.gouv.fr/" target="_blank">
        <img class="user-image" src="https://www.demarches-simplifiees.fr/assets/landing/users/mtes-809c15b6cce6b8945b22801aa4e51cf427fb2c4fd3c0f030d6271ca4b602872e.jpg" alt="Ministère de la transition écologique et solidaire">
    </a>
</li>
<li class="user">
    <a href="https://www.iledefrance.fr/" target="_blank">
        <img class="user-image" src="https://www.demarches-simplifiees.fr/assets/landing/users/region-idf-f5f834f280cc380b13afb5bcb65ffac2cb4a2376aded95f71b92817831747f30.jpg" alt="Île de France">
    </a>
</li>
<li class="user">
    <a href="http://www.artisanat.fr/" target="_blank">
        <img class="user-image" src="https://www.demarches-simplifiees.fr/assets/landing/users/chambres-de-metiers-a13bee191da38d67209e695406bf35b024626a3533be1ecbae3efb3fc3cf1581.jpg" alt="Chambres de Métiers et de l'Artisanat">
    </a>
</li>
<li class="user">
    <a href="http://www.cci.fr/" target="_blank">
        <img class="user-image" src="https://www.demarches-simplifiees.fr/assets/landing/users/cci-878de95b33a9a2d570358f0c592ff05c971104c90ab6871b1b62e988fb83fcb4.jpg" alt="CCI de France">
    </a>
</li>
<li class="user">
    <a href="http://www.driea.ile-de-france.developpement-durable.gouv.fr/" target="_blank">
        <img class="user-image" src="https://www.demarches-simplifiees.fr/assets/landing/users/driea-idf-21e3f8cce9213a940b5fe8f09e09793fd357cd5f9445e41369e63b2d522341f8.jpg" alt="Direction régionale et interdépartementale de l'Équipement et de l'Aménagement - Île de France">
    </a>
</li>
</ul>
<ul class="users">
<li class="user">
    <a href="https://www.debatpublic.fr/" target="_blank">
        <img class="user-image" src="https://www.demarches-simplifiees.fr/assets/landing/users/cndp-dcee7c3f20bafb661928938c5a7f3f3e214a18993950e263f9d0a2aad335c5b6.jpg" alt="CNDP">
    </a>
</li>
<li class="user">
    <a href="https://www.iledefrance.ars.sante.fr/" target="_blank">
        <img class="user-image" src="https://www.demarches-simplifiees.fr/assets/landing/users/ars-idf-c7521319b058e3190ddb0525ae0f5c39ecf78a3da2fe96e4d0ad698c7b6041cf.jpg" alt="Agence Régionale de Santé - Île de France">
    </a>
</li>
<li class="user">
    <a href="http://www.franceagrimer.fr/" target="_blank">
        <img class="user-image" src="https://www.demarches-simplifiees.fr/assets/landing/users/france-agrimer-d0f493c355ab5bc2649c179113cdb413436b7d318df668791b871b59d4afc5ce.jpg" alt="FranceAgriMer">
    </a>
</li>
<li class="user">
    <a href="http://www.rhone.gouv.fr/" target="_blank">
        <img class="user-image" src="https://www.demarches-simplifiees.fr/assets/landing/users/prefecture-rhone-5cde5dd61461b311d1e13012c175e86bb4b527347afa8245655bdf6fc6a130a9.jpg" alt="Préfecture de la Région Rhône-Alpes">
    </a>
</li>
<li class="user">
    <a href="http://www.lillemetropole.fr/" target="_blank">
        <img class="user-image" src="https://www.demarches-simplifiees.fr/assets/landing/users/mel-e6dedc00320aeff46407a06254c15d6deef26f3853146b991e256d3cd4df6bd1.jpg" alt="Métropole Européenne de Lille">
    </a>
</li>
</ul>
  7. Pour les 2 logos du pied de page, on ne devrait pas indiquer "Logo de" car cela ne renseigne pas sur la destination du lien. On devrait seulement indiquer "DINSIC" et "beta.gouv.fr".

A titre d'information, un test des pages web au validateur W3C permet de déceler l'absence de l'attribut alt. Je vous invite à faire ce test à chaque fois que vous réalisez un nouveau code car c'est vraiment très important pour l'accessibilité. Vous pouvez aussi vous aider d'outils comme Dareboost qui pourront déceler les principaux problèmes de qualité du code avant toute mise en production.

gregoirenovel commented 6 years ago

Bonjour,

Merci beaucoup pour votre issue très détaillée. Nous avons (normalement) corrigé ce problème en intégration avec la pull-request #1555, ces changements devraient passer en production en fin de semaine au plus tard.

Je note cependant votre remarque concernant les "images de décoration" pour lesquelles nous avons renseigné un alt dans la PR citée ci-dessus, nous les enlèverons donc.

Merci également pour les pointeurs vers les sites de test / validation, nous connaissions déjà le validateur W3C et savions que le score de notre page d'accueil n'était pas bon et que nous devions nous améliorer fortement pour avoir une page correcte du point de vue "accessibilité".

Nous nous astreignons depuis peu à rendre tous nos nouveaux développements "conformes" aux règles d'accessibilité, comme indiqué dans l'issue #1324 par exemple, qui concerne la refonte de notre interface usager, et souhaitons rendre l'intégralité de notre site accessible, comme écrit dans #488. Mais nous sommes bien conscients de notre retard et allons faire notre maximum pour le combler rapidement.

dzc34 commented 6 years ago

Bonjour,

pour la PR #1555 :

en complément pour les images :

avec l'exention Web Developer (Firefox et Chrome) en désactivant les images et les CSS, le résultat est explicite : Capture d'écran du site après désactivation des images et des CSS

Bonus : pour comprendre le "pourquoi c'est important" :

D'une manière générale, les problématiques d'accessibilité doivent être prises en compte bien en amont de la mise en prod : dans le cahier des charges, pendant la phase développement (formation des développeurs, outil de test manuel, outil de test automatique à chaque commit, échanges avec des experts) et avant la mise en prod avec une phase d'audit plus poussée par des spécialistes.

Pour les outils, en voici 3 qui ont identifié automatiquement les problèmes évoqués (voir un peu plus, surtout si l'on regarde les autres pages "login", "stat", ...) :

à noter : les outils ne suffissent pas... il y a certainement d'autres problèmes d'accessibilité à corriger.

Liste de ressources et d'outils : https://github.com/atalan/a11y-resources/blob/master/list-of-a11y-resources.md

et le super-bonus : https://accessibility.blog.gov.uk/

juliemoynat commented 6 years ago

Merci pour vos retours et bon courage à l'équipe pour corriger tout ça !

Pensez à vous faire accompagner par un·e expert·e car l'accessibilité n'est pas un sujet si simple surtout si on n'y a pas été formé ;-) Les outils aident mais ça ne fait pas tout et on ne les comprend pas forcément.