feat (accessibility) : add title on elmts (#6)

codexarama · May 15, 2021 · 95e8315 · 95e8315
1 parent 1bf1fde
commit 95e8315
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 30 deletions.
diff --git a/index.html b/index.html
@@ -20,9 +20,8 @@
 <html>
   <body>
     <div class="evitement">
-    <a tabindex="0" class="evitement__link btn" role="button" href="#contenu">Passer au contenu</a>
+    <a tabindex="0" class="evitement__link btn" role="button" href="#contenu" title="Passer au contenu">Passer au contenu</a>
   </div>
-    <!-- <a tabindex="0" class="evitement btn" role="button" href="#contenu">Passer au contenu</a> -->
     <header class="header">
 
       <img
@@ -32,19 +31,19 @@
       />
       <nav aria-label="photographer categories">
         <ul class="tags" aria-label="photographer categories">
-          <li class="tag"><a href="?tag=portrait" rel="tag" role="button">#Portrait</a></li>
-          <li class="tag"><a href="?tag=art" rel="tag" role="button">#Art</a></li>
-          <li class="tag"><a href="?tag=architecture" rel="tag" role="button">#Architecture</a></li>
-          <li class="tag"><a href="?tag=sport" rel="tag" role="button">#Sport</a></li>
-          <li class="tag"><a href="?tag=travel" rel="tag" role="button">#Travel</a></li>
-          <li class="tag"><a href="?tag=animals" rel="tag" role="button">#Animals</a></li>
-          <li class="tag"><a href="?tag=events" rel="tag" role="button">#Events</a></li>
+          <li class="tag"><a href="?tag=portrait" rel="tag" role="button" title="Portrait">#Portrait</a></li>
+          <li class="tag"><a href="?tag=art" rel="tag" role="button" title="#Art">#Art</a></li>
+          <li class="tag"><a href="?tag=architecture" rel="tag" role="button" title="Architecture">#Architecture</a></li>
+          <li class="tag"><a href="?tag=sport" rel="tag" role="button" title="Sport">#Sport</a></li>
+          <li class="tag"><a href="?tag=travel" rel="tag" role="button" title="Travel">#Travel</a></li>
+          <li class="tag"><a href="?tag=animals" rel="tag" role="button" title="Animals">#Animals</a></li>
+          <li class="tag"><a href="?tag=events" rel="tag" role="button" title="Events">#Events</a></li>
         </ul>
       </nav>
-      <a href="index.html" class="nosPhotographes"><h1 class="header__headline">Nos Photographes</h1></a>
+      <a href="index.html" class="nosPhotographes" title="Homepage"><h1 class="header__headline">Nos Photographes</h1></a>
     </header>
     <main role="main">
-      <section id="contenu" tabindex="-1"></section>
+      <section id="contenu" tabindex="-1" aria-label="Photographers"></section>
     </main>
     <script type="text/javascript" src="js/elmt_factory.js"></script>
     <script type="text/javascript" src="js/handle_focus.js"></script>

diff --git a/js/index.js b/js/index.js
@@ -15,6 +15,7 @@ const setCard = (photographer) => {
         // CREE UNE url SPECIFIQUE POUR CHAQUE PHOTOGRAPHE (selon id)
         // OUVRE LA PAGE PRO TYPE DU PHOTOGRAPHE CORRESPONDANT
         href: 'propage.html?id=' + `${photographer.id}`,
+        title: `${photographer.name}`,
         class: 'photographerId',
       },
       elmtFactory(
@@ -23,18 +24,30 @@ const setCard = (photographer) => {
         elmtFactory('img', {
           src: 'images/portraits/' + `${photographer.portrait}`,
           alt: `${photographer.name}`,
-          tabindex: '0'
+          tabindex: '0',
         })
       ),
-      elmtFactory('h2', { class: 'card__name', tabindex: '0' }, `${photographer.name}`)
+      elmtFactory(
+        'h2',
+        { class: 'card__name', tabindex: '0' },
+        `${photographer.name}`
+      )
     ),
     elmtFactory(
       'p',
       { class: 'card__location', tabindex: '0' },
       `${photographer.city}` + ', ' + `${photographer.country}`
     ),
-    elmtFactory('p', { class: 'card__tagline', tabindex: '0' }, `${photographer.tagline}`),
-    elmtFactory('p', { class: 'card__price', tabindex: '0' }, `${photographer.price}` + '€'),
+    elmtFactory(
+      'p',
+      { class: 'card__tagline', tabindex: '0' },
+      `${photographer.tagline}`
+    ),
+    elmtFactory(
+      'p',
+      { class: 'card__price', tabindex: '0' },
+      `${photographer.price}` + '€'
+    ),
     elmtFactory('ul', { class: 'tags' })
   );
 
