Browse Source

add ARIA tags

Olivier Massot 1 year ago
parent
commit
09c588c70a

+ 10 - 2
components/About/Chronologie.client.vue

@@ -11,8 +11,16 @@
 
 
           <v-col cols="12" md="6">
           <v-col cols="12" md="6">
             <div class="carousel-controls">
             <div class="carousel-controls">
-              <v-btn icon="fas fa-chevron-left" @click="goPrevious" />
-              <v-btn icon="fas fa-chevron-right" @click="goNext" />
+              <v-btn
+                icon="fas fa-chevron-left"
+                aria-label="Précédent"
+                @click="goPrevious"
+              />
+              <v-btn
+                icon="fas fa-chevron-right"
+                aria-label="Suivant"
+                @click="goNext"
+              />
             </div>
             </div>
           </v-col>
           </v-col>
         </v-row>
         </v-row>

+ 1 - 1
components/About/Logiciels.vue

@@ -40,7 +40,7 @@
               <footer>
               <footer>
                 <v-img :src="item.logoUrl" :alt="item.logoAlt" class="logo" />
                 <v-img :src="item.logoUrl" :alt="item.logoAlt" class="logo" />
 
 
-                <v-btn class="plus-button">
+                <v-btn aria-label="Voir plus" class="plus-button">
                   <v-icon>fas fa-plus</v-icon>
                   <v-icon>fas fa-plus</v-icon>
                 </v-btn>
                 </v-btn>
               </footer>
               </footer>

+ 2 - 1
components/Common/ActionMenu.vue

@@ -36,13 +36,14 @@ de l'écran (ou au bas de l'écran sur les petits écrans)
         @click="() => onActionClick(action)"
         @click="() => onActionClick(action)"
       >
       >
         <span v-if="mdAndUp">{{ action.text }}</span>
         <span v-if="mdAndUp">{{ action.text }}</span>
-        <v-icon v-else>{{ action.icon }}</v-icon>
+        <v-icon v-else :aria-label="action.text">{{ action.icon }}</v-icon>
       </v-btn>
       </v-btn>
     </div>
     </div>
 
 
     <v-btn
     <v-btn
       v-if="isVisible"
       v-if="isVisible"
       :to="{ path: '', hash: '#top' }"
       :to="{ path: '', hash: '#top' }"
+      aria-label="Revenir en début de page"
       class="back-to-the-top secondary"
       class="back-to-the-top secondary"
     >
     >
       <v-icon>fas fa-arrow-up</v-icon>
       <v-icon>fas fa-arrow-up</v-icon>

+ 10 - 2
components/Common/Agenda.vue

@@ -12,8 +12,16 @@ Section "Agenda des évènements"
         <v-col cols="4">
         <v-col cols="4">
           <!-- Factoriser les contrôles du carousel dans un component -->
           <!-- Factoriser les contrôles du carousel dans un component -->
           <div class="carousel-controls">
           <div class="carousel-controls">
-            <v-btn icon="fas fa-chevron-left" @click="goPrevious" />
-            <v-btn icon="fas fa-chevron-right" @click="goNext" />
+            <v-btn
+              icon="fas fa-chevron-left"
+              aria-label="Précédent"
+              @click="goPrevious"
+            />
+            <v-btn
+              icon="fas fa-chevron-right"
+              aria-label="Suivant"
+              @click="goNext"
+            />
           </div>
           </div>
         </v-col>
         </v-col>
 
 

+ 17 - 3
components/Common/Carousel/Clients.client.vue

@@ -18,6 +18,7 @@
         <v-btn
         <v-btn
           v-if="lgAndUp"
           v-if="lgAndUp"
           icon="fas fa-chevron-left"
           icon="fas fa-chevron-left"
+          aria-label="Précédent"
           @click="goToPrevious"
           @click="goToPrevious"
         />
         />
 
 
@@ -37,12 +38,25 @@
         </Carousel>
         </Carousel>
 
 
         <!-- Fléche de droite -->
         <!-- Fléche de droite -->
-        <v-btn v-if="lgAndUp" icon="fas fa-chevron-right" @click="goToNext" />
+        <v-btn
+          v-if="lgAndUp"
+          icon="fas fa-chevron-right"
+          aria-label="Suivant"
+          @click="goToNext"
+        />
       </v-row>
       </v-row>
 
 
       <v-row v-if="mdAndDown">
       <v-row v-if="mdAndDown">
-        <v-btn icon="fas fa-chevron-left" @click="goToPrevious" />
-        <v-btn icon="fas fa-chevron-right" @click="goToNext" />
+        <v-btn
+          icon="fas fa-chevron-left"
+          aria-label="Précédent"
+          @click="goToPrevious"
+        />
+        <v-btn
+          icon="fas fa-chevron-right"
+          aria-label="Suivant"
+          @click="goToNext"
+        />
       </v-row>
       </v-row>
     </v-container>
     </v-container>
   </LayoutContainer>
   </LayoutContainer>

+ 2 - 2
components/Common/Carousel/Fonctionnalite.client.vue

@@ -12,8 +12,8 @@
       </v-col>
       </v-col>
 
 
       <v-col cols="12" md="6" class="arrows">
       <v-col cols="12" md="6" class="arrows">
