a11y: ajoute d'alternatives aux logos, et clarification des libellés …

…de boutons avec images
AgenceBio · May 22, 2024 · 78aded5 · 78aded5
1 parent e3efcae
commit 78aded5
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 20 deletions.
diff --git a/src/components/Landing/Partners.vue b/src/components/Landing/Partners.vue
@@ -17,15 +17,15 @@
           </p>
 
           <ul class="logos logos--certification-bodies">
-            <li><img src="@/assets/logos-oc/ecocert.png" alt="" class="logo"></li>
-            <li><img src="@/assets/logos-oc/certipaq.png" alt="" class="logo"></li>
-            <li><img src="@/assets/logos-oc/certisud.png" alt="" class="logo"></li>
-            <li><img src="@/assets/logos-oc/bureau-veritas.png" alt="" class="logo"></li>
-            <li><img src="@/assets/logos-oc/certis.png" alt="" class="logo"></li>
-            <li><img src="@/assets/logos-oc/alpes-controles.png" alt="" class="logo"></li>
-            <li><img src="@/assets/logos-oc/qualisud.png" alt="" class="logo"></li>
-            <li><img src="@/assets/logos-oc/ocacia.png" alt="" class="logo"></li>
-            <li><img src="@/assets/logos-oc/control-union.png" alt="" class="logo"></li>
+            <li><img src="@/assets/logos-oc/ecocert.png" alt="Ecocert" class="logo"></li>
+            <li><img src="@/assets/logos-oc/certipaq.png" alt="Certipaq" class="logo"></li>
+            <li><img src="@/assets/logos-oc/certisud.png" alt="Certisud" class="logo"></li>
+            <li><img src="@/assets/logos-oc/bureau-veritas.png" alt="Bureau Veritas" class="logo"></li>
+            <li><img src="@/assets/logos-oc/certis.png" alt="Certis" class="logo"></li>
+            <li><img src="@/assets/logos-oc/alpes-controles.png" alt="Alpes Contrôles" class="logo"></li>
+            <li><img src="@/assets/logos-oc/qualisud.png" alt="Qualisud" class="logo"></li>
+            <li><img src="@/assets/logos-oc/ocacia.png" alt="Ocacia" class="logo"></li>
+            <li><img src="@/assets/logos-oc/control-union.png" alt="Control Union" class="logo"></li>
           </ul>
         </div>
 
@@ -36,10 +36,10 @@
           </p>
 
           <ul class="logos logos--sponsors">
-            <li><img src="@/assets/logos-partenaires/agence-bio.svg" alt="" class="logo"></li>
-            <li><img src="@/assets/logos-partenaires/inao.svg" alt="" class="logo"></li>
-            <li><img src="@/assets/logos-partenaires/ofb.svg" alt="" class="logo"></li>
-            <li><img src="@/assets/logos-partenaires/asp.svg" alt="" class="logo"></li>
+            <li><img src="@/assets/logos-partenaires/agence-bio.svg" alt="L'Agence Bio" class="logo"></li>
+            <li><img src="@/assets/logos-partenaires/inao.svg" alt="Institut National de l'Origine et de la Qualité" class="logo"></li>
+            <li><img src="@/assets/logos-partenaires/ofb.svg" alt="Office français de la biodiversité" class="logo"></li>
+            <li><img src="@/assets/logos-partenaires/asp.svg" alt="Agence de services et de paiement" class="logo"></li>
           </ul>
         </div>
       </div>

diff --git a/src/components/Map/LayerSelector.vue b/src/components/Map/LayerSelector.vue
@@ -20,26 +20,26 @@
       >Fermer</button>
 
       <h6 class="fr-my-2w fr-text--md">Fonds de carte</h6>
-      <button class="menu-entry" :class="{ 'active': fond === 'plan' }" @click="$emit('update:fond', 'plan')">
-        <img src="@/assets/map/plan.jpg" alt="Fond plan" />
+      <button class="menu-entry" :class="{ 'active': fond === 'plan' }" @click="$emit('update:fond', 'plan')" aria-label="Choisir le fond plan">
+        <img src="@/assets/map/plan.jpg" alt="" />
         <span>Plan</span>
       </button>
-      <button class="menu-entry" :class="{ 'active': fond === 'satellite' }" @click="$emit('update:fond', 'satellite')">
-        <img src="@/assets/map/satellite.jpg" alt="Fond satellite" />
+      <button class="menu-entry" :class="{ 'active': fond === 'satellite' }" @click="$emit('update:fond', 'satellite')" aria-label="Choisir le fond satellite">
+        <img src="@/assets/map/satellite.jpg" alt="" />
         <span>Satellite</span>
       </button>
 
       <hr class="fr-mt-3w fr-pb-2w" />
 
       <h6 class="fr-mb-2w fr-text--md">Calques</h6>
-      <button aria-label="Calque classification" class="menu-entry" :class="{ 'active': classification }" @click="$emit('update:classification', !classification)">
+      <button class="menu-entry" :class="{ 'active': classification }" @click="$emit('update:classification', !classification)" :aria-label="`${!classification ? 'Activer' : 'Désactiver'} le calque RPG ${currentCampagne}`">
         <img src="@/assets/map/classification.jpg" alt="" />
         <span>
-          RPG {{ currentCampagne }}
+          <abbr title="Registre Parcellaire Graphique">RPG</abbr> {{ currentCampagne }}
           <small class="fr-hint-text">Voir la <a href="https://docs-cartobio.agencebio.org/agriculteurs.trices/annexes/legendes-de-la-carte" @click.stop target="_blank">méthode de classification</a></small>
         </span>
       </button>
-      <button aria-label="Calque numéros de cadastre" class="menu-entry" :class="{ 'active': cadastre }" @click="$emit('update:cadastre', !cadastre)">
+      <button class="menu-entry" :class="{ 'active': cadastre }" @click="$emit('update:cadastre', !cadastre)" :aria-label="`${!cadastre ? 'Activer' : 'Désactiver'} le calque références cadastrales`">
         <img src="@/assets/map/cadastre.jpg" alt="" />
         <span>Cadastre</span>
       </button>