accessibility

src/App.vue

@@ -146,9 +146,10 @@ onUnmounted(() => {
   </ShowcaseBanner>
   <div class="flex-col flex pt-24 sm:pt-48 pb-28 z-10 relative" id="skills">
     <span class="mx-4 text-3xl sm:text-4xl text-center font-medium bg-gradient-to-r from-grey-50
-    to-grey-100 bg-clip-text text-transparent px-10 ">
+    to-grey-100 bg-clip-text text-transparent px-10 " role="heading">
       {{ $t('skills-list.title.start')}}
-      <span class="bg-blue text-white hover:bg-transparent hover:text-grey-75 ease-in-out transition-all duration-1000">
+      <span class="bg-blue text-white hover:bg-transparent hover:text-grey-75 ease-in-out transition-all duration-1000"
+            role="heading">
         {{ $t('skills-list.title.highlight')}}
       </span>
       <br>
@@ -164,9 +165,10 @@ onUnmounted(() => {
   </ShowcaseBanner>
   <div class="flex-col flex pt-48 z-10 relative" id="experiences">
     <span class="mx-4 text-3xl sm:text-4xl text-center font-medium bg-gradient-to-r from-grey-50 to-grey-100
-    bg-clip-text text-transparent">
+    bg-clip-text text-transparent" role="heading">
       Des expériences
-      <span class="bg-blue text-white hover:bg-transparent hover:text-grey-75 ease-in-out transition-all duration-1000">
+      <span class="bg-blue text-white hover:bg-transparent hover:text-grey-75 ease-in-out transition-all duration-1000"
+            role="heading">
         professionnelles
       </span>
       qui m’ont
@@ -180,23 +182,23 @@ onUnmounted(() => {
   <div class="flex-col flex z-50 justify-center align-middle px-14 sm:px-64 pb-14 sm:pb-96 top-0 ">
     <div class="magic-div flex flex-col justify-center align-middle sticky py-60 sm:py-72">
       <span :class="{ 'text-white scale-101': visibleTextIndex === 0, 'text-gray-600': visibleTextIndex !== 0 }"
-            class="text-4xl sm:text-7xl font-bold transition-all ease-in-out duration-500">
+            class="text-4xl sm:text-7xl font-bold transition-all ease-in-out duration-500" role="heading">
         J’ai toujours envie de coder de nouveaux projets.
       </span>
       <span :class="{ 'text-white scale-101': visibleTextIndex === 1, 'text-gray-600': visibleTextIndex !== 1 }"
-            class="text-4xl sm:text-7xl font-bold transition-all ease-in-out duration-500">
+            class="text-4xl sm:text-7xl font-bold transition-all ease-in-out duration-500" role="heading">
         Cette passion me pousse à créer des expériences.
       </span>
       <span :class="{ 'text-white scale-101': visibleTextIndex === 2, 'text-gray-600': visibleTextIndex !== 2 }"
-            class="text-4xl sm:text-7xl font-bold transition-all ease-in-out duration-500">
+            class="text-4xl sm:text-7xl font-bold transition-all ease-in-out duration-500" role="heading">
         J’aime me réinventer et jouer avec les
         <span :class="{ 'text-yellow-300': visibleTextIndex === 2, 'text-gray-600': visibleTextIndex !== 2 }"
-              class="transition-all ease-in-out duration-700">
+              class="transition-all ease-in-out duration-700" role="heading">
           couleurs
         </span>
         et les
         <span :class="{ 'text-white': visibleTextIndex === 2, 'text-gray-600': visibleTextIndex !== 2 }"
-              class="transition-all ease-in-out duration-700">
+              class="transition-all ease-in-out duration-700" role="heading">
           {{ visibleTextIndex === 2 ? 'ForMEs' : 'formes'}}
         </span>
         .

src/components/Footer.vue

@@ -15,6 +15,6 @@ import GithubLogo from './../assets/icons/github.svg';
         </a>
       </div>
       <hr class="w-full border-grey-300">
-      <p class="text-gray-500 pt-6">© 2024 Delanier Lucas</p>
+      <p class="text-gray-500 pt-6" role="heading" aria-label="credit">© 2024 Delanier Lucas</p>
     </div>
 </template>

src/components/HeaderContainer.vue

@@ -32,7 +32,9 @@ function copyEmail(event) {
 <template>
     <header class="flex w-full p-12 justify-between items-center">
         <div class="flex items-center gap-7">
-            <p class="selectable hidden lg:block">Delanierlucas@gmail.com</p>
+            <p class="selectable hidden lg:block" aria-label="personal email of Lucas Delanier">
+              Delanierlucas@gmail.com
+            </p>
             <div class="relative parent hidden lg:block">
               <PrimaryButton text="Copier" @click="copyEmail" onkeydown="copyEmail();" role="button"/>
               <Vue3Lottie ref="copyAnimation" :animationData="CopyJson" :height="180" :width="180"

src/components/HeroContainer.vue

@@ -7,7 +7,7 @@ import RedirectLogo from './../assets/icons/redirect.svg';
         <img src="/images/picture.png" height="624" width="624" class="w-24 h-24 sm:w-40 sm:h-40"
              alt="Lucas Delanier">
         <div class="flex flex-row items-center gap-1">
-          <p class="pt-2">
+          <p class="pt-2" role="heading">
             {{ $t('welcome-message')}}
           </p>
           <p class="hover:scale-150 transition-all ease-in duration-300 hover:rotate-12">
@@ -15,7 +15,7 @@ import RedirectLogo from './../assets/icons/redirect.svg';
           </p>
         </div>
         <h1 class="text-center text-3xl sm:text-5xl font-medium bg-gradient-to-r from-grey-50 to-grey-100 bg-clip-text
-         text-transparent leading-tight pt-5" v-html="$t('catch-phrase')">
+         text-transparent leading-tight pt-5" v-html="$t('catch-phrase')" role="heading">
         </h1>
         <div class="flex scale-90 sm:scale-100 flex-row gap-3 pt-8 flex-wrap items-center justify-center">
           <LinkButton url="https://www.linkedin.com/in/lucas-delanier/">