@@ -48,8 +61,9 @@ const setCard = (photographer) => {
         // CREE UNE url SPECIFIQUE POUR CHAQUE TAG (au clic)
         {
           href: '?tag=' + `${photographer.tags[j]}`,
-          class: `${photographer.tags[j]}`,
           rel: 'tag',
+          title:  `${photographer.tags[j]}`,
+          class: `${photographer.tags[j]}`,
         },
         '#' + `${photographer.tags[j]}`
       )

diff --git a/js/profile.js b/js/profile.js
@@ -56,8 +56,9 @@ const setId = (photographer) => {
         'a',
         {
           href: `index.html?tag=${photographer.tags[j]}`,
-          class: `${photographer.tags[j]}`,
           rel: 'tag',
+          title: `${photographer.tags[j]}`,
+          class: `${photographer.tags[j]}`,
         },
         '#' + `${photographer.tags[j]}`
       )

diff --git a/propage.html b/propage.html
@@ -20,7 +20,7 @@
 <html>
   <body>
     <header class="banner">
-      <a href="index.html" class="banner__link"
+      <a href="index.html" class="banner__link" title="Homepage"
         ><img
           src="images/logo/logo_fisheye.svg"
           class="banner__logo"
@@ -30,7 +30,7 @@
     <main>
       <!-- profil du photographe -->
       <section class="id">
-        <button type="button" id="modalBtn" class="btn btn-contact">Contactez-moi</button>
+        <button title="Me contacter" type="button" id="modalBtn" class="btn btn-contact">Contactez-moi</button>
       </section>
 
     <!-- choix des options de filtrage de la galerie photos -->
@@ -54,7 +54,7 @@
               aria-labelledby="orderBy"
               class="filter__options">
               <li
-                tabindex="0"
+                tabindex="-1"
                 role='option'
                 id="Popularité"
                 aria-selected="true"
@@ -86,19 +86,19 @@
       <section class="lightbox">
         <div class="lightbox__modal">
           <div class="lightbox__content">
-            <a rel="close" href="" role="button">
-              <i class="fas fa-times lightbox__btn lightbox__close" role="button" onclick="closeLightbox()"></i>
-            </a>
-            <div id="currentMedia" class="lightbox__show">
+            <button title="Close dialog" role="button" class="lightbox__btn lightbox__close" onclick="closeLightbox()">
+              <i class="fas fa-times"></i>
+            </button>
+            <div aria-label="image closeup view" class="lightbox__show">
               <img src="" alt="" class="lightbox__media">
               <p class="lightbox__title"></p>
             </div>
-            <a rel="prev" href="" role="button">
-              <i class="fas fa-chevron-left lightbox__btn lightbox__prev"></i>
-            </a>
-            <a rel="next" href="" role="button">
-              <i class="fas fa-chevron-right lightbox__btn lightbox__next"></i>
-            </a>
+            <button title="Previous image" role="button" class="lightbox__btn lightbox__prev">
+              <i class="fas fa-chevron-left"></i>
+            </button>
+            <button title="Next image" role="button" class="lightbox__btn lightbox__next">
+              <i class="fas fa-chevron-right"></i>
+            </button>
           </div>
         </div>
       </section>