-        <v-btn icon="fas fa-chevron-left" @click="previousAction" />
-        <v-btn icon="fas fa-chevron-right" @click="nextAction" />
+        <v-btn icon="fas fa-chevron-left" aria-label="Précédent" @click="previousAction" />
+        <v-btn icon="fas fa-chevron-right" aria-label="Suivant" @click="nextAction" />
       </v-col>
       </v-col>
     </v-row>
     </v-row>
 
 

+ 10 - 2
components/Common/ReviewSection.client.vue

@@ -6,8 +6,16 @@
           <h3>Ce sont eux qui en parlent le mieux</h3>
           <h3>Ce sont eux qui en parlent le mieux</h3>
 
 
           <div class="carousel-controls">
           <div class="carousel-controls">
-            <v-btn icon="fas fa-chevron-left" @click="goPrevious" />
-            <v-btn icon="fas fa-chevron-right" @click="goNext" />
+            <v-btn
+              icon="fas fa-chevron-left"
+              aria-label="Précédent"
+              @click="goPrevious"
+            />
+            <v-btn
+              icon="fas fa-chevron-right"
+              aria-label="Suivant"
+              @click="goNext"
+            />
           </div>
           </div>
         </div>
         </div>
       </v-col>
       </v-col>

+ 2 - 0
components/Common/Table/Comparatif.vue

@@ -79,11 +79,13 @@
             :disabled="carouselPos === 0"
             :disabled="carouselPos === 0"
             icon="fas fa-chevron-left"
             icon="fas fa-chevron-left"
             class="mr-6"
             class="mr-6"
+            aria-label="Précédent"
             @click="goToPrevious"
             @click="goToPrevious"
           />
           />
           <v-btn
           <v-btn
             :disabled="carouselPos === 1"
             :disabled="carouselPos === 1"
             icon="fas fa-chevron-right"
             icon="fas fa-chevron-right"
+            aria-label="Suivant"
             @click="goToNext"
             @click="goToNext"
           />
           />
         </div>
         </div>

+ 10 - 2
components/Home/Reviews.client.vue

@@ -153,7 +153,11 @@
 
 
       <v-row class="justify-center align-center mb-8">
       <v-row class="justify-center align-center mb-8">
         <v-col class="d-flex justify-space-around align-center">
         <v-col class="d-flex justify-space-around align-center">
-          <v-btn icon="fas fa-arrow-left-long" @click="goToPrevious" />
+          <v-btn
+            icon="fas fa-arrow-left-long"
+            aria-label="Précédent"
+            @click="goToPrevious"
+          />
 
 
           <div class="carousel-controls">
           <div class="carousel-controls">
             <div
             <div
@@ -164,7 +168,11 @@
             />
             />
           </div>
           </div>
 
 
-          <v-btn icon="fas fa-arrow-right-long" @click="goToNext" />
+          <v-btn
+            icon="fas fa-arrow-right-long"
+            aria-label="Suivant"
+            @click="goToNext"
+          />
         </v-col>
         </v-col>
       </v-row>
       </v-row>
 
 

+ 6 - 1
components/Layout/FAQ.vue

@@ -23,6 +23,7 @@
       <v-col cols="12" lg="6" class="links">
       <v-col cols="12" lg="6" class="links">
         <v-btn
         <v-btn
           href="https://ressources.opentalent.fr/space/FAQ/2496592/Tutoriels+vid%C3%A9os"
           href="https://ressources.opentalent.fr/space/FAQ/2496592/Tutoriels+vid%C3%A9os"
+          aria-label="De nombreux articles tutoriels accessibles 24h/24"
           target="_blank"
           target="_blank"
         >
         >
           <div>
           <div>
@@ -35,7 +36,11 @@
           </div>
           </div>
         </v-btn>
         </v-btn>
 
 
-        <v-btn href="https://ressources.opentalent.fr/" target="_blank">
+        <v-btn
+          href="https://ressources.opentalent.fr/"
+          target="_blank"
+          aria-label="Support accessible du lundi au vendredi via l’outil en ligne"
+        >
           <div>
           <div>
             <v-img
             <v-img
               src="/images/components/faq/Icone_FAQ.svg"
               src="/images/components/faq/Icone_FAQ.svg"

+ 12 - 2
components/Layout/Navigation/Md.vue

@@ -21,12 +21,22 @@
             href="https://admin.opentalent.fr/#/login/"
             href="https://admin.opentalent.fr/#/login/"
             icon="fas fa-user"
             icon="fas fa-user"
             class="icon"
             class="icon"
+            aria-label="Se connecter"
           />
           />
 
 
-          <v-btn to="/nous-contacter" icon="fas fa-phone" class="icon" />
+          <v-btn
+            to="/nous-contacter"
+            icon="fas fa-phone"
+            aria-label="Nous contacter"
+            class="icon"
+          />
 
 
           <AgendaLink href="/agenda-culturel">
           <AgendaLink href="/agenda-culturel">
-            <v-btn icon="fas fa-calendar" class="icon" />
+            <v-btn
+              icon="fas fa-calendar"
+              aria-label="L'agenda culturel"
+              class="icon"
+            />
           </AgendaLink>
           </AgendaLink>
         </template>
         </template>
       </v-app-bar>
       </v-app-bar>